A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements

in your document. A style rule is made of three parts:

Selector: A selector is an HTML tag at which style will be applied. This could be any tag like h!" or table" etc. Property: A property is a type of attribute of HTML tag. #ut simply$ all the HTML attributes are con%erted into CSS properties. They could be color or border etc. Value: &alues are assigned either red or #F1F1F1 etc. to properties. 'or e(ample color property can ha%e %alue

)ou can put CSS Style *ule Synta( as follows:

selector { property: value }

Example: )ou can define a table border as follows:

table{ border :1px solid #C00; }

Here table is a selector and border is a property and gi%en %alue 1px solid #C00 is the %alue of that property. )ou can define selectors in %arious simple ways based on your comfort. Let me put these selectors one by one.

The TypeSelectors:
This is the same selector we ha%e seen abo%e. Again one more e(ample to gi%e a color to all le%el ! headings :

h1 { color: #36CFFF; }

The UniversalSelectors:
*ather than selecting elements of a specific type$ the uni%ersal selector +uite simply matches the name of any element type :

* { color: #000000; }
This rule renders the content of e%ery element in our document in black.

The DescendantSelectors:
Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As gi%en in the following e(ample$ style rule will apply to em" element only when it lies inside ul" tag.

ul em {

color: #000000; }

The ClassSelectors:
)ou can define style rules based on the class attribute of the elements. All the elements ha%ing that class will be formatted according to the defined rule.

blac! { color: #000000; }

This rule renders the content in black for e%ery element with class attribute set to black in our document. )ou can make it a bit more particular. 'or e(ample:

h1 blac! { color: #000000; }

This rule renders the content in black for only h!" elements with class attribute set to black.

)ou can apply more than one class selectors to gi%en element. Consider the following e(ample :

"p class#$ce%ter bold$& 'his para (ill be styled by the classes center a%d bold ")p&

The ID Selectors:
)ou can define style rules based on the id attribute of the elements. All the elements ha%ing that id will be formatted according to the defined rule.

#blac! { color: #000000; }

This rule renders the content in black for e%ery element with id attribute set to black in our document. )ou can make it a bit more particular. 'or e(ample:

h1#blac! { color: #000000; }

This rule renders the content in black for only h!" elements with id attribute set to black.

The true power of id selectors is when they are used as the foundation for descendant selectors$ 'or e(ample:

#blac! h* { color: #000000; }

,n this e(ample all le%el - headings will be displayed in black color only when those headings will lie with in tags ha%ing id attribute set to black.

The ChildSelectors:
)ou ha%e seen descendant selectors. There is one more type of selectors which is %ery similar to descendants but ha%e different functionality. Consider the following e(ample:

body & p { color: #000000; }

This rule will render all the paragraphs in black if they are direct child of body" element. .ther paragraphs put inside other elements like di%" or td" etc. would not ha%e any effect of this rule.

The AttributeSelectors:
)ou can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that has a type attribute with a %alue of text:

i%put+type#$text$,{ color: #000000; }

The ad%antage to this method is that the applied only to the desired te(t fields. input type/0submit0 1" element is unaffected$ and the color

There are following rules applied to attribute selector.

p[lang] 2 Selects all paragraph elements with a lang attribute. p[lang="fr"] 2 Selects all paragraph elements whose lang attribute has a %alue of e(actly 0fr0. p[lang~="fr"] 2 Selects all paragraph elements whose lang attribute contains the word 0fr0. p[lang|="en"] 2 Selects all paragraph elements whose lang attribute contains %alues that are e(actly 0en0$ or begin with 0en20.

Multiple Style Rules:

)ou may need to define multiple style rules for a single element. )ou can define these rules to combine multiple properties and corresponding %alues into a single block as defined in the following e(ample:

h1 { color: #36C; -o%t.(ei/ht: %ormal; letter.spaci%/: 0em; mar/i%.bottom: 1em; text.tra%s-orm: lo(ercase; }
Here all the property and %alue pairs are separated by a semi colon (; . )ou can keep them in a ingle line or multiple lines. 'or better readability we keep them into separate lines.

'or a while don3t bother about the properties mentioned in the abo%e block. These properties will be e(plained in coming chapters and you can find complete detail about properties in CSS *eferences.

Grouping Selectors:
)ou can apply a style to many selectors if you like. 4ust separate the selectors with a comma as gi%en in the following e(ample:

h11 h*1 h3 { color: #36C; -o%t.(ei/ht: %ormal; letter.spaci%/: 0em; mar/i%.bottom: 1em; text.tra%s-orm: lo(ercase; }
This define style rule will be applicable to h!$ h- and h5 element as well. The order of the list is irrele%ant. All the elements in the selector will ha%e the corresponding declarations applied to them. )ou can combine %arious class selectors together as shown below:

#co%te%t1 #-ooter1 #suppleme%t { positio%: absolute; le-t: 210px; (idth: *00px; }

Embedded CSS - The <style> Element:

)ou can put your CSS rules into an HTML document using the style" element. This tag is placed inside head"... 1head" tags. *ules defined using this synta( will be applied to all the elements a%ailable in the document. Here is the generic synta(:

"head& "style type#$text)css$ media#$ 3tyle 4ules ")style& ")head&

$&

Attributes:
Attributes associated with !ttri"ut e type media style" elements are:

Value te(t1css screen

#escription Specifies the style sheet language as a content2type 6M,M7 type8. This is re+uired attribute. Specifies the de%ice the document will be displayed on. 9efault %alue

tty isall. This is optional attribute. t% pro:ection handheld print braille aural all

Example:
'ollowing is the e(ample of embed CSS based on abo%e synta(:

"head& "style type#$text)css$ media#$all$& h1{ color: #36C; } ")style& ")head&

Inline CSS - The style Attribute:

)ou can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic synta(:

"eleme%t style#$

style rules

$&

Attributes:
!ttri"ut e style Value style rules #escription The %alue of style attribute is a combination of style declarations separated by semicolon 6;8.

Example:
'ollowing is the e(ample of inline CSS based on abo%e synta(:

"h1 style #$color:#36C;$& 'his is i%li%e C33 ")h1&

This will produce following result:

This is inline CSS External CSS - The <link> Element:

The link" element can be used to include an e(ternal stylesheet file in your HTML document.

An e(ternal style sheet is a separate te(t file with $css e(tension. )ou define all the Style rules within this te(t file and then you can include this file in any HTML document using link" element. Here is the generic synta( of including e(ternal CSS file:

"head& "li%! type#$text)css$ hre-#$ ")head&

$ media#$

$ )&

Attributes:
Attributes associated with !ttri"ut e type href media style" elements are:

Value te(t1css <*L

#escription Specifies the style sheet language as a content2type 6M,M7 type8. This attribute is re+uired. Specifies the style sheet file ha%ing Style rules. This attribute is a re+uired.

screen Specifies the de%ice the document will be displayed on. 9efault %alue tty isall. This is optional attribute. t% pro:ection handheld print braille aural all

Example:
Consider a simple style sheet file with a name mystyle.css ha%ing the following rules:

h11 h*1 h3 { color: #36C; -o%t.(ei/ht: %ormal; letter.spaci%/: 0em; mar/i%.bottom: 1em; text.tra%s-orm: lo(ercase; }
=ow you can include this file mystyle.css in any HTML document as follows:

"head& "li%! type#$text)css$ hre-#$mystyle css$ media#$all$ )& ")head&

Imported CSS - @import Rule:

>import is used to import an e(ternal stylesheet in a manner similar to the generic synta( of >import rule. link" element. Here is the

"head& "5import $647$; ")head&

Here <*L is the <*L of the style sheet file ha%ing style rules. )ou can use another synta( as well:

"head& "5import url8$647$9; ")head&

Example:
'ollowing is the e(ample showing you how to import a style sheet file into HTML document:

"head& 5import $mystyle css$; ")head&

CSS Rules Overriding:

?e ha%e discussed four ways to include style sheet rules in a an HTML document. Here is the rule to o%erride any Style Sheet *ule.

Any inline style sheet takes highest priority. So it will o%erride any rule defined in style"... 1style" tags or rules defined in any e(ternal style sheet file. Any rule defined in style"... 1style" tags will o%erride rules defined in any e(ternal style sheet file. Any rule defined in e(ternal style sheet file takes lowest priority and rules defined in this file will be applied only when abo%e two rules are not applicable.

Handling old Browsers:

There are still many old browsers who do not support CSS. So we should take care while writing our 7mbedded CSS in an HTML document. The following snippet shows how you can use comment tags to hide CSS from older browsers:

"style type#$text)css$& ":.. body1 td { color: blue; } ..& ")style&

CSS Comments:
Many times you may need to put additional comments in your style sheet blocks. So it is %ery easy to comment any part in style sheet. )ou simple put your comments inside [email protected] is a comment in style sheet.....@1.

)ou can use 1@ ....@1 to comment multi2line blocks in similar way you do in C and CAA programming languages.

Example:
)* 'his is a% exter%al style sheet -ile *) h11 h*1 h3 { color: #36C; -o%t.(ei/ht: %ormal; letter.spaci%/: 0em; mar/i%.bottom: 1em; text.tra%s-orm: lo(ercase; } )* e%d o- style rules *)

This tutorial will teach you how to set backgrounds of %arious HTML elements. )ou can set following background properties of an element:

The "ac%groun&'color property is used to set the background color of an element. The "ac%groun&'image property is used to set the background image of an element. The "ac%groun&'repeat property is used to control the repetition of an image in the background. The "ac%groun&'position property is used to control the position of an image in the background. The "ac%groun&'attac(ment property is used to control the scrolling of an image in the background. The "ac%groun& property is used as shorthand to specify a number of other background properties.

Set the background color:

'ollowing is the e(ample which demonstrates how to set the background color for an element.

"p style="background-color:yellow;"& 'his text has a yello( bac!/rou%d color ")p&

This will produce following result: This te(t has a yellow background color. To Become more comfortable 2 9o .nline #ractice

Set the background image:

'ollowing is the e(ample which demonstrates how to set the background image for an element.

"table style="background-image:url(/https/www.scribd.com/images/pattern1.gif);"&

"tr&"td& 'his table has bac!/rou%d ima/e set ")td&")tr& ")table&

To Become more comfortable 2 9o .nline #ractice

Repeat the background image:

'ollowing is the e(ample which demonstrates how to repeat the background image if image is small. )ou can use no-repeat %alue for background-repeat property if you don3t want to repeat an image$ in this case image will display only once. By default background-repeat property will ha%e repeat %alue.

"table style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-repeat: repeat;"& "tr&"td& 'his table has bac!/rou%d ima/e (hich repeats multiple times ")td&")tr& ")table&
To Become more comfortable 2 9o .nline #ractice 'ollowing is the e(ample which demonstrates how to repeat the background image %ertically.

"table style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-repeat: repeat-y;"& "tr&"td& 'his table has bac!/rou%d ima/e set (hich (ill repeat vertically ")td&")tr& ")table&
To Become more comfortable 2 9o .nline #ractice 'ollowing is the e(ample which demonstrates how to repeat the background image horiContally.

"table style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-repeat: repeat- ;"& "tr&"td& 'his table has bac!/rou%d ima/e set (hich (ill repeat hori;o%tally ")td&")tr& ")table&
To Become more comfortable 2 9o .nline #ractice

Set the background image position:

'ollowing is the e(ample which demonstrates how to set the background image position !DD pi(els away from the left side.

"table style="background-image:url(/https/www.scribd.com/images/pattern1.gif);

background-position:1!!p ;"& "tr&"td& <ac!/rou%d ima/e positio%ed 100 pixels a(ay -rom the le-t ")td&")tr& ")table&
'ollowing is the e(ample which demonstrates how to set the background image position !DD pi(els away from the left side and -DD pi(els down from the top.

"table style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-position:1!!p "!!p ;"& "tr&"td& 'his table has bac!/rou%d ima/e positio%ed 100 pixels a(ay -rom the le-t a%d *00 pixels -rom the top ")td&")tr& ")table&
To Become more comfortable 2 9o .nline #ractice

Set the background attachment:

Background attachment determines whether a background image is fi(ed or scrolls with the rest of the page. 'ollowing is the e(ample which demonstrates how to set the fi(ed background image.

"p style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-attac#ment:fi ed;"& 'his parap/raph has -ixed bac!/rou%d ima/e ")p&
'ollowing is the e(ample which demonstrates how to set the scrolling background image.

"p style="background-image:url(/https/www.scribd.com/images/pattern1.gif); background-attac#ment:scroll;"& 'his parap/raph has scrolli%/ bac!/rou%d ima/e ")p&
To Become more comfortable 2 9o .nline #ractice

Shorthand property :
)ou can use the background property to set all the background properties at once. 'or e(ample:

"p style="background:url(/https/www.scribd.com/images/pattern1.gif) repeat fi ed;"& 'his parap/raph has -ixed repeated bac!/rou%d ima/e ")p&

This tutorial will teach you how to set fonts of a content a%ailable in an HTML element. )ou can set following font properties of an element:

The font'family property is used to change the face of a font. The font'style property is used to make a font italic or obli+ue. The font')ariant property is used to create a small2caps effect. The font'*eig(t property is used to increase or decrease how bold or light a font appears. The font'si+e property is used to increase or decrease the siCe of a font. The font property is used as shorthand to specify a number of other font properties.

Set the font family:

'ollowing is the e(ample which demonstrates how to set the font family of an element. #ossible %alue could be any font family name.

"p style="font-family:georgia$garamond$serif;"& 'his text is re%dered i% either /eor/ia1 /aramo%d1 or the de-ault seri- -o%t depe%di%/ o% (hich -o%t you have at your system ")p&
This will produce following result: This text is rendered in either georgia, serif font depending on which font you have at your system. To Become more comfortable 2 9o .nline #ractice garamond, or the default

Set the font style:

'ollowing is the e(ample which demonstrates how to set the font style of an element. #ossible %alues are normal, italic and oblique.

"p style="font-style:italic;"& 'his text (ill be re%dered i% italic style ")p&

This will produce following result: This text ill be rendered in italic style

To Become more comfortable 2 9o .nline #ractice

Set the font variant:

'ollowing is the e(ample which demonstrates how to set the font %ariant of an element. #ossible %alues are normal and small-caps.

"p style="font-%ariant:small-caps;"&

'his text (ill be re%dered as small caps ")p&

This will produce following result: TH,S
T7ET ?,LL B7 *7=797*79 AS SMALL CA#S

To Become more comfortable 2 9o .nline #ractice

Set the font weight:

'ollowing is the e(ample which demonstrates how to set the font weight of an element. The font2weight property pro%ides the functionality to specify how bold a font is. #ossible %alues could be normal, bold, bolder, lighter, 100, !00, "00, #00, $00, %00, &00, '00, (00.

"p style="font-weig#t:bold;"& 'his -o%t is bold ")p& "p style="font-weig#t:bolder;"& 'his -o%t is bolder ")p& "p style="font-weig#t:&!!;"& 'his -o%t is =00 (ei/ht ")p&
This will produce following result: ,(is font is "ol&$ ,(is font is "ol&er$ ,(is font is -.. *eig(t$ To Become more comfortable 2 9o .nline #ractice

Set the font size:

'ollowing is the e(ample which demonstrates how to set the font siCe of an element. The font2siCe property is used to control the siCe of fonts. #ossible %alues could be xx-small, x-small, small, medium, large, xlarge, xx-large, smaller, larger, si)e in pixels or in *

"p style="font-si'e:"!p ;"& 'his -o%t si;e is *0 pixels ")p& "p style="font-si'e:small;"& 'his -o%t si;e is small ")p& "p style="font-si'e:large;"& 'his -o%t si;e is lar/e ")p&
This will produce following result:

This font siCe is -D pi(els

This font siCe is small

This font siCe is large

To Become more comfortable 2 9o .nline #ractice

Set the font size adjust:

'ollowing is the e(ample which demonstrates how to set the font siCe ad:ust of an element. This property enables you to ad:ust the (2height to make fonts more legible. #ossible %alue could be any number.

"p style="font-si'e-ad(ust:!.)1;"& 'his text is usi%/ a -o%t.si;e.ad>ust value ")p&

This will produce following result: This te(t is using a font2siCe2ad:ust %alue. To Become more comfortable 2 9o .nline #ractice

Set the font stretch:

'ollowing is the e(ample which demonstrates how to set the font stretch of an element. This property relies on the user3s computer to ha%e an e(panded or condensed %ersion of the font being used. #ossible %alues could be normal, ider, narro er, ultra-condensed, extra-condensed, condensed, semicondensed, semi-expanded, expanded, extra-expanded, ultra-expanded .

"p style="font-stretc#:ultra-e panded;"& ?- this does%@t appear to (or!1 it is li!ely that your computer does%@t have a co%de%sed or expa%ded versio% o- the -o%t bei%/ used ")p&
This will produce following result: ,f this doesn3t appear to work$ it is likely that your computer doesn3t ha%e a condensed or e(panded %ersion of the font being used. To Become more comfortable 2 9o .nline #ractice

Shorthand property :
)ou can use the +ont property to set all the font properties at once. 'or e(ample:

"p style="font:italic small-caps bold 1*p georgia;"& Applyi%/ all the properties o% the text at o%ce ")p&

This tutorial will teach you how to manipulate te(t using CSS properties. )ou can set following te(t properties of an element:

The color property is used to set the color of a te(t. The &irection property is used to set the te(t direction. The letter'spacing property is used to add or subtract space between the letters that make up a word. The *or&'spacing property is used to add or subtract space between the words of a sentence. The text'in&ent property is used to indent the te(t of a paragraph. The text'align property is used to align the te(t of a document. The text'&ecoration property is used to underline$ o%erline$ and strikethrough te(t. The text'transform property is used to capitaliCe te(t or con%ert te(t to uppercase or lowercase letters. The *(ite'space property is used to control the flow and formatting of te(t. The text's(a&o* property is used to set the te(t shadow around a te(t.

Set the text color:

'ollowing is the e(ample which demonstrates how to set the te(t color. #ossible %alue could be any color name in any %alid format.

"p style="color:red;"& 'his text (ill be (ritte% i% red ")p&

This will produce following result: This te(t will be written in red. To Become more comfortable 2 9o .nline #ractice

Set the text direction :

'ollowing is the e(ample which demonstrates how to set the direction of a te(t. #ossible %alues are ltr or rtl.

"p style="direction:rtl;"& 'his text (ill be re%edered -rom ri/ht to le-t ")p&

This will produce following result: This te(t will be renedered from right to left To Become more comfortable 2 9o .nline #ractice

Set the space between characters:

'ollowing is the e(ample which demonstrates how to set the space between characters. #ossible %alues are normal or a number speci+ying space..

"p style="letter-spacing:*p ;"& 'his text is havi%/ space bet(ee% letters ")p&
This will produce following result: T h i s t e ( t i s h a % i n g s p a c e b e t w e e n l e t t e r s .

To Become more comfortable 2 9o .nline #ractice

Set the space between words:

'ollowing is the e(ample which demonstrates how to set the space between words. #ossible %alues are normal or a number speci+ying space..

"p style="word-spacing:*p ;"& 'his text is havi%/ space bet(ee% (ords ")p&
This will produce following result: This te(t is ha%ing space between words. To Become more comfortable 2 9o .nline #ractice

Set the text indent:

'ollowing is the e(ample which demonstrates how to indent the first line of a paragraph. #ossible %alues are * or a number speci+ying indent space..

"p style="te t-indent:1cm;"& 'his text (ill have -irst li%e i%de%ted by 1cm a%d this li%e (ill remai% at its actual positio% this is do%e by C33 text.i%de%t property ")p&
This will produce following result:

This te(t will ha%e first and this line will remain this is done by CSS te(t2indent property. To Become more comfortable 2 9o .nline #ractice

line at

its

indented actual

by

!cm position

Set the text alignment:

'ollowing is the e(ample which demonstrates how to align a te(t. #ossible %alues are le+t, right, center, ,usti+y..

"p style="te 'his (ill be ")p& "p style="te 'his (ill be ")p& "p style="te 'his (ill be ")p&

t-align:rig#t;"& ri/ht ali/%ed t-align:center;"& ce%ter ali/%ed t-align:left;"& le-t ali/%ed

This will produce following result: This will be right aligned. This will be center aligned. This will be left aligned. To Become more comfortable 2 9o .nline #ractice

Decorating the text:

'ollowing is the e(ample which demonstrates how to decorate a te(t. #ossible %alues are none, underline, o-erline, line-through, blink..

"p style="te t-decoration:underline;"& 'his (ill be u%derli%ed ")p& "p style="te t-decoration:line-t#roug#;"& 'his (ill be stri!ed throu/h ")p& "p style="te t-decoration:o%erline;"& 'his (ill have a over li%e ")p& "p style="te t-decoration:blink;"& 'his text (ill have bli%!i%/ e--ect ")p&
This will produce following result: This will be underlined

This will be striked through. This will ha%e a o%er line. This te(t will ha%e blinking effect To Become more comfortable 2 9o .nline #ractice

Set the text cases:

'ollowing is the e(ample which demonstrates how to set the cases for a te(t. #ossible %alues are none, capitali)e, uppercase, lo ercase..

"p style="te 'his (ill be ")p& "p style="te 'his (ill be ")p& "p style="te 'his (ill be ")p&

t-transform:capitali'e;"& capitali;ed t-transform:uppercase;"& i% uppercase t-transform:lowercase;"& i% lo(ercase

This will produce following result: This ?ill Be CapitaliCed TH,S ?,LL B7 ,= <##7*CAS7 this will be in lowercase To Become more comfortable 2 9o .nline #ractice

Set the white space between text:

'ollowing is the e(ample which demonstrates how white space inside an element is handled. #ossible %alues are normal, pre, no rap.

"p style="w#ite-space:pre;"&'his text has a li%e brea! a%d the (hite.space pre setti%/ tells the bro(ser to ho%or it >ust li!e the B'C7 pre ta/ ")p&
This will produce following result: This te(t has a line break and the white2space pre setting tells the browser to honor it

:ust like the HTML pre tag. To Become more comfortable 2 9o .nline #ractice

Set the text shadow:

'ollowing is the e(ample which demonstrates how to set the shadow around a te(t. This may not be supported by all the browsers.

"p style="te t-s#adow:+p +p ,p blue;"& ?- your bro(ser supports the C33 text.shado( property1 this text (ill have a blue shado( ")p&
This will produce following result: