CSS | Cascading Style Sheets | Html Element

CSS stands for Cascading Style Sheets.

It is a style sheet language that acts as the presentation layer for markup languages such as HTML and XHTML.

SYNTEX OF CSS
The syntax of CSS declaration is as follows: selector selectorname { property:value; ... } There is no limit on the number of property:value pair that can be specified for a selector. the following property:value declaration: color : yellow; There are three main types of selectors: type selectors, class selectors, and ID selectors. Type selectors are existing (X)HTML tags such as <body> and <h1>. Class and ID selectors are user-defined selectors.

GROUPING

If multiple selectors share the same CSS properties, they can be declared together. This is called "grouping". For example, if <h1>, <h2>, and <h3> share the same style, they can be declared together as follows: h1 h2 h3 { property:value; ...
}

DESCENDANT SELECTORS
Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. First introduced in CSS1 in 1996, descendant selectors (then called contextual selectors) match elements that are descendants of other elements in the document tree. Composed of two or more selectors separated by whitespace, descendant selectors apply styles to elements that are contained within other elements.

. . } means that text in the <b> element inside the <li> element will be yellow.SYNTAX FOR DESCENDANT SELECTORS [Parent Selector] [Child Selector] { property:value... Text in the <b> elements not within the <li> element will not be affected by this stylesheet.

nav ul {font-size:1.1em.nav ul {font-size:1.EXAMPLE OF DESCENDANT SELECTOR div.1em.} <div class="nav"> <ul> <li>One</li> <li>Two</li> </ul> </div> .1em.nav {font-size:1.} The above selector is a pattern that matches all ul elements contained within divs with a class of . So this: .nav.} <div> <ul> <li class="nav">One</li> <li class="nav">Two</li> </ul> </div> Becomes this: div.

CSS STYLESHEET There are three ways to apply a CSS style sheet to an HTML document: · Inline · Internal · External Link .

INLINE STYLESHEET
Styles can be declared within the HTML document. For example, <p style='font-family:verdana; font-size:16;'>This is font size 16.</p> The above HTML code renders the following: This is font size 16.

INTERNAL STYLESHEET
Styles can be embedded within the HTML (usually within the <head> tag). For example:<head> <style type="text/css"> div { background-color:#FF0000; } </style> </head><body> <div> The background color is red </div> </body> The above HTML code renders the following: The background color is red

EXTERNAL STYLESHEET
CSS declarations are stored in a file external to the HTML document. That file typically has an extension of .css. Within the <header> .. </header> tags of the HTML document, you include the following declaration: <link rel=³stylesheet´ type="text/css³ href=³file.css"> This will apply the CSS declarations stored in 'externalstylesheet.css' into the HTML document.

CLASS SELECTOR
Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows: .[Class Name] { property:value; ... } For example, .navbar { color:#0000FF; } To apply this style to the HTML, using the following code: <p class="navbar">This is a sample using a Class selector.</p>

</p> would render. } .applylarge { font-size:20px.MULTIPLE CLASSES It is possible to include multiple classes at the same time. assuming we have the following CSS declaration. } the following HTML. .applyred { color:#FF0000. This is an example of multiple classes. <p class="applylarge applyred">This is an example of multiple classes. For example. .

The syntax for declaring an ID selector is as follows: #[ID Name] {property:value. } For example. . } To apply this style to the HTML. using the following code: <p id="footer">This is a sample using an ID selector. #footer { color:#FF00FF.ID SELECTOR ID is specified by including a sign (#) before the selector name.</p> The above HTML code renders: This is a sample using an ID selector.

you need to use a Class. . you should use the ID.WHAT IS THE DIFFERENCE BETWEEN A CLASS AND AN ID? A Class definition can be used several times throughout your document. while an ID can only be used once. to position a particular element. If you have a style that you want to apply several times throughout the document. However. it if only want to apply the style once (for instance.

redclassstyle {color:red} </style> <!--HTML part:--> <body> <p id="greenidstyle">first line of copy for id</p> <p class="redclassstyle">second line of copy for class</p> <p id="greenidstyle" class="redclassstyle">third line of copy for combined</p> </body> .EXAMPLE ID AND CLASS <!--CSS part:--> <style type="text/css"> #greenidstyle {color:green} .

font-family:arial. font-size: 4pt. </div> gets displayed as This is a DIV sample. as specified by the CSS. if we have the following CSS declaration: . . Each section can then have its own formatting.DIV Div divides the content into individual sections.large { color: #00FF00. meaning that there is a line feed after the </div> tag. For example. Div is a block-level container. } The HTML code <div class="large"> This is a DIV sample.

p {font-size:12mm.2in. p {font-size:3em. p {font-size:24pt.} Font Size 0. p {font-size:0.5cm.} Font Size 2 pc. 1 pc = 12 pt If no unit is specified.} Font Size 9px.} Font Size 24 pt.} Font Size 3em.} Font Size 3ex.2 inch. p {font-size:3ex.} Font Size 12 mm.RELATIVE UNITS Relative units include: · px: pixels · em: em · ex: height of letter x Absolute units include: · in: inches · cm: centimeters · mm: millimeters · pt: points. 1 pt = 1/72 in · pc: picas. p {font-size:2pc. p {font-size:0.5 cm. .} Font Size 0. Below are examples for each unit type: CSS Declaration Output p {font-size:9px. the default unit is px.

Finally.BOX MODLE The box model is an important concept in CSS. The box model is shown below: The innermost component is the content. Border is then applied outside of the padding area. . Margins specify the relationship between different elements. Padding is applied outside the content area. margin is applied outside of the padding area. It dictates how elements are laid out.

DIAGRAM OF BOX MODLE .

there are four sides. In a box. So.MARGIN ATTRIBUTE Margin is the space outside of the border. and is used to determine spacing among the different elements. we can specify margins up to the 4 sides: · margin-top · margin-right · margin-bottom · margin-left .

example: #container { margin-top:5px. or auto. percentage. margin-right:auto.Margins can be specified in 3 ways: length. } The following HTML <div id="container"> This is an example for the margin </div> . border: 1px solid 000000. margin-bottom:20px. margin-left:10%.

border-right· border . border.bottom-. border-left-.BORDER Common ways of specifying border properties in CSS include the following: · border-style · border-width · border-color · border-top-.

} Outset Border . The table below shows the possible values and how each one renders.} Ridge Border p {border-style:inset.} Solid Border p {border-style:dashed. CSS Declaration Output p {border-style:solid.BORDER STYLE The border-style property defines the format of the border.} Dashed Border p {border-style:double.} Double Border p {border-style:dotted.} Inset Border p {border-style:outset.} Dotted Border p {border-style:groove.} Groove Border p {border-style:ridge.

border-style:dashed.} . border-style:solid.} p {border-width:medium.BORDER-WIDTH The border-width property specifies the width of the border. The value can be "thin". "thick". CSS Declaration:p {border-width:9px. "medium". or a numerical width.

border-style:dotted.} p {border-color:red. border-style:solid.BORDER COLOR The border-color property specifies the color of the border. Examples below: CSS Declaration:p {border-color:#0000FF.} .

bottom. border-bottom-color:#00FF00.BORDER-LEFT. border-top-style specifies the style of the top border. left.BORDER-RIGHT.} p {border-top-style:solid.} . For example. border-bottom-style:dashed.BORDERBOOTOM Directions (top. right) can be combined with style.} p {border-left-style:solid. border-top-width:medium. and color to form a 3-part CSS command.BORDER-TOP. Some examples below: CSS Declaration:p {border-top-style:solid. width. border-bottom-style:dotted.

BORDER If the characteristics for all 4 sides of the border are the same. } . For example. In addition. border-width. they can be combined into a single line using the border property. p { border:#0000FF 5px solid. with the CSS declaration. and border-color) can be combined into a single line with the border command. all three border properties (border-style.

paddings can be specified in 3 ways: length. padding-left:5px. padding-right:30px. example: #container { padding-top:15px.PADDING The padding is the space just outside the content area. and just inside the border area. border: 1px solid 000000. } The following HTML <div id="container"> This is an example for the padding </div> . or auto. we can specify paddings up to the 4 sides. percentage. padding-bottom:40px. plus a general padding property: · padding-top · padding-right · padding-bottom · padding-left we can used padding as a shortcut for the above four properties.

and the fourth is always the left padding. The first element is always the top padding.PADDING SHORTCUTS All four paddings can be specified on a single line using the "padding" property. The syntax is as follows: padding: [padding-top] [padding-right] [padding-bottom] [padding-left] The order is very important here. the second is always the right padding. . the third is always the bottom padding.

background-color: Specifies the color of the background. background-repeat: Specifies whether the background image should be repeated vertically or horizontally or both. background-position: Specifies the position of the background. .BACKGROUND Common ways of specifying background properties in CSS include the following: background-attachment: Specifies whether the background stays fixed on the screen. background-image: Specifies the image to use for the background.

jpg"). background-repeat: no-repeat.BACKGROUND ATTACHMENT The background-attachment property specifies whether a background stays fixed on the screen.jpg"). } . Possible values are "fixed" (background stays in the same place when scrolling) and "scroll" (background moves with the rest of content when scrolling). background-image: url("yp. } body {background-attachment: scroll. background-repeat: no-repeat. background-image: url("yp. Below are two examples: body {background-attachment: fixed.

} .BACKGROUND-COLOR The background-color property specifies the color of the background. CSS Declaration: Output p {background-color: 00FF00.} p{background-color: red.

we can specify a single color for the background.jpg).} With Background Image .BACKGROUND-COLOR In the CSS Background-color property page. What if we want to use an image for our background? That's what the backgroundimage property is for. Example:CSS Declaration:p {background-image:url(yp.

jpg").center. Two percentage values: The first value indicates the horizontal percentage. The values can be combination of [top. Examples :body { background-image: url("yp. and the second value indicates the vertical percentage. } . } body { background-image: url("yp.jpg"). the second value is the vertical position. background-position: 20% 20%. background-position: center.right].bottom] and [left.center.BACKGROUND-POSITION The background-position property specifies the position of the background. Two position values: The first value is the absolute horizontal position.

or no-repeat. p{ background-image:url(yp. which means repeating the image in both the xand y. p{ background-image:url(yp. y-repeat. background-repeat: repeat-x. background-repeat: repeat. p{ background-image:url(yp. background-repeat: repeat-y.jpg).directions. } Background repeats horizontally. } Background repeats vertically. background-repeat: no-repeat. . The default is "repeat". } Background repeats in both directions. } Background does not repeat.jpg).jpg).BACKROUND-REPEAT The background-repeat property specifies whether a background image repeats itself. Examples :CSS Declaration:p { background-image:url(yp. You can also specify x-repeat.jpg).

FONT Common ways of manipulating font properties in CSS include the following: · font-family · font-size · font-weight · font-style · font-variant .

} Font Family Arial. p {font-family: arial.} Font Family Impact.} Font Family Verdana.FONT-FAMILY The font-family property specifies the type of the font. CSS Declaration Output p {font-family: verdana. p {font-family: impact. .

"x-small".FONT-SIZE The font-size property specifies the size of the font. and "xx-small").8cm. p {font-size:large. or in text (possible values are "xx-large". . "medium". p {font-size:small.8cm.} Font Size large.} Font Size small. p {font-size:0.} Font Size 0. p {font-size:150%. CSS Declaration:p {font-size:9px.} Font Size 150%. The size can be numerical (length or percentage). "large".} Font Size 9px. "small". "x-large".

. One can also specify "bold". with 900 being the thickest. Examples:CSS Declaration p {font-weight: 100.} This is font weight 100.} This is bold font weight.FONT-WEIGHT The font-weight property specifies the thickness of the font. p {font-weight: bold.} This is font weight 900. p {font-weight: 900. or "normal". Font weight can go from 100 to 900. "bolder".

} This is font style italics. CSS Declaration Output p {font-style: italic. .FONT-STYLE The font-style property specifies whether the font is italic or oblique.

Small caps mean that all letters will be displayed in the capital case. . The possible values are 'small-caps' and 'normal'. <span>initial in small caps</span> AND LATER IN LARGE CAPS. } the HTML code below. renders INITIAL IN SMALL CAPS AND LATER IN LARGE CAPS.FONT-VARIANT The font-variant property specifies whether the font will be displayed in small caps. but the font size is smaller than usual. span { font-variant:small-caps.example:With the following CSS.

not always ideal. This is. a:active: Specifies how the link looks like when the user clicks on it. This can be achieved using the following selectors: a:link: Specifies how the link looks if the page it links to has not yet been visited. There are times when we want links to have a different style.LINK The default style for a link is blue font with an underline. a:visited: Specifies how the link looks if the page it links to has already been visited. . however. a:hover: Specifies how the link looks like when the user mouses over the link.

text-decoration:none. text-decoration:underline.} a:visited {color:#0000FF. the font color is red.} a:active {color:#FF00FF. the font color becomes blue. color:#00FF00.} What this means is the following: 1) When the page is first loaded. . font color becomes pink. and the underline remains.The following declaration:a:link {color:#FF0000. font size becomes 20. 3) When you mouse over the link. 2) Once the link is visited.} a:hover {font-size:20. font color becomes green. 4) When you click on the link. and an underline appears. text-decoration:none. text-decoration:underline.

LIST Common ways of manipulating font properties in CSS include the following: · list-style-type · list-style-position · list-style-image · list-style .

The most commonly used list-style-types are: · none · disc · circle · square One may also wish to use ordered character sets.'> <li>item 1</li> <li>item 2</li> </ul> Example 2: <ul style='list-style-type:square. Common ones are: · upper-latin · lower-latin · upper-roman · lower-roman · upper-alpha · lower-alpha example:Example 1: <ul style='list-style-type:upper-roman.LIST-STYLE-TYPE The list-style-type property lets you specify a different type of marker than the default disc.'> <li>square item 1</li> <li>square item 2</li> </ul> .

'Outside' is the default value. The possible values are 'inside' and 'outside'.'> <li>First one<br>second line <li>Second one </ul> Result: ‡First one second line ‡Second one Example 2: <ul style='list-style-position:outside. Example 1:<ul style='list-style-position:inside.LIST-STYLE-POSITION The list-style-position property offers a way for the user to specify whether the marker should be treated as part of the regular text when it comes to formatting.'> <li>First one<br>second line <li>Second one </ul> Result: ‡First one second line one ‡Second .

Second list for custom marker.LIST-STYLE-IMAGE The list-style-image property is used to specify an image to use for the market.gif"). if our CSS code is ul { list-style-image:url("circle. </ul> renders First list for custom marker. <li>Second list for custom marker. For example. . } the following HTML code <ul> <li>First list for custom marker. The syntax is :list-style-image:url([image_url]).

} . th. } .TABLE The table. tr. color. · Heading: Background is yellow. · Element: There is a black solid line beneath every element in the table. font. font is arial. and td selectors can use many of the properties . those for text. font size is 14px. and background. · For scores below 60. border.fail { color:#FF0000. font-size:14px. } td { border-bottom:1 solid #000000. but not limited . We would apply the following stylesheet: table { border: 0. } th { background-color:yellow. font-family: arial. create a separate class that would make the font color red. example: Assuming that we want the following style applied to the table: · Table: No outer border.

the HTML code below: <table> <tr> <th>Student Name</th> <th>Score</th> </tr> <tr> <td>Stella</td> <td>85</td> </tr> <tr> <td>Sophie</td> <td>95</td> </tr> <tr> <td>Alice</td> <td class="fail">55</td> </tr> </table> would render the following: Student Name Score Stella 85 Sophie 95 Alice 55 .Given this style.

BORDER-COLLAPSE There is one property related to a table that is the border-collapse property. width:200px. The border-collapse property essentially replaces the cellspacing=0 declaration.2M</td></tr> <tr><td>2007</td><td>40. The is the effect of border-collapse:collapse.1M</td></tr> </table> would render the following: Year Income 2006 35. } tr { border-bottom:1px solid #000.2M 2007 40.1M Notice that the underline between the Year column and the Income column are continuous. border-collpase:collpase. . } the HTML code below:<table> <tr><td>Year</td><td>Income</td></tr> <tr><td>2006</td><td>35. example CSS declaration:table { border:0.

bottom. right. and left properties will have no effect. . relative: specifies how the element will be positions relative to how it would have been positioned by default. The position of the element moves along with the rest of the content when the page is scrolled. Possible values include: static (default): indicates that the element will be placed at the default location. values for the top. fixed: places an element in relation to the actual browser window. absolute: places an element in relation to the actual browser window. Please note that if static is specified.POSITION The position property specifies what kind of position is used. The position of the element remains fixed even when the page is scrolled.

They are as follows: · top · · · · right left bottom overflow · z-index .additional properties are needed to complement the position property.

SESSION The absolute value of the position property means that the element will be displayed in the same location within the browser.}. left. This is different from when we specify {position:fixed. you will see a red ball 550 pixels from the top of the browser and 400 pixels from the left of the browser. } The HTML code. As an example. the red ball moves along with the rest of the page. or right properties. when the red ball stays in the same place as the rest of the page moves. The code for this is: p{ position:absolute. Please notice that as you scroll up and down and page. with the location being determined by top. The element will move with the rest of the content when scrolling.jpg"> </div> renders the image you see that is 50px from the top of the browser and 600px from the left of the browser. bottom. top:50px. . <div> <p><img src="red-ball. left:600px.

} style added 15px of space on top of the text. </div> renders Example:div { background-color:#FF00FF. height:60px. top:15px. } p{} The HTML code. and right). applying the {position:relative. width:250px. <div> <p>Example to show relative position. } p{ position:relative. Example CSS Code div { background-color:#FF00FF. height:60px. width:250px. top:15px. </div> Example to show relative position. left. It is used in combination with a direction (top. this style shifted the text down by 15px relative to the default position.RELATIVE The relative value of the position property specifies how the element will be positions relative to how it would have been positioned by default. . bottom. In the above example. In other words. } <div> <p>Example to show relative position.

top:50px. left:650px. left. . the red ball stays in the same place. Please notice that as you scroll up and down and page. <div> <p><img src="red-ball.jpg"> </div> renders the image you see that is 50px from the top of the browser and 650px from the left of the browser. or right properties. with the location being determined by top.FIXED-PROPERTY The fixed value of the position property means that the element will always be displayed in the same location within the browser. As an example. As you scroll down the page. bottom. The code for this is: p{ position:fixed. that red ball stays in the same place. you will see a red ball 50 pixels from the top of the browser. } The HTML code.

The only instances are when we are trying to undo a declaration that was done to the same element. its value is static. bottom.STATIC PROPERTY Static is the default value of the position property. If an element's position is specified as static. we seldom see it declared explicitly. that means it will be rendered in the normal flow of the text. the directional properties (top. Since static is the default value of position. If static is the value of position. . and right) are not used even if specified. which means if no value is given to the position property. left.

top:10px. <div> <p>Sample text. </div> . height:60px. as a length.TOP-PROPERTY The top property specifies the distance from the top of the element to the default location of the element (when position=relative) or the distance between the top of the element and the top of the container (when position=absolute). } p{ position:relative. This can be specified as a percentage. } The HTML code. or 'auto'. Let's take a look at two examples: Example 1: CSS Code div { background-color:#FF00FF. width:500px.

BOTTOM The bottom property specifies the distance from the bottom of the element to the default location of the element . </div> renders No bottom property. applying the {position:relative.} style moved the text up by 5px. } p{ position:relative. </div> Apply bottom:5px. bottom:5px. <div> <p>No bottom property. width:250px. } <div> <p>Apply bottom:5px. height:60px. In the above example. } p{} The HTML code. example: CSS Code div { background-color:#FF00FF. bottom:5px. width:250px. div { background-color:#FF00FF. height:60px. .

LEFT-PROPERTY The left property specifies the distance from the left of the element to the default location of the element the distance between the left of the element and the left of the container (when position=absolute). or 'auto'. height:60px. This can be specified as a percentage. width:500px. </div> . left:30px. as a length. } The HTML code:<div> <p>This text is 30 pixels from the left of the box. Example 1: CSS Code div { background-color:#FF00FF. } p{ position:relative.

right:30px. } The HTML code. to the default location of the element height:60px. } or the distance between the right of the element and the right edge of the container (when position=absolute). examples: Example 1 CSS Code div { background-color:#FF00FF. distance from the right of the element width:250px.RIGHT-PROPERTY The right property specifies the background-color:#FF00FF. height:60px. <div> <p>No right property. } p{ text-aligh:right. </div> Apply right:30px. . width:250px. } <div> <p>Apply right:30px. </div> div { text-align:right. position:relative.

regardless of whether the content exceeds the containing element. Possible values are: visible: The entirety of the content is shown. scroll: Displays the vertical and horizontal scroll bar to allow scroll of the content. a scroll bar is displayed . auto: If the content is beyond the containing element. hidden: Only the content within the containing element is shown.OVERFLOW-PROPERTY The overflow property indicates how the content will be displayed when it exceeds the containing element. regardless of the height specified for the element.

For example. when there is an overlap between two elements. border: 1px solid #FFF. width:80px. background-color: #FF0000. height:100px. } . In other words. say we define two blocks with the following CSS code: #redblock { z-index: 1. top:20px. the z-index value determines which one shows up on top. position: absolute. The element with a larger z-index value will appear on top.Z-INDEX-PROPERTY The z-index property specifies the stack order of an element. left:20px.

which has a z-index value of 1. position: absolute. } The following HTML code. width:100px. the pink block. height:80px. with a z-index value of 2. top:50px. left:50px. border: 1px solid #FFF. . background-color: #FF00FF. <div id="redblock"></div> <div id="pinkblock"></div> renders the following: As we can see. lies on top of the red block.#pinkblock { z-index: 2.

TEXT-PROPERTIES Here are the most commonly-used CSS properties related to text. · direction · · · · letter-spacing line-height text-align text-decoration · text-indent · text-transform · word-spacing .

with a CSS declaration of.DIRECTION-PROPERTY The direction property specifies the text direction. Possible values are 'ltr' and 'rtl'. } The following HTML. <p>LTR Direction</p> . p{ direction:ltr. For example.

<p>8px between letters</p> renders 8px between letters . } The following HTML. For example. with a CSS declaration of : P { letter-spacing:8px.LETTER-SPACING PROPERTY The letter-spacing property specifies the amount of space between characters.

with a CSS declaration of.</p> renders 30px between line 1 and line 2. <p>30px between line 1<br>and line 2. For example. } The following HTML.LINE-HEIGHT-PROPERTY The line-height property specifies the amount of space between lines. P { line-height:30px. .

TEXT-ALIGN PROPERTY The text-align property specifies how text is justified. Possible values are: · left: left-justified · right: right-justified · center: text is centered · justified: text is both right.and left-justified Examples:CSS Declaration Output p { text-align:left. . } This sentence illustrates what it looks like to be left-justified. } This sentence illustrates what it looks like to be right-justified. p { text-align:right.

p{ text-align:center. . } This sentence illustrates what it looks like to be fullyjustified. } This sentence illustrates what it looks like to be centered. p{ text-align:justify.

Examples below: CSS Declaration Output p{ text-decoration:underline. } An underline example p{ text-decoration:overline. · blink: causes the text to blink.TEXT-DECORATION PROPERTY The text-decoration property specifies how text is decorated. } An overline example p{ text-decoration:line-through. Possible values are: · underline: adds an underline to the text · overline: adds a line on top of the text · line-through: adds a line through the middle of the text. } .

Subsequent lines are not indented. For example. with a CSS declaration of. Both length and percentage can be used. . Subsequent lines are not indented. } The following HTML. <p>This text is indented by 15px at the beginning of the paragraph.TEXT-INDENT PROPERTY The text-indent property specifies how much space to indent before the first line of the text in a block.</p> renders This text is indented by 15px at the beginning of the paragraph. p{ text-indent:15px.

we get the following: CSS Declaration Output p { text-transform:capitalize.TEXT-TRANSFORM The text-transform property controls how upper and lower cases are displayed. } THIS IS A LAWYER . Possible values are: · capitalize: capitalizes the first letter in a word · uppercase: makes the entire word upper case · lowercase: makes the entire word lower case · none: no transform is performed For example. if we apply each of the following CSS style to the text "this is a LAWYER". } this is a LAWYER p { text-transform:uppercase.

P { text-transform:lowercase. } this is a LAWYER .

<span id="leftfloat"><img src="yp.FLOAT-PROPERTY One of the commonly-seen layout.jpg"></span>This example illustrates how float:left affects the appearance of a block. and 'none'. especially in large websites displaying ads. is wrapping the text around an advertising block. } the following HTML. #leftfloat { float:left. 'right'. Let's take a look at the following examples: Example 1: Given the CSS declaration. Notice how the image "floats" to the left. This is accomplished using the float property. . The float property has three possible values: 'left'.

CSS declaration: #leftfloat { float:left.jpg"></span>This example <span id="clearleft"> illustrates how clear:left breaks the float property. · none: Do not keep either side clear. · right: Keep the right side clear. </span> . } the following HTML. Possible values for the clear property are: · left: Keep the left side clear.CLEAR PROPERTY The clear property is used to cancel the effect of float. · both: Keep both sides clear. <span id="leftfloat"><img src="yp. } #clearleft { clear:left.

just mouse over the "Result" column. } { cursor: help. as well as how they are declared. } Mouse cursor is set to move set to{ cursor: wait. } Mouse cursor is set to wait { cursor: pointer.CURSOR PROPERTY At some websites. } . This is set via the cursor property. you'll see different mouse cursors. Below we list the commonlyseen cursors. CSS Declaration Result { cursor: crosshair. } Mouse cursor is set to pointer Mouse cursor is set to help { cursor: text. } Mouse cursor is crosshair Mouse cursor is set to text { cursor: move. what a cursor looks like.

} Mouse cursor is set to not-allowed { cursor: no-drop. } Mouse cursor is set to no-drop { cursor: no-vertical-text.{ cursor: progress. } Mouse cursor is set to no-vertical-text . } Mouse cursor is set to progress {cursor: not-allowed.

} Mouse cursor is set to sw-resize . } Mouse cursor is set to ne-resize { cursor: n-resize. } { cursor: url(image_url). } Mouse cursor is set to col-resize Mouse cursor is set to se-resize We can also specify a custom Mouse cursor is set to row-resize image for the mouse cursor. } Mouse cursor is set to nw-resize { cursor: w-resize. The syntax for doing this is: { cursor: e-resize. } { cursor: s-resize. } Mouse cursor is set to all-scroll { cursor: col-resize. } Mouse cursor is set to w-resize { cursor: sw-resize. } { cursor: row-resize. } Mouse cursor is set to s-resize { cursor: se-resize. } Mouse cursor is set to n-resize { cursor: nw-resize. } Mouse cursor is set to e-resize { cursor: ne-resize.{ cursor: all-scroll.

Consecutive white space characters are collapsed into a single white space. Common values of this property are as follows: normal: This is the default. so there is no line wrapping.TEXT-WRAP PROPERTY Text wrap can be achieved in CSS using the white-space property. All formatting is "as is" for the text inside the <pre> </pre> tag. Line wraps when it becomes to long to fit the container's width. pre: This behaves like the <pre> tag in HTML. nowrap: Line does not wrap even when it becomes too long to fit the container's width. .

height:60px.EXAMPLE-1 div { background-color:#FF00FF. . </div> renders This line shows the layout with white-space:normal. } p { white-space:normal. width:200px. <div> <p>This line shows the layout with white-space:normal. } The HTML code.

. height:60px. } The HTML code. In Example 2. <div> <p>This line shows the layout with white-space:nowrap. width:200px. } p { white-space:nowrap. </div> renders This line shows the layout with white-space:nowrap.EXAMPLE-2 Div { background-color:#FF00FF. text does not wrap to the next line when it reaches the right edge of the pink box.

width:200px. } The HTML code. In Example 3.. <div> <p> These two lines show the layout with .EXAMPLE-3 div { background-color:#FF00FF. </div> renders These two lines show the layout with white-space:pre. } p{ white-space:pre. .. white-space:pre. text is displayed exactly as how it was shown in the HTML document. and does not wrap to the next line when it reaches the right edge of the pink box. height:60px.

Sign up to vote on this title
UsefulNot useful