P. 1
CSS

CSS

|Views: 134|Likes:
Published by Ankit Srivastava

More info:

Published by: Ankit Srivastava on Feb 08, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPTX, PDF, TXT or read online from Scribd
See more
See less

02/23/2012

pdf

text

original

Sections

  • SYNTEX OF CSS
  • CSS STYLESHEET
  • INTERNAL STYLESHEET
  • EXTERNAL STYLESHEET
  • MULTIPLE CLASSES
  • BOX MODLE
  • MARGIN ATTRIBUTE
  • BORDER
  • BORDER COLOR
  • BACKGROUND
  • BACKGROUND ATTACHMENT
  • BACKGROUND-COLOR
  • FONT-FAMILY
  • FONT-SIZE
  • FONT-WEIGHT
  • FONT-VARIANT
  • LIST
  • LIST-STYLE-POSITION
  • LIST-STYLE-IMAGE
  • TABLE
  • POSITION
  • SESSION
  • RELATIVE
  • STATIC PROPERTY
  • TOP-PROPERTY
  • BOTTOM
  • LEFT-PROPERTY
  • OVERFLOW-PROPERTY
  • Z-INDEX-PROPERTY
  • TEXT-PROPERTIES
  • TEXT-TRANSFORM
  • FLOAT-PROPERTY
  • CURSOR PROPERTY
  • EXAMPLE-1
  • EXAMPLE-2
  • EXAMPLE-3

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.

.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.. } means that text in the <b> element inside the <li> element will be yellow..

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

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>

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

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

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

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} .

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

p {font-size:3ex.} Font Size 0. 1 pc = 12 pt If no unit is specified. . p {font-size:24pt. p {font-size:12mm. p {font-size:0.} Font Size 24 pt.2in. p {font-size:3em.} Font Size 3em.} Font Size 3ex.} Font Size 12 mm.5cm.} Font Size 9px. p {font-size:2pc.} Font Size 2 pc. p {font-size:0.5 cm.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.2 inch. 1 pt = 1/72 in · pc: picas. the default unit is px. Below are examples for each unit type: CSS Declaration Output p {font-size:9px.} Font Size 0.

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

DIAGRAM OF BOX MODLE .

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

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

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

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

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

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

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

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

padding-right:30px. paddings can be specified in 3 ways: length. we can specify paddings up to the 4 sides.PADDING The padding is the space just outside the content area. percentage. padding-left:5px. and just inside the border area. 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. example: #container { padding-top:15px. padding-bottom:40px. border: 1px solid 000000. or auto. } The following HTML <div id="container"> This is an example for the padding </div> .

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

background-color: Specifies the color of the background. background-image: Specifies the image to use for 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-position: Specifies the position of the background. background-repeat: Specifies whether the background image should be repeated vertically or horizontally or both. .

jpg"). Below are two examples: body {background-attachment: fixed.BACKGROUND ATTACHMENT The background-attachment property specifies whether a background stays fixed on the screen. background-repeat: no-repeat. 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.jpg"). } body {background-attachment: scroll. background-image: url("yp. background-repeat: no-repeat.

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

we can specify a single color for the background.jpg).} With Background Image . Example:CSS Declaration:p {background-image:url(yp.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.

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

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

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

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

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

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

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

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

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. a:hover: Specifies how the link looks like when the user mouses over the link. This is.LINK The default style for a link is blue font with an underline. not always ideal. a:active: Specifies how the link looks like when the user clicks on it. There are times when we want links to have a different style. . a:visited: Specifies how the link looks if the page it links to has already been visited. however.

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

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

LIST-STYLE-TYPE The list-style-type property lets you specify a different type of marker than the default disc.'> <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. The most commonly used list-style-types are: · none · disc · circle · square One may also wish to use ordered character sets.'> <li>square item 1</li> <li>square item 2</li> </ul> .

'> <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.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 . 'Outside' is the default value. The possible values are 'inside' and 'outside'. Example 1:<ul style='list-style-position:inside.

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

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

Given this style. 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 .

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

Please note that if static is specified. . absolute: places an element in relation to the actual browser window. fixed: places an element in relation to the actual browser window. values for the top. right. 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.POSITION The position property specifies what kind of position is used. and left properties will have no effect. bottom. The position of the element remains fixed even when the page is scrolled.

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

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

} p{} The HTML code. width:250px. top:15px. top:15px. </div> renders Example:div { background-color:#FF00FF. . left. </div> Example to show relative position. 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. } <div> <p>Example to show relative position. <div> <p>Example to show relative position. applying the {position:relative. } p{ position:relative. In the above example. Example CSS Code div { background-color:#FF00FF. It is used in combination with a direction (top. height:60px. bottom. width:250px.} style added 15px of space on top of the text. In other words. height:60px. and right).

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

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

Let's take a look at two examples: Example 1: CSS Code div { background-color:#FF00FF. <div> <p>Sample text. top:10px. This can be specified as a percentage. or 'auto'. </div> . } The HTML code.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). as a length. } p{ position:relative. width:500px. height:60px.

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

This can be specified as a percentage.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). left:30px. </div> . as a length. } The HTML code:<div> <p>This text is 30 pixels from the left of the box. width:500px. height:60px. or 'auto'. Example 1: CSS Code div { background-color:#FF00FF. } p{ position:relative.

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

auto: If the content is beyond the containing element. Possible values are: visible: The entirety of the content is shown. regardless of the height specified for the 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 whether the content exceeds the containing element. scroll: Displays the vertical and horizontal scroll bar to allow scroll of the content. a scroll bar is displayed .

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

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

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 .

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

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

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

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

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

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. } . } An underline example p{ text-decoration:overline. Examples below: CSS Declaration Output p{ text-decoration:underline. · blink: causes the text to blink.

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

if we apply each of the following CSS style to the text "this is a LAWYER". } this is a LAWYER p { text-transform:uppercase.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. we get the following: CSS Declaration Output p { text-transform:capitalize.

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

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

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

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

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

} Mouse cursor is set to ne-resize { cursor: n-resize. } { cursor: url(image_url). } Mouse cursor is set to e-resize { cursor: ne-resize. } { cursor: row-resize. } { cursor: s-resize. } Mouse cursor is set to nw-resize { cursor: w-resize. } Mouse cursor is set to all-scroll { cursor: col-resize. The syntax for doing this is: { cursor: e-resize. } Mouse cursor is set to n-resize { cursor: nw-resize. } Mouse cursor is set to w-resize { cursor: sw-resize.{ cursor: all-scroll. } Mouse cursor is set to sw-resize . } Mouse cursor is set to s-resize { cursor: se-resize. } 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.

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

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

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

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->