1

CSS Introduction
CSS stands for Cascading Style Sheet. CSS is used to control the style of a web document in a simple and easy way. It is simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand. It provides powerful control over the presentation of an !"# document. "ost commonly, CSS is combined with the markup languages !"# or $ !"#. %efore using CSS you should be familiar with %asic word processing using any text editor, %asic understanding on internet browsing using a browser, %asic understanding on developing simple &eb 'ages using !"# or $ !"#. CSS Versions: Cascading Style Sheets, level ( )CSS(* was came out of &+C as a recommendation in ,ecember (--.. !his version describes the CSS language as well as a simple visual formatting model for all the !"# tags. CSS/ was became a &+C recommendation in "ay (--0 and builds on CSS(. !his version adds support for media1specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables. Advantages of CSS: 1. CSS saves time 1 2ou can write CSS once and then reuse same sheet in multiple !"# pages. 2ou can define a style for each !"# element and apply it to as many &eb pages as you want. 2. Pages load faster 1 If you are using CSS, you do not need to write !"# tag attributes every time. 3ust write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. 3. Easy maintenance - !o make a global change, simply change the style, and all elements in all the web pages will be updated automatically. 4. Su erior styles to !"#$ - CSS has a much wider array of attributes than !"# so you can give far better look to your !"# page in comparison of !"# attributes. %. #ulti le &evice Com ati'ility - Style sheets allow content to be optimized for more than one type of device. %y using the same !"# document, different versions of a website can be presented for handheld devices such as ',4s and cell phones or for printing. (. )lo'al *e' standards - it is being recommended to use CSS. So it5s a good idea to start using CSS in all the !"# pages to make them compatible to future browsers.

2 CSS Synta+ , Selectors 4 CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. 4 style rule is made of three parts6 . Selector: 4 selector is an 7h(8 or 7table8 etc. 9 !"# tag at which style will be applied. !his could be any tag like

. Pro erty: 4 property is a type of attribute of !"# tag. 'ut simply, all the !"# attributes are converted into CSS properties. !hey could be color or border etc. . Value: :alues are assigned to properties. ;or example color property can have value either red or <;(;(;( etc. 2ou can define selectors in various simple ways based on your comfort.

1. "-e "y e Selectors:

2ou can put CSS Style =ule Syntax as follows6 selector . ro erty: value/ 0 >xample6 2ou can define a table border as follows6 "a'le . 'order :1 + solid 1C22/ 0 ere table is a selector and border is a property and given value (px solid <C?? is the value of that property. example to give a color to all level ( headings 6 -1 . color: 13(C333/ 0 2. "-e 4niversal Selectors: =ather than selecting elements of a specific type, the universal selector @uite simply matches the name of any element type 6 5.

3 color: 1222222/ 0

!his rule renders the content of every element in our document in black. 3. "-e &escendant Selectors: Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. 4s given in the following example, style rule will apply to 7li8 element only when it lies inside 7ul8 tag. ul li A color6 <??????B C

4. "-e Class Selectors: 2ou can define style rules based on the class attribute of the elements. 4ll the elements having that class will be formatted according to the defined rule. .'lac6 . color: 1222222/ 0 7h( classDblack8 dfkhdkfghfkEg7Fh(8 7p classDblack8vxcvhvhckx7Fp8 !his rule renders the content in black for every element with class attribute set to black in our document. 2ou can make it a bit more particular. ;or example6 -1.'lac6 . color: 1222222/ 0

4 !his rule renders the content in black for only 7h(8 elements with class attribute set to black. 2ou can apply more than one class selectors to given element. Consider the following example 6 7 class89center 'old9: "-is ara *ill 'e styled 'y t-e classes center and 'old. 7; :

"-e <& Selectors: 2ou can define style rules based on the id attribute of the elements. 4ll the elements having that id will be formatted according to the defined rule. <black A color6 <??????B C 7div idDblack 8 dghEvsd ghEsdg hEsdf7Fdiv8 !his rule renders the content in black for every element with id attribute set to black in our document. 2ou can make it a bit more particular. ;or example6 h(<black A color6 <??????B C

!his rule renders the content in black for only 7h(8 elements with id attribute set to black. !he true power of id selectors is when they are used as the foundation for descendant selectors, ;or example6 <black h/ A color6 <??????B C

In this example all level / headings will be displayed in black color only when those headings will lie with in tags having id attribute set to black. "-e C-ild Selectors: 2ou have seen descendant selectors. !here is one more type of selectors which is very similar to descendants but have different functionality. Consider the following example6 body 8 p A color6 <??????B C

!his rule will render all the paragraphs in black if they are direct child of 7body8 element. Gther paragraphs put inside other elements like 7div8 or 7td8 etc. would not have any effect of this rule. #ulti le Style =ules: 2ou may need to define multiple style rules for a single element. 2ou can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example6 h( A color6 <+.CB font1weight6 normalB letter1spacing6 .HemB margin1bottom6 (emB text1transform6 lowercaseB C

ere all the property and value pairs are separated by a semi colon )B*. 2ou can keep them in a ingle line or multiple lines. ;or better readability we keep them into separate lines.

6 ;or a while donIt bother about the properties mentioned in the above block. !hese properties will be explained in coming chapters and you can find complete detail about properties in CSS =eferences. )rou ing Selectors: 2ou can apply a style to many selectors if you like. 3ust separate the selectors with a comma as given in the following example6 h(, h/, h+ A color6 <+.CB font1weight6 normalB letter1spacing6 .HemB margin1bottom6 (emB text1transform6 lowercaseB C

!his define style rule will be applicable to h(, h/ and h+ element as well. !he order of the list is irrelevant. 4ll the elements in the selector will have the corresponding declarations applied to them. 2ou can combine various class selectors together as shown below6 <content, <footer, <supplement A position6 absoluteB left6 J(?pxB width6 /??pxB C

CSS ty e
!here are four ways to associate styles with your methods are inline CSS and >xternal CSS. Em'edded CSS - "-e 7style: Element: 2ou can put your CSS rules into an !"# document using the 7style8 element. !his tag is placed inside 7head8...7Fhead8 tags. =ules defined using this syntax will be applied to all the elements available in the document. ere is the generic syntax6 7head8 7style typeDKtextFcssK8 Style =ules ............ 7Fstyle8 7Fhead8 !"# document. "ost commonly used

>xample6 ;ollowing is the example of embed CSS based on above syntax6 7head8 7style typeDKtextFcssL8 h( A color6 redB C 7Fstyle8 7Fhead8

8 <nline CSS - "-e style Attri'ute: 2ou can use style attribute of any !"# element to define style rules. !hese rules will be applied to that element only. ere is the generic syntax6 7element styleDK...style rules....K8 >xample6 ;ollowing is the example of inline CSS based on above syntax6 7h( style DKcolor6blueBK8 !his is inline CSS 7Fh(8

!his will produce following result6 !his is inline CSS

E+ternal CSS - "-e 7lin6: Element: !he 7link8 element can be used to include an external style sheet file in your !"# document.

4n external style sheet is a separate text file with .css extension. 2ou define all the Style rules within this text file and then you can include this file in any !"# document using 7link8 element. ere is the generic syntax of including external CSS file6 7head8 7link typeDKtextFcssK hrefDKfilename.cssK8 7Fhead8

>xample6 Consider a simple style sheet file with a name mystyle.css having the following rules6 h(, h/, h+ A color6 <+.CB font1weight6 normalB letter1spacing6 .HemB margin1bottom6 (emB text1transform6 lowercaseB C

Mow you can include this file mystyle.css in any !"# document as follows6 7head8 7link typeDKtextFcssK hrefDKmystyle.cssK8 7Fhead8

<m orted CSS - >im ort =ule: Nimport is used to import an external stylesheet in a manner similar to the 7link8 element. ere is the generic syntax of Nimport rule. 7head8 7Nimport KU=#KB 7Fhead8

ere U=# is the U=# of the style sheet file having style rules. 2ou can use another syntax as well6

10 7head8 7Nimport url)KU=#K*B 7Fhead8

>xample6 ;ollowing is the example showing you how to import a style sheet file into 7head8 Nimport Kmystyle.cssKB 7Fhead8 CSS Comments: "any times you may need to put additional comments in your style sheet blocks. So it is very easy to comment any part in style sheet. 2ou simple put your comments inside FO.....this is a comment in style sheet.....OF. 2ou can use FO ....OF to comment multi1line blocks in similar way you do in C and CPP programming languages. >xample6 FO !his is an external style sheet file OF h(, h/, h+ A color6 <+.CB font1weight6 normalB letter1spacing6 .HemB margin1bottom6 (emB text1transform6 lowercaseB C FO end of style rules. OF !"# document6

11

CSS Q #inks !his tutorial will teach you how to set different properties of a hyper link using CSS. 2ou can set following properties of a hyper link6 &e will revisit same properties when we will discuss 'seudo1Classes of CSS.

12 . !he 6link Signifies unvisited hyperlinks. . !he 6visited Signifies visited hyperlinks. . !he 6hover Signifies an element that currently has the userIs mouse pointer hovering over it. . !he 6active Signifies an element on which the user is currently clicking. Usually these all properties are kept in the header part of !"# document. =emember a6hover "US! come after a6link and a6visited in the CSS definition in order to be effective. 4lso, a6active "US! come after a6hover in the CSS definition as follows. 7style typeDKtextFcssK8 a6link Acolor6 <??????C a6visited Acolor6 <??..??C a6hover Acolor6 <;;CC??C a6active Acolor6 <;;??CCC 7Fstyle8

Mow we will see how to use these properties to give different effects to hyperlinks. Set the color of #inks6 ;ollowing is the example which demonstrates how to set the link color. 'ossible value could be any color name in any valid format. 7style typeDKtextFcssK8 a6link Acolor6<??????C 7Fstyle8 7a hrefDKFhtmlFindex.htmK8%lack #ink7Fa8

!his will produce following black link6 %lack #ink

13

Set the color of :isited #inks6 ;ollowing is the example which demonstrates how to set the color of visited links. 'ossible value could be any color name in any valid format. 7style typeDKtextFcssK8 a6visited Acolor6 <??..??C 7Fstyle8 7a hrefDKFhtmlFindex.htmK8Click this link7Fa8

!his will produce following link. Gnce you will click this link, it will change its color to green. Click this link

Change the color of links when mouse is over6

14 ;ollowing is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. 'ossible value could be any color name in any valid format. 7style typeDKtextFcssK8 a6hover Acolor6 <;;CC??C 7Fstyle8 7a hrefDKFhtmlFindex.htmK8%ring "ouse ere7Fa8

!his will produce following link. Mow you bring your mouse over this link and you will see that it changes its color to yellow. %ring "ouse ere

Change the color of active links6 ;ollowing is the example which demonstrates how to change the color of active links. 'ossible value could be any color name in any valid format. 7style typeDKtextFcssK8 a6active Acolor6 <;;??CCC 7Fstyle8 7a hrefDKFhtmlFindex.htmK8Click !his #ink7Fa8

!his will produce following link. !his will change it color to pink when user clicks it. Click !his #ink

CSS Q !ables !his tutorial will teach you how to set different properties of an set following properties of a table6 !"# table using CSS. 2ou can

. !he border1collapse Specifies whether the browser should control the appearance of

15 adEacent borders that touch each other or whether each cell should maintain its style. . !he border1spacing Specifies the width that should appear between table cells. . !he caption1side Captions are presented in the 7caption8 element. %y default, these are rendered above the table in the document. 2ou use the caption1side property to control the placement of the table caption. . !he empty1cells Specifies whether the border should be shown if a cell is empty. . !he table1layout 4llows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it. Mow we will see how to use these properties with examples. !he border1collapse 'roperty6 !his property can have two values collapse and separate. ;ollowing is the example to show both values6

16 7style typeDKtextFcssK8 table.one Aborder1collapse6collapseBC table.two Aborder1collapse6separateBC td.a A border1style6dottedB border1width6+pxB border1color6<??????B padding6 (?pxB C td.b Aborder1style6solidB border1width6+pxB border1color6<++++++B padding6(?pxB C 7Fstyle8 7table classDKoneK8 7caption8Collapse %order >xample7Fcaption8 7tr87td classDKaK8 Cell 4 Collapse >xample7Ftd87Ftr8 7tr87td classDKbK8 Cell % Collapse >xample7Ftd87Ftr8 7Ftable8 7br F8 7table classDKtwoK8 7caption8Separate %order >xample7Fcaption8 7tr87td classDKaK8 Cell 4 Separate >xample7Ftd87Ftr8

17 7tr87td classDKbK8 Cell % Separate >xample7Ftd87Ftr8 7Ftable8

!his will produce following result6 Collapse %order >xample Cell 4 Collapse >xample Cell % Collapse >xample

Separate %order >xample Cell 4 Separate >xample Cell % Separate >xample

!o %ecome more comfortable 1 ,o Gnline 'ractice !he border1spacing 'roperty6 !he border1spacing property specifies the distance that separates adEacent cells. borders. It can take either one or two valuesB these should be units of length.

18 If you provide one value it will applies to both vertical and horizontal borders Gr you can specify two values, in which case the first refers to the horizontal spacing and the second to the vertical spacing6 MG!>6 Unfortunately, this property does not work in Metscape R or I> .. 7style typeDKtextFcssK8 FO If you provide one value OF table.example Aborder1spacing6(?pxBC FO !his is how you can provide two values OF table.example Aborder1spacing6(?pxB (JpxBC 7Fstyle8

Mow letIs modify previous example and see the effect6 7style typeDKtextFcssK8 table.one A border1collapse6separateB width6H??pxB border1spacing6(?pxB C table.two A border1collapse6separateB width6H??pxB border1spacing6(?px J?pxB C 7Fstyle8 7table classDKoneK borderDK(K8

19 7caption8Separate %order >xample with border1spacing7Fcaption8 7tr87td8 Cell 4 Collapse >xample7Ftd87Ftr8 7tr87td8 Cell % Collapse >xample7Ftd87Ftr8 7Ftable8 7br F8 7table classDKtwoK borderDK(K8 7caption8Separate %order >xample with border1spacing7Fcaption8 7tr87td8 Cell 4 Separate >xample7Ftd87Ftr8 7tr87td8 Cell % Separate >xample7Ftd87Ftr8 7Ftable8

!his will produce following result6 Separate %order >xample with border1spacing Cell 4 Collapse >xample Cell % Collapse >xample

Separate %order >xample with border1spacing Cell 4 Separate >xample Cell % Separate >xample

20 !o %ecome more comfortable 1 ,o Gnline 'ractice !he caption1side 'roperty6 !he caption1side property allows you to specify where the content of a 7caption8 element should be placed in relationship to the table. !he table that follows lists the possible values. !his property can have one of the four values top, bottom, left or right. #et us see following example to show each value6 MG!>6!hese properties may not work with your I> %rowser. 7style typeDKtextFcssK8 caption.top Acaption1side6topC caption.bottom Acaption1side6bottomC caption.left Acaption1side6leftC caption.right Acaption1side6rightC 7Fstyle8

7table styleDKwidth6H??pxB border6(px solid blackBK8 7caption classDKtopK8 !his caption will appear at the top 7Fcaption8 7tr87td 8 Cell 47Ftd87Ftr8 7tr87td 8 Cell %7Ftd87Ftr8 7Ftable8 7br F8

7table styleDKwidth6H??pxB border6(px solid blackBK8 7caption classDKbottomK8

21 !his caption will appear at the bottom 7Fcaption8 7tr87td 8 Cell 47Ftd87Ftr8 7tr87td 8 Cell %7Ftd87Ftr8 7Ftable8 7br F8

7table styleDKwidth6H??pxB border6(px solid blackBK8 7caption classDKleftK8 !his caption will appear at the left 7Fcaption8 7tr87td 8 Cell 47Ftd87Ftr8 7tr87td 8 Cell %7Ftd87Ftr8 7Ftable8 7br F8

7table styleDKwidth6H??pxB border6(px solid blackBK8 7caption classDKrightK8 !his caption will appear at the right 7Fcaption8 7tr87td 8 Cell 47Ftd87Ftr8 7tr87td 8 Cell %7Ftd87Ftr8 7Ftable8

22

!his will produce following result6

23 !his caption will appear at the top Cell 4 Cell %

!his caption will appear at the bottom Cell 4 Cell %

!his caption will appear at the left Cell 4 Cell %

!his caption will appear at the right Cell 4 Cell %

!o %ecome more comfortable 1 ,o Gnline 'ractice !he empty1cells 'roperty6 !he empty1cells property indicates whether a cell without any content should have a border

24 displayed. !his property can have one of the three values show, hide or inherit. ere is the empty1cells property used to hide borders of empty cells in the 7table8 element. 7style typeDKtextFcssK8 table.emptyA width6+J?pxB border1collapse6separateB empty1cells6hideB C td.emptyA padding6JpxB border1style6solidB border1width6(pxB border1color6<------B C 7Fstyle8

25 7table classDKemptyK8 7tr8 7th87Fth8 7th8!itle one7Fth8 7th8!itle two7Fth8 7Ftr8 7tr8 7th8=ow !itle7Fth8 7td classDKemptyK8value7Ftd8 7td classDKemptyK8value7Ftd8 7Ftr8 7tr8 7th8=ow !itle7Fth8 7td classDKemptyK8value7Ftd8 7td classDKemptyK87Ftd8 7Ftr8 7Ftable8

!his will produce following result6

!itle one !itle two =ow !itle value

26 value =ow !itle value

!o %ecome more comfortable 1 ,o Gnline 'ractice !he table1layout 'roperty6 !he table1layout property is supposed to help you control how a browser should render or lay out a table. !his property can have one of the three values fixed, auto or inherit. ere is the example to show the difference between these properties. MG!>6!his property is not supported by many browsers so do not rely on this property. 7style typeDKtextFcssK8 table.auto A table1layout6 auto C table.fixed A table1layout6 fixed C 7Fstyle8

27 7table classDKautoK borderDK(K widthDK(??SK8 7tr8 7td widthDK/?SK8(???????????????????????????7Ftd8 7td widthDKH?SK8(???????7Ftd8 7td widthDKH?SK8(??7Ftd8

28 7Ftr8 7Ftable8 7br F8 7table classDKfixedK borderDK(K widthDK(??SK8 7tr8 7td widthDK/?SK8(???????????????????????????7Ftd8 7td widthDKH?SK8(???????7Ftd8 7td widthDKH?SK8(??7Ftd8 7Ftr8 7Ftable8

!his will produce following result6 (??????????????????????????? (??????? (??

(??????????????????????????? (??????? (??

!o %ecome more comfortable 1 ,o Gnline 'ractice

29

CSS 1 #ists #ists are very helpful in conveying a set of either numbered or bulleted points. !his tutorial teaches you how to control list type, position, style etc. using CSS !here are following five CSS properties which can be used to control lists6 . !he list1style1type 4llows you to control the shape or appearance of the marker. . !he list1style1position Specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker. . !he list1style1image Specifies an image for the marker rather than a bullet point or number. . !he list1style Serves as shorthand for the preceding properties. . !he marker1offset Specifies the distance between a marker and the text in the list. Mow we will see how to use these properties with examples.

30 !he list1style1type 'roperty6 !he list1style1type property allows you to control the shape or style of bullet point )also known as a marker* in the case of unordered lists, and the style of numbering characters in ordered lists. ere are the values which can be used for an unordered list6 :alue ,escription none M4 disc )default* 4 filled1in circle circle 4n empty circle s@uare 4 filled1in s@uare

ere are the values which can be used for an ordered list6 :alue ,escription >xample decimal Mumber (,/,+,H,J decimal1leading1zero ? before the number

31 ?(, ?/, ?+, ?H, ?J lower1alpha #owercase alphanumeric characters a, b, c, d, e upper1alpha Uppercase alphanumeric characters 4, %, C, ,, > lower1roman #owercase =oman numerals i, ii, iii, iv, v upper1roman Uppercase =oman numerals I, II, III, I:, : lower1greek !he marker is lower1greek alpha, beta, gamma lower1latin !he marker is lower1latin a, b, c, d, e upper1latin !he marker is upper1latin 4, %, C, ,, > hebrew !he marker is traditional ebrew numbering

32

armenian !he marker is traditional 4rmenian numbering

33 georgian !he marker is traditional Teorgian numbering

cEk1ideographic !he marker is plain ideographic numbers

hiragana !he marker is hiragana a, i, u, e, o, ka, ki katakana !he marker is katakana 4, I, U, >, G, U4, UI hiragana1iroha !he marker is hiragana1iroha i, ro, ha, ni, ho, he, to katakana1iroha !he marker is katakana1iroha I, =G, 4, MI, G, >, !G

ere is the example6

7ul styleDKlist1style1type6circleBK8 7li8"aths7Fli8 7li8Social Science7Fli8

34 7li8'hysics7Fli8 7Ful8

7ul styleDKlist1style1type6s@uareBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Ful8

7ol styleDKlist1style1type6decimalBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Fol8

7ol styleDKlist1style1type6lower1alphaBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Fol8

7ol styleDKlist1style1type6lower1romanBK8 7li8"aths7Fli8 7li8Social Science7Fli8

35 7li8'hysics7Fli8 7Fol8

!his will produce following result6 o "aths o Social Science o 'hysics . "aths . Social Science

36 . 'hysics (. "aths /. Social Science +. 'hysics a. "aths b. Social Science c. 'hysics i. "aths ii. Social Science iii. 'hysics

!o %ecome more comfortable 1 ,o Gnline 'ractice !he list1style1position 'roperty6 !he list1style1position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one the two values6 :alue ,escription none M4 inside If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside. outside If the text goes onto a second line, the text will be aligned with the start of the first line )to the right of the bullet*.

ere is the example6

7ul styleDKlist1style1type6circleB list1stlye1position6outsideBK8

37 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Ful8

7ul styleDKlist1style1type6s@uareBlist1style1position6insideBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Ful8

7ol styleDKlist1style1type6decimalBlist1stlye1position6outsideBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Fol8

38

7ol styleDKlist1style1type6lower1alphaBlist1style1position6insideBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Fol8

!his will produce following result6 o "aths o Social Science o 'hysics . "aths . Social Science . 'hysics (. "aths /. Social Science +. 'hysics a. "aths b. Social Science c. 'hysics

!o %ecome more comfortable 1 ,o Gnline 'ractice !he list1style1image 'roperty6 !he list1style1image allows you to specify an image so that you can use your own bullet style. !he syntax is as follows, similar to the background1image property with the letters url starting the value of the property followed by the U=# in brackets. If it does not find given image then default bullets are used. ere is the example6

39 7ul8 7li styleDKlist1style1image6 url)FimagesFbullet.gif*BK8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Ful8

7ol8 7li styleDKlist1style1image6 url)FimagesFbullet.gif*BK8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Fol8

!his will produce following result6 . "aths

40 . Social Science . 'hysics (. "aths /. Social Science +. 'hysics

!o %ecome more comfortable 1 ,o Gnline 'ractice !he list1style 'roperty6 !he list1style allows you to specify all the list properties into a single expression. !hese properties can appear in any order. ere is the example6

7ul styleDKlist1style6 inside s@uareBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Ful8

7ol styleDKlist1style6 outside upper1alphaBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Fol8

!his will produce following result6

41 . "aths . Social Science . 'hysics 4. "aths %. Social Science C. 'hysics

!o %ecome more comfortable 1 ,o Gnline 'ractice !he marker1offset 'roperty6 !he marker1offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example6 Unfortunately, however, this property is not supported in I> . or Metscape R. ere is the example6

42

7ul styleDKlist1style6 inside s@uareB marker1offset6/emBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Ful8

7ol styleDKlist1style6 outside upper1alphaB marker1offset6/cmBK8 7li8"aths7Fli8 7li8Social Science7Fli8 7li8'hysics7Fli8 7Fol8

!his will produce following result6 . "aths . Social Science . 'hysics 4. "aths %. Social Science C. 'hysics

!o %ecome more comfortable 1 ,o Gnline 'ractice CSS Q 'addings !he padding property allows you to specify how much space should appear between the content of an element and its border6

43 !here are following five CSS properties which can be used to control lists6 !he value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box. 2ou can also set different values for the padding on each side of the box using the following properties6 . !he padding1bottom Specifies the bottom padding of an element. . !he padding1top Specifies the top padding of an element. . !he padding1left Specifies the left padding of an element. . !he padding1right Specifies the right padding of an element. . !he padding Serves as shorthand for the preceding properties. Mow we will see how to use these properties with examples. !he padding1bottom 'roperty6 !he padding1bottom property sets the bottom padding )space* of an element. !his can take a value in terms of length of S. ere is the example6

44

7p styleDKpadding1bottom6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified bottom padding 7Fp8

7p styleDKpadding1bottom6 JSB border6(px solid blackBK8 !his is another paragraph with a specified bottom padding in percent 7Fp8

!his will produce following result6 !his is a paragraph with a specified bottom padding !his is another paragraph with a specified bottom padding in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice !he padding1top 'roperty6 !he padding1top property sets the top padding )space* of an element. !his can take a value in terms of length of S. ere is the example6

7p styleDKpadding1top6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified top padding 7Fp8

45 7p styleDKpadding1top6 JSB border6(px solid blackBK8 !his is another paragraph with a specified top padding in percent 7Fp8

!his will produce following result6 !his is a paragraph with a specified top padding !his is another paragraph with a specified top padding in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice !he padding1left 'roperty6 !he padding1left property sets the left padding )space* of an element. !his can take a value in terms of length of S. ere is the example6

46

7p styleDKpadding1left6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified left padding 7Fp8

7p styleDKpadding1left6 (JSB border6(px solid blackBK8 !his is another paragraph with a specified left padding in percent 7Fp8

!his will produce following result6 !his is a paragraph with a specified left padding !his is another paragraph with a specified left padding in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice !he padding1right 'roperty6 !he padding1right property sets the right padding )space* of an element. !his can take a value in terms of length of S. ere is the example6

7p styleDKpadding1right6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified right padding 7Fp8

47 7p styleDKpadding1right6 JSB border6(px solid blackBK8 !his is another paragraph with a specified right padding in percent 7Fp8

!his will produce following result6 !his is a paragraph with a specified right padding !his is another paragraph with a specified right padding in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice !he padding 'roperty6 !he padding property sets the left, right, top and bottom padding )space* of an element. !his can take a value in terms of length of S. ere is the example6 7p styleDKpadding6 (JpxB border6(px solid blackBK8 all four padding will be (Jpx

48 7Fp8 7p styleDKpadding6(?px /SB border6(px solid blackBK8 top and bottom padding will be (?px, left and right padding will be /S of the total width of the document. 7Fp8 7p styleDKpadding6 (?px /S (?pxB border6(px solid blackBK8 top padding will be (?px, left and right padding will be /S of the total width of the document, bottom padding will be (?px 7Fp8 7p styleDKpadding6 (?px /S (?px (?pxB border6(px solid blackBK8 top padding will be (?px, right padding will be /S of the total width of the document, bottom padding and top padding will be (?px 7Fp8

!his will produce following result6 all four paddings will be (Jpx top and bottom paddings will be (?px, left and right paddings will be /S of the total width of the document. top padding will be (?px, left and right padding will be /S of the total width of the document, bottom padding will be (?px top padding will be (?px, right padding will be /S of the total width of the document, bottom padding and top padding will be (?px

!o %ecome more comfortable 1 ,o Gnline 'ractice CSS Q Cursors !he cursor property of CSS allows you to specify the type of cursor that should be displayed to the user. Gne good usage of this property is in using images for submit buttons on forms. %y default, when a cursor hovers over a link, the cursor changed from a pointer to a hand. ;or a submit button on a form this does not happen. !herefore, using the cursor property to change the cursor to a hand whenever someone hovers over an image that is a submit button. !his provides a visual clue that they can click it. !he table that follows shows possible values for the cursor property6 :alue ,escription

49 auto Shape of the cursor depends on the context area it is over. ;or example an I over text, a hand over a link, and so on...

50 crosshair 4 crosshair or plus sign default 4n arrow pointer 4 pointing hand )in I> H this value is hand* move !he I bar e1resize !he cursor indicates that an edge of a box is to be moved right )east* ne1resize !he cursor indicates that an edge of a box is to be moved up and right )northFeast* nw1 resize !he cursor indicates that an edge of a box is to be moved up and left )northFwest* n1resize !he cursor indicates that an edge of a box is to be moved up )north* se1resize !he cursor indicates that an edge of a box is to be moved down and right )southFeast* sw1resize !he cursor indicates that an edge of a box is to be moved down and left )southFwest* s1resize !he cursor indicates that an edge of a box is to be moved down )south* w1resize

51 !he cursor indicates that an edge of a box is to be moved left )west* text !he I bar wait 4n hour glass help 4 @uestion mark or balloon, ideal for use over help buttons 7url8 !he source of a cursor image file

MG!>6 2ou should try to use only these values to add helpful information for users, and in places they would expect to see that cursor. ;or example, using the crosshair when someone hovers over a link can confuse visitors. ere is the example6 7p8"ove the mouse over the words to see the cursor change67Fp8 7div styleDKcursor6autoK84uto7Fdiv8 7div styleDKcursor6crosshairK8Crosshair7Fdiv8 7div styleDKcursor6defaultK8,efault7Fdiv8 7div styleDKcursor6pointerK8'ointer7Fdiv8 7div styleDKcursor6moveK8"ove7Fdiv8 7div styleDKcursor6e1resizeK8e1resize7Fdiv8

52 7div styleDKcursor6ne1resizeK8ne1resize7Fdiv8 7div styleDKcursor6nw1resizeK8nw1resize7Fdiv8 7div styleDKcursor6n1resizeK8n1resize7Fdiv8 7div styleDKcursor6se1resizeK8se1resize7Fdiv8 7div styleDKcursor6sw1resizeK8sw1resize7Fdiv8 7div styleDKcursor6s1resizeK8s1resize7Fdiv8 7div styleDKcursor6w1resizeK8w1resize7Fdiv8 7div styleDKcursor6textK8text7Fdiv8 7div styleDKcursor6waitK8wait7Fdiv8 7div styleDKcursor6helpK8help7Fdiv8

!his will produce following result6 "ove the mouse over the words to see the cursor change6 4uto Crosshair ,efault 'ointer "ove e1resize ne1resize nw1resize n1resize se1resize sw1resize

53 s1resize w1resize text wait help Setting %ackgrounds using CSS !his tutorial will teach you how to set backgrounds of various !"# elements. 2ou can set following background properties of an element6 . !he background1color property is used to set the background color of an element.

54 . !he background1image property is used to set the background image of an element. . !he background1repeat property is used to control the repetition of an image in the background. . !he background1position property is used to control the position of an image in the background. . !he background1attachment property is used to control the scrolling of an image in the background. . !he background property is used as shorthand to specify a number of other background properties. Set the background color6 ;ollowing is the example which demonstrates how to set the background color for an element. 7p styleDKbackground1color6yellowBK8 !his text has a yellow background color. 7Fp8

!his will produce following result6 !his text has a yellow background color.

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the background image6 ;ollowing is the example which demonstrates how to set the background image for an element. 7table styleDKbackground1image6url)FimagesFpattern(.gif*BK8 7tr87td8 !his table has background image set. 7Ftd87Ftr8 7Ftable8

55 !o %ecome more comfortable 1 ,o Gnline 'ractice =epeat the background image6 ;ollowing is the example which demonstrates how to repeat the background image if image is small. 2ou can use no1repeat value for background1repeat property if you donIt want to repeat an image, in this case image will display only once. %y default background1repeat property will have repeat value. 7table styleDKbackground1image6url)FimagesFpattern(.gif*B background1repeat6 repeatBK8 7tr87td8 !his table has background image which repeats multiple times. 7Ftd87Ftr8 7Ftable8

!o %ecome more comfortable 1 ,o Gnline 'ractice

56 ;ollowing is the example which demonstrates how to repeat the background image vertically. 7table styleDKbackground1image6url)FimagesFpattern(.gif*B background1repeat6 repeat1yBK8 7tr87td8 !his table has background image set which will repeat vertically. 7Ftd87Ftr8 7Ftable8

!o %ecome more comfortable 1 ,o Gnline 'ractice ;ollowing is the example which demonstrates how to repeat the background image horizontally. 7table styleDKbackground1image6url)FimagesFpattern(.gif*B background1repeat6 repeat1xBK8 7tr87td8 !his table has background image set which will repeat horizontally. 7Ftd87Ftr8 7Ftable8

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the background image position6 ;ollowing is the example which demonstrates how to set the background image position (?? pixels away from the left side. 7table styleDKbackground1image6url)FimagesFpattern(.gif*B background1position6(??pxBK8 7tr87td8

57 %ackground image positioned (?? pixels away from the left. 7Ftd87Ftr8 7Ftable8

;ollowing is the example which demonstrates how to set the background image position (?? pixels away from the left side and /?? pixels down from the top. 7table styleDKbackground1image6url)FimagesFpattern(.gif*B background1position6(??px /??pxBK8 7tr87td8 !his table has background image positioned (?? pixels away from the left and /?? pixels from the top. 7Ftd87Ftr8 7Ftable8

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the background attachment6 %ackground attachment determines whether a background image is fixed or scrolls with the rest of the page. ;ollowing is the example which demonstrates how to set the fixed background image.

58 7p styleDKbackground1image6url)FimagesFpattern(.gif*B background1attachment6fixedBK8 !his parapgraph has fixed background image. 7Fp8

;ollowing is the example which demonstrates how to set the scrolling background image. 7p styleDKbackground1image6url)FimagesFpattern(.gif*B background1attachment6scrollBK8 !his parapgraph has scrolling background image. 7Fp8

!o %ecome more comfortable 1 ,o Gnline 'ractice Shorthand property 6 2ou can use the background property to set all the background properties at once. ;or example6 7p styleDKbackground6url)FimagesFpattern(.gif* repeat fixedBK8 !his parapgraph has fixed repeated background image. 7Fp8

Setting ;onts using CSS !his tutorial will teach you how to set fonts of a content available in an set following font properties of an element6 !"# element. 2ou can

. !he font1family property is used to change the face of a font. . !he font1style property is used to make a font italic or obli@ue. . !he font1variant property is used to create a small1caps effect. . !he font1weight property is used to increase or decrease how bold or light a font appears.

59 . !he font1size property is used to increase or decrease the size of a font. . !he font property is used as shorthand to specify a number of other font properties. Set the font family6 ;ollowing is the example which demonstrates how to set the font family of an element. 'ossible value could be any font family name. 7p styleDKfont1family6georgia,garamond,serifBK8 !his text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. 7Fp8

!his will produce following result6 !his text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

60 !o %ecome more comfortable 1 ,o Gnline 'ractice Set the font style6 ;ollowing is the example which demonstrates how to set the font style of an element. 'ossible values are normal, italic and obli@ue. 7p styleDKfont1style6italicBK8 !his text will be rendered in italic style 7Fp8

!his will produce following result6 !his text will be rendered in italic style

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the font variant6 ;ollowing is the example which demonstrates how to set the font variant of an element. 'ossible values are normal and small1caps. 7p styleDKfont1variant6small1capsBK8 !his text will be rendered as small caps 7Fp8

!his will produce following result6 ! IS !>$! &I## %> =>M>,>=>, 4S S"4## C4'S

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the font weight6 ;ollowing is the example which demonstrates how to set the font weight of an element. !he

61 font1weight property provides the functionality to specify how bold a font is. 'ossible values could be normal, bold, bolder, lighter, (??, /??, +??, H??, J??, .??, R??, 0??, -??. 7p styleDKfont1weight6boldBK8 !his font is bold. 7Fp8 7p styleDKfont1weight6bolderBK8 !his font is bolder. 7Fp8 7p styleDKfont1weight6-??BK8 !his font is -?? weight. 7Fp8

!his will produce following result6

62 !his font is bold. !his font is bolder. !his font is -?? weight.

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the font size6 ;ollowing is the example which demonstrates how to set the font size of an element. !he font1 size property is used to control the size of fonts. 'ossible values could be xx1small, x1small, small, medium, large, x1large, xx1large, smaller, larger, size in pixels or in S 7p styleDKfont1size6/?pxBK8 !his font size is /? pixels 7Fp8 7p styleDKfont1size6smallBK8 !his font size is small 7Fp8 7p styleDKfont1size6largeBK8 !his font size is large 7Fp8

!his will produce following result6 !his font size is /? pixels !his font size is small !his font size is large

!o %ecome more comfortable 1 ,o Gnline 'ractice

63 Set the font size adEust6 ;ollowing is the example which demonstrates how to set the font size adEust of an element. !his property enables you to adEust the x1height to make fonts more legible. 'ossible value could be any number. 7p styleDKfont1size1adEust6?..(BK8 !his text is using a font1size1adEust value. 7Fp8

!his will produce following result6 !his text is using a font1size1adEust value.

!o %ecome more comfortable 1 ,o Gnline 'ractice

64 Set the font stretch6 ;ollowing is the example which demonstrates how to set the font stretch of an element. !his property relies on the userIs computer to have an expanded or condensed version of the font being used. 'ossible values could be normal, wider, narrower, ultra1condensed, extra1condensed, condensed, semi1condensed, semi1expanded, expanded, extra1expanded, ultra1expanded. 7p styleDKfont1stretch6ultra1expandedBK8 If this doesnIt appear to work, it is likely that your computer doesnIt have a condensed or expanded version of the font being used. 7Fp8

!his will produce following result6 If this doesnIt appear to work, it is likely that your computer doesnIt have a condensed or expanded version of the font being used.

!o %ecome more comfortable 1 ,o Gnline 'ractice Shorthand property 6 2ou can use the font property to set all the font properties at once. ;or example6 7p styleDKfont6italic small1caps bold (Jpx georgiaBK8 4pplying all the properties on the text at once. 7Fp8

!his will produce following result6 4''#2IMT 4## ! > '=G'>=!I>S GM ! > !>$! 4! GMC>.

65 !o %ecome more comfortable 1 ,o Gnline 'ractice "anipulating !ext using CSS !his tutorial will teach you how to manipulate text using CSS properties. 2ou can set following text properties of an element6 . !he color property is used to set the color of a text. . !he direction property is used to set the text direction. . !he letter1spacing property is used to add or subtract space between the letters that make up a word. . !he word1spacing property is used to add or subtract space between the words of a sentence. . !he text1indent property is used to indent the text of a paragraph. . !he text1align property is used to align the text of a document. . !he text1decoration property is used to underline, overline, and strikethrough text. . !he text1transform property is used to capitalize text or convert text to uppercase or lowercase letters.

66 . !he white1space property is used to control the flow and formatting of text. . !he text1shadow property is used to set the text shadow around a text. Set the text color6 ;ollowing is the example which demonstrates how to set the text color. 'ossible value could be any color name in any valid format. 7p styleDKcolor6redBK8 !his text will be written in red. 7Fp8

!his will produce following result6 !his text will be written in red.

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the text direction 6 ;ollowing is the example which demonstrates how to set the direction of a text. 'ossible values are ltr or rtl. 7p styleDKdirection6rtlBK8 !his text will be renedered from right to left 7Fp8

!his will produce following result6 !his text will be renedered from right to left

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the space between characters6

67 ;ollowing is the example which demonstrates how to set the space between characters. 'ossible values are normal or a number specifying space.. 7p styleDKletter1spacing6JpxBK8 !his text is having space between letters. 7Fp8

!his will produce following result6 !his text is having space between letters.

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the space between words6

68 ;ollowing is the example which demonstrates how to set the space between words. 'ossible values are normal or a number specifying space.. 7p styleDKword1spacing6JpxBK8 !his text is having space between words. 7Fp8

!his will produce following result6 !his text is having space between words.

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the text indent6 ;ollowing is the example which demonstrates how to indent the first line of a paragraph. 'ossible values are S or a number specifying indent space.. 7p styleDKtext1indent6(cmBK8 !his text will have first line indented by (cm and this line will remain at its actual position this is done by CSS text1indent property. 7Fp8

!his will produce following result6 !his text will have first line indented by (cm and this line will remain at its actual position this is done by CSS text1indent property.

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the text alignment6

69 ;ollowing is the example which demonstrates how to align a text. 'ossible values are left, right, center, Eustify.. 7p styleDKtext1align6rightBK8 !his will be right aligned. 7Fp8 7p styleDKtext1align6centerBK8 !his will be center aligned. 7Fp8 7p styleDKtext1align6leftBK8 !his will be left aligned. 7Fp8

!his will produce following result6 !his will be right aligned.

70 !his will be center aligned. !his will be left aligned.

!o %ecome more comfortable 1 ,o Gnline 'ractice ,ecorating the text6 ;ollowing is the example which demonstrates how to decorate a text. 'ossible values are none, underline, overline, line1through, blink.. 7p styleDKtext1decoration6underlineBK8 !his will be underlined 7Fp8 7p styleDKtext1decoration6line1throughBK8 !his will be striked through. 7Fp8 7p styleDKtext1decoration6overlineBK8 !his will have a over line. 7Fp8 7p styleDKtext1decoration6blinkBK8 !his text will have blinking effect 7Fp8

!his will produce following result6 !his will be underlined !his will be striked through. !his will have a over line.

71 !his text will have blinking effect

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the text cases6 ;ollowing is the example which demonstrates how to set the cases for a text. 'ossible values are none, capitalize, uppercase, lowercase.. 7p styleDKtext1transform6capitalizeBK8 !his will be capitalized 7Fp8 7p styleDKtext1transform6uppercaseBK8 !his will be in uppercase 7Fp8 7p styleDKtext1transform6lowercaseBK8 !his will be in lowercase 7Fp8

!his will produce following result6

72 !his will be capitalized ! IS &I## %> IM U''>=C4S> !his will be in lowercase

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the white space between text6 ;ollowing is the example which demonstrates how white space inside an element is handled. 'ossible values are normal, pre, nowrap. 7p styleDKwhite1space6preBK8!his text has a line break and the white1space pre setting tells the browser to honor it Eust like the !"# pre tag.7Fp8

!his will produce following result6 !his text has a line break and the white1space pre setting tells the browser to honor it Eust like the !"# pre tag.

!o %ecome more comfortable 1 ,o Gnline 'ractice Set the text shadow6 ;ollowing is the example which demonstrates how to set the shadow around a text. !his may not be supported by all the browsers. 7p styleDKtext1shadow6Hpx Hpx 0px blueBK8 If your browser supports the CSS text1shadow property, this text will have a blue shadow.7Fp8

73 !his will produce following result6 If your browser supports the CSS text1shadow property, this text will have a blue shadow.

!o %ecome more comfortable 1 ,o Gnline 'ractice CSS Q Images Images are very important part of any &eb 'age. !hough it is not recommended to include lot of images but it is still important to use good images wherever it is re@uired. CSS plays a good role to control image display. 2ou can set following image properties using CSS. . !he border property is used to set the width of an image border.

74 CSS #ogo http6FFwww.tutorialspoint.comFimagesFcss.gif . !he height property is used to set the height of an image. . !he width property is used to set the width of an image. . !he 1moz1opacity property is used to set the opacity of an image. !he image border 'roperty6 !he border property of an image is used to set the width of an image border. !his property can have a value in length or in S. 4 width of zero pixels means no border. ere is the example6 7img styleDKborder6?pxBK srcDKFimagesFcss.gifK F8 7br F8 7img styleDKborder6+px dashed redBK srcDKFimagesFcss.gifK F8

!his will produce following result6

!o %ecome more comfortable 1 ,o Gnline 'ractice !he image height 'roperty6 !he height property of an image is used to set the height of an image. !his property can have a value in length or in S. &hile giving value in S, it applies it in respect of the box in which an image is available. ere is the example6 7img styleDKborder6(px solid redB height6(??pxBK srcDKFimagesFcss.gifK F8 7br F8

75 7img styleDKborder6(px solid redB height6J?SBK

76 http6FFwww.tutorialspoint.comFimagesFcss.gif http6FFwww.tutorialspoint.comFimagesFcss.gif http6FFwww.tutorialspoint.comFimagesFcss.gif srcDKFimagesFcss.gifK F8

!his will produce following result6

!o %ecome more comfortable 1 ,o Gnline 'ractice !he image width 'roperty6 !he width property of an image is used to set the width of an image. !his property can have a value in length or in S. &hile giving value in S, it applies it in respect of the box in which an image is available. ere is the example6 7img styleDKborder6(px solid redB width6(??pxBK srcDKFimagesFcss.gifK F8 7br F8 7img styleDKborder6(px solid redB width6(??SBK srcDKFimagesFcss.gifK F8

!his will produce following result6

77 http6FFwww.tutorialspoint.comFimagesFcss.gif http6FFwww.tutorialspoint.comFimagesFcss.gif

!o %ecome more comfortable 1 ,o Gnline 'ractice !he 1moz1opacity 'roperty6 !he 1moz1opacity property of an image is used to set the opacity of an image. !his property is used to create a transparent image in "ozilla. I> uses filter6alpha)opacityDx* to create transparent images. In "ozilla )1moz1opacity6x* x can be a value from ?.? 1 (.?. 4 lower value makes the element more transparent )!he same things goes for the CSS+1valid syntax opacity6x*. In I> )filter6alpha)opacityDx** x can be a value from ? 1 (??. 4 lower value makes the element more transparent. ere is the example6 7img styleDKborder6(px solid redB1moz1opacity6?.HBfilter6alpha)opacityDH?*BK srcDKFimagesFcss.gifK F8

!his will produce following result6

!o %ecome more comfortable 1 ,o Gnline 'ractice CSS Q %orders !he border properties allow you to specify how the border of the box representing an element should look. !here are three properties of a border you can change . !he border1color Specifies the color of a border. . !he border1style Specifies whether a border should be solid, dashed line, double line, or one of the other possible values. . !he border1width Specifies the width of a border. Mow we will see how to use these properties with examples.

78 !he border1color 'roperty6 !he border1color property allows you to change the color of the border surrounding an element. 2ou can individually change the color of the bottom, left, top and right sides of an elementIs border using the properties6 . border1bottom1color changes the color of bottom border. . border1top1color changes the color of top border. . border1left1color changes the color of left border. . border1right1color changes the color of right border. ere is the example which shows effect of all these properties6 7style typeDKtextFcssK8 p.example(A border6(px solidB border1bottom1color6<??--??B FO Treen OF border1top1color6<;;????B FO =ed OF border1left1color6<++????B FO %lack OF border1right1color6<????CCB FO %lue OF

79 C p.example/A border6(px solidB border1color6<??--??B FO Treen OF C 7Fstyle8 7p classDKexample(K8 !his example is showing all borders in different colors. 7Fp8 7p classDKexample/K8 !his example is showing all borders in green color only. 7Fp8

!his will produce following result6 !his example is showing all borders in different colors. !his example is showing all borders in green color only.

!o %ecome more comfortable 1 ,o Gnline 'ractice !he border1style 'roperty6 !he border1style property allows you to select one of the following styles of border6 . none6 Mo border. )>@uivalent of border1width6?B* . solid6 %order is a single solid line. . dotted6 %order is a series of dots. . dashed6 %order is a series of short lines. . double6 %order is two solid lines. . groove6 %order looks as though it is carved into the page. . ridge6 %order looks the opposite of groove.

80 . inset6 %order makes the box look like it is embedded in the page. . outset6 %order makes the box look like it is coming out of the canvas. . hidden6 Same as none, except in terms of border1conflict resolution for table elements. 2ou can individually change the style of the bottom, left, top, and right borders of an element using following properties6 . border1bottom1style changes the style of bottom border. . border1top1style changes the style of top border. . border1left1style changes the style of left border. . border1right1style changes the style of right border. ;ollowing is the example to show all these border styles6 7p styleDKborder1width6HpxB border1style6noneBK8 !his is a border with none width. 7Fp8 7p styleDKborder1width6HpxB border1style6solidBK8 !his is a solid border. 7Fp8 7p styleDKborder1width6HpxB border1style6dashedBK8 !his is a dahsed border. 7Fp8

81 7p styleDKborder1width6HpxB border1style6doubleBK8 !his is a double border. 7Fp8 7p styleDKborder1width6HpxB border1style6grooveBK8 !his is a groove border. 7Fp8 7p styleDKborder1width6HpxB border1style6ridgeK8 !his is aridge border. 7Fp8 7p styleDKborder1width6HpxB border1style6insetBK8 !his is a inset border. 7Fp8 7p styleDKborder1width6HpxB border1style6outsetBK8 !his is a outset border. 7Fp8 7p styleDKborder1width6HpxB border1style6hiddenBK8 !his is a hidden border. 7Fp8 7p styleDKborder1width6HpxB border1top1style6solidB border1bottom1style6dashedB border1left1style6grooveB border1right1style6doubleBK8 !his is a a border with four different styles.

82 7Fp8

!his will produce following result6 !his is a border with none width. !his is a solid border. !his is a dahsed border. !his is a double border. !his is a groove border. !his is aridge border. !his is a inset border. !his is a outset border. !his is a hidden border. !his is a a border with four different styles.

!o %ecome more comfortable 1 ,o Gnline 'ractice !he border1width 'roperty6

83 !he border1width property allows you to set the width of an element borders. !he value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick. 2ou can individually change the width of the bottom, top, left, and right borders of an element using the following properties6 . border1bottom1width changes the width of bottom border. . border1top1width changes the width of top border. . border1left1width changes the width of left border. . border1right1width changes the width of right border. ;ollowing is the example to show all these border width6 7p styleDKborder1width6HpxB border1style6solidBK8 !his is a solid border whose width is Hpx. 7Fp8 7p styleDKborder1width6HptB border1style6solidBK8 !his is a solid border whose width is Hpt. 7Fp8 7p styleDKborder1width6thinB border1style6solidBK8 !his is a solid border whose width is thin. 7Fp8 7p styleDKborder1width6mediumB border1style6solidBK8 !his is a solid border whose width is mediumB 7Fp8 7p styleDKborder1width6thickB border1style6solidBK8 !his is a solid border whose width is thick. 7Fp8 7p styleDKborder1bottom1width6HpxB border1top1width6(?pxB

84 border1left1width6 /pxB border1right1width6(JpxB border1style6solidBK8 !his is a a border with four different width. 7Fp8

!his will produce following result6 !his is a solid border whose width is Hpx. !his is a solid border whose width is Hpt. !his is a solid border whose width is thin. !his is a solid border whose width is mediumB !his is a solid border whose width is thick. !his is a a border with four different width.

!o %ecome more comfortable 1 ,o Gnline 'ractice %order 'roperties Using Shorthand6

85 !he border property allows you to specify color, style, and width of lines in one property6 ;ollowing is the example to show to use all the three properties into a single property. !his is the most fre@uently used property to set border around any element. 7p styleDKborder6Hpx solid redBK8 !his example is showing shorthand property for border. 7Fp8

!his will produce following result6 !his example is showing shorthand property for border.

!o %ecome more comfortable 1 ,o Gnline 'ractice CSS Q "argins !he margin property defines the space around an values to overlap content. !"# element. It is possible to use negative

!he values of the margin property are not inherited by child elements. =emember that the adEacent vertical margins )top and bottom margins* will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are e@ual. !here are following four properties to set an element margin. . !he margin 4 shorthand property for setting the margin properties in one declaration. . !he margin1bottom Specifies the bottom margin of an element. . !he margin1top Specifies the top margin of an element. . !he margin1left Specifies the left margin of an element. . !he margin1right Specifies the right margin of an element. Mow we will see how to use these properties with examples. !he margin 'roperty6 !he margin property allows you set all of the properties for the four margins in one declaration. ere is the syntax to set margin around a paragraph6

86 7style typeDKtextFcssK8 p Amargin6 (JpxC all four margins will be (Jpx p Amargin6 (?px /SC top and bottom margin will be (?px, left and right margin will be /S of the total width of the document. p Amargin6 (?px /S 1(?pxC top margin will be (?px, left and right margin will be /S of the total width of the document, bottom margin will be 1(?px p Amargin6 (?px /S 1(?px autoC

87 top margin will be (?px, right margin will be /S of the total width of the document, bottom margin will be 1(?px, left margin will be set by the browser 7Fstyle8

ere is the example6 7p styleDKmargin6 (JpxB border6(px solid blackBK8 all four margins will be (Jpx 7Fp8 7p styleDKmargin6(?px /SB border6(px solid blackBK8 top and bottom margin will be (?px, left and right margin will be /S of the total width of the document. 7Fp8 7p styleDKmargin6 (?px /S 1(?pxB border6(px solid blackBK8 top margin will be (?px, left and right margin will be /S of the total width of the document, bottom margin will be 1(?px 7Fp8 7p styleDKmargin6 (?px /S 1(?px autoB border6(px solid blackBK8 top margin will be (?px, right margin will be /S of the total width of the document, bottom margin will be 1(?px, left margin will be set by the browser 7Fp8

!his will produce following result6 all four margins will be (?px top and bottom margin will be (?px, left and right margin will be /S of the total width of the document. top margin will be (?px, left and right margin will be /S of the total width of the document, bottom margin will be 1(?px top margin will be (?px, right margin will be /S of the total width of the document, bottom margin will be 1(?px, left margin will be set by the browser

!o %ecome more comfortable 1 ,o Gnline 'ractice !he margin1bottom 'roperty6 !he margin1bottom property allows you set bottom margin of an element. It can have a value in length, S or auto. ere is the example6

88 7p styleDKmargin1bottom6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified bottom margin 7Fp8 7p styleDKmargin1bottom6 JSB border6(px solid blackBK8

89 !his is another paragraph with a specified bottom margin in percent 7Fp8

!his will produce following result6 !his is a paragraph with a specified bottom margin !his is another paragraph with a specified bottom margin in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice !he margin1top 'roperty6 !he margin1top property allows you set top margin of an element. It can have a value in length, S or auto. ere is the example6 7p styleDKmargin1top6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified top margin 7Fp8 7p styleDKmargin1top6 JSB border6(px solid blackBK8 !his is another paragraph with a specified top margin in percent 7Fp8

!his will produce following result6 !his is a paragraph with a specified top margin !his is another paragraph with a specified top margin in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice !he margin1left 'roperty6 !he margin1left property allows you set left margin of an element. It can have a value in length, S or auto. ere is the example6

90 7p styleDKmargin1left6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified left margin 7Fp8 7p styleDKmargin1left6 JSB border6(px solid blackBK8 !his is another paragraph with a specified top margin in percent

91 7Fp8

!his will produce following result6 !his is a paragraph with a specified left margin !his is another paragraph with a specified top margin in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice !he margin1right 'roperty6 !he margin1right property allows you set right margin of an element. It can have a value in length, S or auto. ere is the example6 7p styleDKmargin1right6 (JpxB border6(px solid blackBK8 !his is a paragraph with a specified right margin 7Fp8 7p styleDKmargin1right6 JSB border6(px solid blackBK8 !his is another paragraph with a specified right margin in percent 7Fp8

!his will produce following result6 !his is a paragraph with a specified right margin !his is another paragraph with a specified right margin in percent

!o %ecome more comfortable 1 ,o Gnline 'ractice

!o %ecome more comfortable 1 ,o Gnline 'ractice ;or complete !utorial6 http6FFwww.tutorialspoint.comFcss

92

#ist of !utorials from !utorials'oint.com . #earn 3S' . #earn Servlets . #earn 4S'.Met . #earn !"#

93 . #earn logHE . #earn i%4!IS . #earn 3ava . #earn 3,%C . 3ava >xamples . #earn %est 'ractices . #earn 'ython . #earn =uby . #earn =uby on =ails . #earn SV# . #earn "ySV# . #earn 434$ . #earn C 'rogramming . #earn CPP 'rogramming . #earn CTI with '>=# . #earn ,## . #earn eb$"# . #earn >uphoria . #earn T,% ,ebugger . #earn "akefile . #earn 'arrot . #earn 'erl Script . #earn ' ' Script . #earn Six Sigma . #earn S>I C""I . #earn &i"4$ . #earn !elecom %illing . #earn !"#J . #earn $ !"# . #earn CSS . #earn !!' . #earn 3avaScript . #earn EVuery . #earn 'rototype . #earn script.aculo.us . &eb ,eveloperIs Tuide . #earn =4,IUS . #earn =SS . #earn S>G !echni@ues . #earn SG4' . #earn U,,I . #earn Unix Sockets . #earn &eb Services . #earn $"#1='C . #earn U"#

94 . #earn UMI$ . #earn &S,# . #earn i1"ode . #earn T'=S . #earn TS" . #earn &4' . #earn &"# . #earn &i1;i

webmasterN!utorials'oint.com

95