2. WhatisCascading Style Sheets (CSS) is a simple mechanism for
adding style (e.g. fonts, colors, spacing) to Web
documents.PUNEITLABS 3. Advantages of CSS
- Completely consistent with the look and feel of your pages
- More control over the layout and design
- Pages download faster, sometimes by as much as 50%
- You have to type less code, and your pages are shorter and
neater.
- CSS properties can also be dynamically changed with a
JavaScript.
- eg.object .style.cssFloat="left"
PUNEITLABS 4.
- . With a combination of positioning, floating, margins, padding
and borders, you should be able to represent ANY web design and
there is nothing that can be done in tables that can not be done
with CSS.
PUNEITLABS 5. There are three parts to CSS
- The fact that they can cascade.
PUNEITLABS 6.
- Where HTML has tags, CSS has 'selectors'.
- A Cascading Style Sheets rule is made up of a selector and a
declaration.
- The declaration is the part of the rule inside the curly
braces. It specifies what a style effect will be. For example,
"color: blue".
- Eg: body { font-size: 12px; color: navy;}
PUNEITLABS 7.
- A declaration has two parts separated by a colon: property and
value.
- selector {property:value}
- More than one declaration may be placed inside the curly
braces
- A semi-colon must separate each declaration from the next. The
ending declaration does not require a semi-colon
- Eg.selector {property:value; property:value;}
- H2 {color:blue; font-family:Arial, sans-serif;}
- If you neglect to place a semi-colon between any two
declarations your style sheet will totally fail.
- H1 {font-family:Arial, Helvetica, sans-serif;} H2
{font-family:Arial, Helvetica, sans-serif;} H3 {font-family:Arial,
Helvetica, sans-serif;}
- H1, H2, H3 {font-family:Arial, Helvetica, sans-serif;}
PUNEITLABS 8.
Applying CSS PUNEITLABS 9.
In-line
- HTML should be apresentation freedocument, and so in-line
styles should be
- avoided wherever possible.
PUNEITLABS 10.
-
-
-
-
- a { color: blue; } .......
Internal PUNEITLABS 11.
CSS Example ...External PUNEITLABS 12. Lengths and
Percentages
- There are specific units for values used in CSS, but there are
some general units that are used in a number of properties
- em(such as font-size: 2em)
- ex(one ex is the x-height of a font (x-height is usually about
half the font-size)
- px(such as font-size: 12px)pixels
- pt(such as font-size: 12pt)point (1 pt is the same as 1/72
inch)
- pcpica (1 pc is the same as 12 points)
- %(such as font-size: 80%)percentage
- Other units includecm(centimetres),mm(millimetres)
andin(inches).
- When a value iszero , you do not need to state a unit.
PUNEITLABS 13.
- CSS brings 16 millioncolours to Web Page.
- There are 17 valid predefined colour names.
- They are-aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, and
yellow.
PUNEITLABS 14.
-
-
- transparentis also a valid value.
-
-
- The three values in the rbg value are from 0 to 255.
-
-
- Hexadecimalis abase-16number system. hexadecimal has 16 digits,
from 0 to f.
-
-
- The hex number is prefixed with a hash character ( # ) and can
be three or six digits in length.
-
-
- Basically, the three-digit version is a compressed version of
the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966
etc.).
PUNEITLABS 15.
- None: The element will not be displayed.
- Block: The element will be displayed as a block-level element,
with a line break before and after the element.
- Inline: The element will be displayed as an inline element,
with no line break before or after the element.
PUNEITLABS 16. Other display types
PUNEITLABS 17.
PUNEITLABS 18.
- Static: The value static is the default value for elements and
renders the position in the normal order of things as they appear
in the html
- Relative: It is much like static, but the element can be offset
from its original position with the propertiestop ,right
,bottomandleft.
- Absolute: The absolute element can be placed anywhere on the
page usingtop ,right ,bottomandleft.
- Fixed: It behaves like absolute, but fixed elements should stay
exactly where they are on the screen even when the page is
scrolled.
PUNEITLABS 19.
- Floating an element will shift it to the right or left of a
line, with surrounding content flowing around it.
- Floating is normally used to position smaller elements within a
page
PUNEITLABS 20.
- The CSS clear property is used to for control flow when using
the float property. Using CSS clear, you can specify whether to
keep one or both sides of an element "clear" (i.e. no elements can
appear on the side that is clear).
- none - floating elements can appear on either side
- left - floating elements can not appear on the left (i.e. keep
the left side "clear")
- right - floating elements can not appear on the right (i.e.
keep the right side "clear")
- both - floating elements can not appear on the left or right
(i.e. keep both sides "clear")
PUNEITLABS 21.
- The font you specify must be on the user's computer, so there
is little point in using obscure fonts.
- The most commonly used are arial, verdana and times new roman),
but you can specify more than one font, separated bycommas .
- If the name of the font is more than one word it should beput
in quotation marks (------)
- The size of the font. Be careful with this - text such as
headings should not just be a paragraph in a large font; you should
still use headings ( h1 ,h2etc.)
PUNEITLABS 22.
- This states whether the text is bold or not.
- Commonly used arefont-weight: bold or font-weight: normal. In
theory it can also be bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800 or 900
- This states whether the text is underlined or not.
- text-decoration: overline
- text-decoration: line-through , strike-through,
- text-decoration: underline
- (should only be used for links )
- This property is usually used to decorate links, such as
specifying no underline with
PUNEITLABS 23.
- This will change the case of the text.
- text-transform: capitalize
- text-transform: uppercase
- text-transform: lowercase
- letter-spacingandword-spacing
- p { letter-spacing: 2px; word-spacing: 3px; line-height: 4px;
text-align: center; }
PUNEITLABS 24. Margins and Padding
- MarginsandPaddingare the two most commonly used properties for
spacing-out elements.
- A margin is the spaceoutsideof the element, whereas padding is
the spaceinsidethe element.
- h2 {font-size: 10px;background-color: #1F488D;margin:
10px;padding: 5px;}
PUNEITLABS 25. Padding
-
- #sample{ padding: 10px; }
-
- #sample{ padding: 10px 5px }
-
- #sample{ padding: 10px 5px 2px }
-
- #sample{ padding: 10px 5px 2px 5px }
-
- one value, such as 10px, to specify equal padding on every
side
-
- two values, such as 10px 5px, to specify top/bottom (first
value) and right/left (second value) padding
-
- three values, such as 10px 5px 2px, to specify top (first
value), right/left (second value) and bottom (third value)
padding
-
- four values, such as 10px 5px 2px 1px to specify top, right,
bottom and left padding respectively
PUNEITLABS 26.
- Borderscan be applied to most HTML elements within the
body.
- The values can besolid ,dotted ,dashed ,double ,groove ,ridge
,insetandoutset .
- border-top-width ,border-right-widht
,border-bottom-widthandborder-left-width
- Add the following code to the CSS file:
- Eg. h2 { border-style: dashed; border-width: 3px;
border-left-width: 10px; border-right-width: 10px; border-color:
red;}
PUNEITLABS 27. PUNEITLABS by- DHANESH.T.S