CSS

CSS
CSS stands for Cascading Style Sheets. CSS is a style language that defines layout of HTML documents. (styles define how to display HTML elements ) Styles are normally stored in Style Sheets . External Style Sheets are stored in CSS files . Basic difference between HTML & CSS is, HTML is used to structure content. CSS is used for formatting structured content. With CSS, HTML documents can be displayed using different output styles.
Style Sheets Can Save a Lot of Work

Styles are normally saved in external .css files. External style sheets enable user to change the appearance and layout of all the pages , just by editing one single CSS document. Style sheets allow style information to be specified in many ways. 1) Styles can be specified inside a single HTML document, inside the <head> section of an HTML page. 2) In an external CSS file. 3) Even multiple external style sheets can be referenced inside a single HTML document.
CSS syntax
The CSS syntax is made up of three parts: a selector, a property and a value selector {property: value}
The selector is normally The value of the attribute the HTML tag you wish e.g. blue to apply property e.g. p The property is the attribute e.g. color
1) The property and value are separated by a colon, and surrounded by curly braces. eg. p {color : blue}
2) If the value is multiple words, put quotes around the value: eg. p {font-family: "sans serif"}
3) If you wish to specify more than one property, you must separate each property with a semicolon. // example below shows how to define a center aligned paragraph, with a red text color & font is arial: p {text-align: center ; color: red ; font-family: arial } or p {text-align:center; color: red; font-family: arial }
4) You can group selectors. Separate each selector with a comma. //In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 {color: green }
5) With the class selector you can define different styles for the same type of HTML tag. //Define two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. p.right {text-align: right} p.center {text-align: center} Use the class attribute in your HTML document: <p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned. </p>
6) You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. //In the example below, all HTML tags with class="center" will be center-aligned: .center {text-align: center} <h1 class="center">This heading will be centeraligned</h1> <p class="center">This paragraph will also be center-aligned.</p>
7) CSS CommentsA comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", eg. /* This is style for paragraph tag */ p{text-align: center ; color: black; font-family: arial}
How to Insert a Style Sheet

There are three ways of inserting a style sheet: 1) External style sheets An external style sheet is ideal when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
Eg. coding of mystyle.csshr {color: cyan} p {margin-left: 20px ; color:red ; background-color:yellow} body {background-image:url(blue hills.jpg)} coding of html file which uses external style sheet<html> <head> <link rel="stylesheet" type="text/css href="mystyle.css/> </head> <body> <p>This is a paragraph</p> <hr> </body> </html>
2) Internal style sheets An internal style sheet should be used when a single document has a unique style. Define internal styles in the head section by using the <style> tag.
<html> <head> <style> hr {color: cyan} p {margin-left: 20px ; color : red ; background-color:yellow} body {background-image : url(blue hills.jpg)} </style> </head> <body> <p>This is a paragraph </p> <hr> </body> </html>
3) Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles ,use the style attribute in the relevant tag. The style attribute can contain any CSS property.
// The example shows how to change the color and the left margin of a paragraph: Eg <html> <body style="background-image : url('blue hills.jpg')"> <p style="margin-left: 20px ; color : red ; background-color : yellow">This is a paragraph</p> <hr style="color: cyan"> </body> </html>
The id Selector Styles can also be defined for HTML elements with the id selector.The id selector is defined as a #. Syntax : #<id_name>
//Do NOT start an ID name with a number
The style rule below will match the element that has an id attribute with a value of "green": #green {color: green} The style rule below will match the <p> element that has an id with a value of "para1": p#para1 { text-align: center; color: red }
<html> <head> <style> #id1{color:green} //this style can be applied to any HTML element p#id2{color:blue} //this style can be applied to only paragraph tag,but can
be accessed using id attribute only
</style> </head>
<body> <p id="id1" >This is paragraph-1</p> <hr id="id1" size=4 width=50%> <p id=id2>This is paragraph-2</p> <hr id="id2" size=4 width=50%> </body> </html>
CSS Font
The CSS font properties define the font in text. CSS font properties are,
Property
font-family font-style font-variant font-weight font-size font
Description
Values
A prioritized list of font family "Arial", "Times New names Roman, "Tahomaetc. Sets the style of the font Displays text in a small-caps font or a normal font Sets the weight of a font Sets the size of a font normal / italic / oblique normal / small-caps normal / bold pixels / percentage(%)
A shorthand property for font-style setting all of the properties for font-variant a font in one declaration font-weight font-size font-family
For example, the following four lines of code used to describe font-properties for <p>: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial } Using the short hand property, the code can be simplified: p { font: italic bold 30px arial} The order of values for font is: font-style | font-variant | font-weight | font-size | font-family
//css_font_1.html <html> <head> <style> h1,h2 { font-family: courier new; font-style: oblique} p.fs { font-family: arial ; font-style: italic} p.fv { font-variant: small-caps} </style> </head> <body> <h1>This is heading-1</h1><br> <h2>This is heading-2</h2><br> <p class=fs >This is paragraph</p><br> <p class=fv>This is paragraph</p> </body> </html>
//css_font_2.html <html> <head> <style> h1 { font-weight:bold ; font-size:40} p { font: italic bold 200% arial} center {text-align:center} </style> </head> <body> <h1 class=center>Heading-1</h1><br> <p class=center>This is a paragraph</p> </body> </html>
<html> <head> <style> p { color:blue;font-family:arial;font-style: italic ; background-color:yellow} p.fv { font-variant: small-caps; text-decoration:line-through} </style> </head> <body> <p>This is paragraph</p> //to this only normal paragraph style is applied <p class="fv" >This is paragraph</p> // to this text normal paragraph style (i.e.p) as well as another paragraph style(i.e.p.fv) are applied </body> </html>
CSS text
The CSS text properties define the appearance of text. CSS text properties are,
Property
color backgroundcolor line-height direction text-indent text-align
Description
Sets the color of a text Sets the background color of a text Sets the distance between lines Sets the text direction
Values
color_name color_name normal / length / % ltr / rtl
Indents the first line of text in an length / percentage(%) element Aligns the text in an element left / right / center / justify none / underline / overline / line-through / blink normal / length
text-decoration Adds decoration to text letter-spacing Increase or decrease the space between characters
CSS text (contd.)

Property
text-transform white-space word-spacing
Description
Values
Controls the letters in an element none / capitalize / uppercase / lowercase Sets how white space inside an element is handled Increase or decrease the space between words normal / pre / nowrap normal / length
Eg. <html> <head> <style> p { color : blue; direction : rtl; text-align:center; text-decoration : overline; letter-spacing : 10; text-transform :capitalize } </style> </head> <body> <p>This is paragraph</p> </body> </html>
//css_text_1.html <html> <head> <style> h1 { color: #00ff00 ; background-color: yellow } p { color : red ; background-color: cyan; direction: rtl} </style> </head> <body> <h1>This is header 1</h1> <p>This is a paragraph</p> </body> </html>
//css_text_2.html <html> <head> <style> p.one { line-height:3 ;text-indent:10; text-decoration:underline} p.two { line-height:-2; text-decoration:overline} </style> </head> <body> <p class=one> paragraph-1 paragraph-1 paragraph-1 paragraph-1 paragraph-1 paragraph-1 </h1> <p class=two>paragraph-2 paragraph-2 paragraph-2 paragraph-2 paragraph-2 </p> </body> </html>
//css_text_3.html <html> <head> <style> h1 { text-transform: capitalize ; word-spacing: 30} h2 { word-spacing:-10} p { text- align: center ; letter-spacing: 10; text-transform: uppercase} </style> </head> <body> <h1> This is heading-1</h1> <h2>This is heading-2</h2> <p>write multiple line text here</p> </body> </html>
CSS table
The CSS table properties allow you to set the layout of a table. CSS table properties are,
Property
border-collapse
Description
Values
Sets whether the table borders are collapse / separate collapsed into a single border or detached as in standard HTML Sets the distance that separates cell length length borders (only for the "separated borders" model) Sets the position of the table caption top / bottom / left / right
border-spacing
caption-side empty-cells
Sets whether or not to show empty show / hide cells in a table(only for the "separated borders" model)
//css_table_1.html <html> <head> <style> table.coll { border-collapse: collapse } table.sep { border-collapse: separate } </style> </head> <body> <table class="coll" border=1> <tr> <th>T1 <th>T2 </tr> <tr> <td>23 <td>45 </tr> </table>
<br> <table class="sep"border=1> <tr> <th>T1 <th>T2 </tr> <tr> <td>23 <td>45 </tr> </table> </body> </html>
//css_table_2.html <html> <head> <style> table { border-collapse: separate ; caption-side: right; empty-cells: show; } </style> </head> <body> <table border=1> <caption><b>Table-1<b></caption> <tr> <th>T1 <th>T2 </tr>
<tr> <td>23 <td>45 </tr> <tr> <td>30 <td> </tr> </table> </body> </html>
//css_table_3.html <html> <head> <style> table { border-collapse: separate; border-spacing: 30px 10px } </style> </head> <body> <table border=1> <tr> <th>T1 <th>T2 </tr> <tr> <td>23 <td>45 </tr> </table> </body>
CSS list
Property
list-style
Description
Values
A shorthand property for setting all list-style-type of the properties for a list in one list-style-position declaration list-style-image
list-style-image
Sets an image as the list-item marker none / url(URL)
list-style-position
Sets where the list-item marker is placed in the list
inside / outside
CSS list(contd.)
list-style-type Sets the type of the list-item marker none / disc / circle /square / decimal /decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
//css_list_1.html <html> <head> <style > ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.none {list-style-type: none} </style> </head> <body> <ul class="disc"> <li>Coffee <li>Tea <li>Coca Cola </ul>
<ul class="circle"> <li>Coffee <li>Tea <li>Coca Cola </ul> <ul class="none"> <li>Coffee <li>Tea <li>Coca Cola </ul> </body> </html>
//css_list_2.html <html> <head> <style> ul.inside { list-style-position: inside} ul.outside { list-style-position: outside} </style> </head> <body>
<p>This list has a list-style-position with a value of "inside":</p> <ul class="inside"> <li>HTML <li>CSS <li>XML </ul> <p>This list has a list-style-position with a value of "outside":</p> <ul class="outside"> <li>HTML <li>CSS <li>XML </ul> </body> </html>
<html> <head> <style > ul.image { list-style-image: url(b_right.gif)} ol.lroman { list-style-type: lower-roman} </style> </head> <body> <ul class=image> <li>HTML <li>CSS <li>XML </ul> <ol class=lroman> <li>HTML <li>CSS <li>XML </ol> </body></html>
CSS Positioning
The CSS positioning properties allows you to place an element exactly where you want it on your page.
Property
left
Description
Values
Sets how far the left edge of an element is to the auto / % / length right(+ve value) / left of the left edge of the parent element (- ve value) Sets how far the right edge of an element is to the auto / % / length left (+ve value) / right of the right edge of the parent element (- ve value) Sets how far the top edge of an element is above (- auto / % / length ve value) / below the top edge of the parent element (+ ve value) Sets how far the bottom edge of an element is above (+ve value) / below the bottom edge of the parent element (- ve value) Places an element in a static, relative, absolute or fixed position auto / % / length
right
top
bottom
position
static / relative / absolute / fixed
CSS Positioning(contd.)
Property
z-index clip
Description
Sets the stack order of an element
Values
auto / number
Sets the shape of an element. shape [Sets the shape of the The element is clipped into element. The valid shape value is: this shape, and displayed rect (top, right, bottom, left) ] auto Sets the vertical alignment of baseline / sub / super / top an element / text-top / middle / bottom / text-bottom / length / % Sets what happens if the visible content of an element overflow hidden its area scroll auto
vertical-align
overflow
Description on position propertyStatic-Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) Relative-An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position Absolute-An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties Fixed-An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
<html> <head> <style> p.one {position: absolute; left:50px; top:0px} p.two {position: absolute; left:-50px; top:100px} </style> </head> <body> <p class="one">This is paragraph-1. This is paragraph-1. This is paragraph-1. This is paragraph-1. This is paragraph-1. This is paragraph-1. This is paragraph-1. This is paragraph-1. This is paragraph-1.</p> <p class="two">This is paragraph-2. This is paragraph-2. This is paragraph-2.This is paragraph-2.This is paragraph-2. This is paragraph-2.This is paragraph-2.</p> </body> </html>
<html> <head> <style> h1 { position:absolute ; top:50px ; left:300px ; background-color:yellow} h2 { position:absolute; top: 100px;left: 200px;background-color:cyan } img.one { position:absolute ; top:200px ; left:400px;} img.two { position:absolute ; top:250px ; left:450px;} </style> </head> <body> This is a normal text position. <h1>Heading-1 position</h1> <h2>Heading-2 position</h2> <img src=blue hills.jpg height=100 width=100 class=one> <img src=sunset.jpg height=100 width=100 class=two> </body> </html>
<html> <head> <style> h1 { position:relative ; top:50px ; left:50px } h2 { position:relative; top: 100px; left: 100px } </style> </head> <body> <h1>Heading-1 position</h1> <h2>Heading-2 position</h2> </body> </html>
<html> <head> <style > h2.one { position:fixed; left:10px; top:20px; } h2.two { position:fixed; top:30px; right:10px; }
h2.three { position:fixed; bottom:30px; right:20px; } </style> </head> <body> <p class="one">paragraph-1</p> <p class="two">paragraph-2</p> <p class="three">paragraph-3</p> </body> </html> Position:fixed allows how to position an element with relative to the browser window.
<html> <head> <style > p.one { position:fixed; left:10px; top:20px; } p.two { position:fixed; top:30px; right:10px; } p.three { position:fixed; bottom:30px; right:20px; } </style> </head> <body>
<p class="one">paragraph-1</p> <p class="two">paragraph-2</p> <p class="three">paragraph-3</p> <p>This is a normal text.</p> <p>This is a normal text.</p> </body> </html> //The fixed positioned text does not scroll with rest of the text.while the absolute positioned text scroll with rest of the text. Replace position:fixed by position: absolute
<html> <head> <style > img.x { position:absolute; left:0px; top:0px; z-index:1 } </style> </head>
<body> <h1>This is a Heading</h1> <img class="x" src="bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index -1 has lower priority.</p> </body> </html> //write z-index:-1
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:2 } img.y { position:absolute; left:20px; top:0px; z-index:1} </style> </head>
<body> <h1>This is a Heading</h1> <img class="x" src="bulbon.gif" width="100" height="180"> <img class="y" src="logocss.gif" width="100" height="180"> <p>Default z-index is 0. Z-index :2 has higher priority than1.</p> </body> </html>
<html> <head> <style type="text/css"> img { position:absolute; clip:rect(0px 50px 200px 0px) } </style> bottom left top </head> right <body> <p>The clip property is here cutting an image:</p> <img border="0" src=bulbon.gif" width="120" height="151"> </body> </html>
<html> <head> <style type="text/css"> img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} </style> </head> <body> <p>This is an <img class="top" border="0" src="logocss.gif" width="95" height="84"> image inside a paragraph.</p> <p>This is an <img class="bottom" border="0" src="logocss.gif" width="95" height="84" >image inside a paragraph.</p> </body> </html>
<html> <head> <style type="text/css"> .sub { vertical-align:sub ;color:blue} .super {vertical-align: super;color:blue} </style> </head> <body> <h1>This is <b class="sub">subscript</b> text</h1> <br> <h1>This is <b class="super">superscript</b> text</h1> </body> </html>
CSS Box
In CSS,each HTML element has an associated box. Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas. The size of each area is specified by padding border and margin properties. The CSS padding properties define the space between the element border and the element content. The CSS border properties define the borders around an element. The CSS margin properties define the space around elements.
top
margin edge
margin border padding

padding-left border-left
margin-top border-top padding-top Padding edge content edge
padding-right
left margin-left
content
marginright
right
border-right
padding-bottom border-bottom margin-bottom bottom border edge
Content-the actual content of the HTML element. Padding-the area between the content and the border. Border-the edge of the element Margin-the area between the element and adjacent elements.
CSS Box
Property
width height overflow
Description
Sets the width for a section of page Sets the height for a section of page When something has a width or height defined that is shorter than the element, this property decides whether to hide the remaining part of the element, or show it. By default it is set to visible.
Values
length / percentage length / percentage scroll visible hidden auto
float
The float style allows us to wrap text around left an object. You can float something to the right left or right of an object. none
border
A shorthand property for setting all of the border-width properties for the four borders in one border-style declaration border-color Eg.{ border:thin outset blue } Sets the color of the four borders, can have color_name from one to four colors Sets the style of the four borders, can have none from one to four styles hidden dotted dashed solid double groove ridge inset outset A shorthand property for setting the width thin of the four borders in one declaration, can medium have from one to four values thick length
border-color border-style
border-width
<html> <head> <style> p.one { border-width:10px;border-style:solid; border-color:blue} p.two { border-width:10px;border-style:solid; border-color:red blue green pink} </style> </head> <body> <p class=one>paragraph-1</p> <p class=two>paragraph-2</p> </body> </html>
<html> <head> <style> p.one { border:15px groove blue;background-color:yellow} p.two {border:0.5cm ridge green;background-color:yellow} p.three { border:1em inset magenta;background-color:yellow} p.four {border:10px outset red;background-color:yellow} </style> </head> <body> <p class="one">paragraph-1.paragraph-1.paragraph-1.paragraph-1. </p><br> <p class="two">paragraph-2.paragraph-2.paragraph-2.paragraph-2.</p><br> <p class="three">paragraph-3.paragraph-3.paragraph-3.paragraph-3.</p><br> <p class="four">paragraph-4.paragraph-4.paragraph-4.paragraph-4.</p><br> </body> </html>
border-left
A shorthand property for setting all of the properties for the left border in one declaration Eg. { border-left:20px groove #ff0000 } { border-left:thick inset rgb(0,255,255) }
border-left-width border-style border-color
border-left-color border-left-style
Sets the color of the left border Sets the style of the left border
border-color border-style thin medium thick length
border-left-width Sets the width of the left border
border-right
A shorthand property for setting all of the border-right-width properties for the right border in one border-style declaration border-color Eg. { border-right:20px groove #ff0000 } { border-right:thick inset rgb(0,255,255) }
border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border
border-top
A shorthand property for setting all of the properties for the top border in one declaration Eg. { border-top:20px groove #ff0000} { border-top:thick inset rgb(0,255,255) }
border-top-width border-style border-color
border-top-color border-top-style border-top-width
Sets the color of the top border Sets the style of the top border Sets the width of the top border
border-bottom
A shorthand property for setting all of the border-bottom-width properties for the bottom border in one border-style declaration border-color Eg. { border-bottom:20px groove #ff0000} { border-bottom:thick inset rgb(0,255,255) } Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border border-color border-style thin medium thick length
border-bottomcolor border-bottomstyle border-bottomwidth
border-bottom
A shorthand property for setting all of the border-bottom-width properties for the bottom border in one border-style declaration border-color Eg. { border-bottom:20px groove #ff0000} { border-bottom:thick inset rgb(0,255,255) } Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border border-color border-style thin medium thick length
border-bottomcolor border-bottomstyle border-bottomwidth
<html> <head> <style> .left {border-left:thick solid red} .right {border-right:thick dotted blue} .top {border-top:10px dashed rgb(255,0,255);} .bottom{border-bottom:10px double rgb(0,255,0)} </style> </head> <body> <p class="left right">paragraph-1.paragraph-1.paragraph-1.paragraph1.paragraph-1.paragraph-1. </p><br><br> <p class="top bottom">paragraph-2.paragraph-2.paragraph-2.paragraph2.paragraph-2.paragraph-2.paragraph-2.paragraph-2. </p> </body> </html>
Property
margin
Description
A shorthand property for setting the margin properties in one declaration.(accepts +ve or ve values) Eg. margin: 1px 2px 3px 4px (top, right, bottom, left ) margin: 1px 2px 3px (top, right and left, bottom) margin: 5% 1% (top and bottom, right and left) margin: 3px (top, bottom, right and left)
Values
margin-top margin-right margin-bottom margin-left
margin-left
Sets the left margin of an element. It always start from length / the left side of the browser window. percentage / auto length / percentage / auto
margin-right Sets the right margin of an element. It always start from the right side of the browser window. margin-top marginbottom
Sets the top margin of an element. It always start from length / the top of the browser window. percentage / auto Sets the bottom margin of an element. It always start length / from the bottom of the browser window. percentage / auto
<html> <head> <style> p.one { margin:30px 40px 60px 20px;background-color:yellow} p.two { margin-left:50%;margin-top:5%;background-color:pink} </style> </head> <body> <p class="one">paragraph-1.paragraph-1.paragraph-1.paragraph-1.paragraph1.paragraph-1.paragraph-1.paragraph-1. </p> This is a normal text.This is a normal text.This is a normal text.This is a normal text.This is a normal text.This is a normal text. <p class="two">paragraph-2.paragraph-2.paragraph-2.paragraph-2.paragraph2..</p> </body> </html>
Property
padding
Description
A shorthand property for setting all of the padding properties in one declaration. .(accepts zero or +ve values) Eg. padding: 1px 2px 3px 4px (top, right, bottom, left ) padding: 1px 2px 3px (top, right and left, bottom) padding: 5% 1% (top and bottom, right and left) padding: 3px (top, bottom, right and left) Sets the left padding of an element. It is the padding from the left inside the border
Values
padding-top padding-right padding-bottom padding-left
padding-left padding-right
length / percentage
Sets the right padding of an element. It is the padding length / percentage from the right inside the border Sets the top padding of an element. It is the padding from the top inside the border length / percentage length / percentage
padding-top
padding-bottomSets the bottom padding of an element. It is the padding from the bottom inside the border
<html> <head> <style> p.one { border:20px groove green; padding:30px 40px 60px 20px; background-color:yellow} p.two { border:10px dotted blue; padding:1cm 2cm 2.5cm;background-color:pink} </style> </head> <body> <p class="one">paragraph-1.paragraph-1.paragraph-1.paragraph1.paragraph-1.paragraph-1. </p> <p class="two">paragraph-2.paragraph-2.paragraph-2.paragraph2.paragraph-2.paragraph-2.</p> </body> </html>
//css_box_1.html <html> <head> <style> p { width : 200px ; height : 100px ; overflow : scroll ; border-style : double ; border-width : 10px ; border-color : blue ; margin-left : 20px ; margin-top : 50px ;margin-right:20px; margin-bottom:50px; padding-left : 10px ; padding-right : 10px ; padding-top : 10px ; padding-bottom : 10px; background-color:yellow;float:left } </style> </head> <body> <p>This is paragraph. This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.</p> This is a normal text. This is a normal text.This is a normal text.This is a normal text.This is a normal text.This is a normal text.This is a normal text. </body> </html>
//css_box_2.html <html> <head> <style> p { width : 30% ; height : 100px ; overflow :hidden ; border-style : solid ; border-width : thick ; border-color : blue ; } </style> </head> <body> <p>This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph.</p> </body> </html>
<html> //css_box_3.html <head> <style> p { width : 200px ; height : 100px ; overflow : auto ; border-style : solid ; border: 8px solid #336; border-top: 10px solid #ccf;border-left: 10px solid #ccf; background-color:#ccc } </style> </head> <body> <p>This is paragraph. This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.</p> </body> </html>
<html> //css_box_4.html <head> <style> p { padding:50px ;background-color:pink } span { padding:10px 20px 30px;background-color:yellow} div { padding:10px 20px 30px 40px ;background-color:cyan ;color:blue } td { padding:30px 5px;background-color:magenta} </style> </head> <body> <p>This is the paragraph. <span>This is the span inside of the paragraph.</span> This is the paragraph.</p> <div> <h1>heading-1</h1> <ul>li>list-1<li>list-2</ul> </div> <table> <tr><td>Roll no.<td>Name</tr> <tr><td>1<td>aaaaaa</tr> </table></body></html>
<html> //css_box5.html <head> <style> * {margin:10px} .outset { border-style:outset;border-width:4px; border-color:blue} </style> </head> <body> <hr class="outset" > <input type="button" class="outset" value="click me"><br><br> <input type="text" class="outset"><br><br> <table > <tr><td class="outset">test1<td class="outset">test2</tr> <tr><td class="outset">12<td class="outset">23</tr> </table> </body> </html>
Generated content in CSS

The main aim of using style sheet is to separate appearance from content. But now we are talking about generated content.
(name generated content itself means that introduce some content into our style sheets, which is then added in html page )
Generated content can be used to personalize the appearance of the web page and to create custom-made lists. (using style sheet we can not only style but can also add
content in an html page)
CSS allows us to automatically generate content that doesn't belong to the document tree.
There are two aspects to generating content with CSS: 1) Firstly we must decide where the content is to be inserted . 2) Then we need to specify what the content to be inserted is . Where is the content to be inserted? To answer this question, we use the two CSS pseudo-elements. Pseudo-elements: Using this, we can insert generated content before or after an element is generated. Pseudo-elements allow us to specify when to automatically generate content. The pseudo-elements are: E:before - to generate content before the E element. E:after - to generate content after the E element. (E is selector or html tag)
//The :before and :after pseudo elements are appended to selectors(HTML tags), and allow the insertion of generated content before or after selected elements. For example, we want to put something before all headings of level 1. The pseudo element selector to do this is h1:before.
What content is to be inserted? To do this we use a new property, content. The content property: The content property allows us to define the content that will be automatically generated (or inserted) before or after selected elements. The possible values of this property are space delimited lists of: Regular string content Embedded objects, such as an image Quotation marks(or Generated Quotes) Counters (ie: for lists) Attribute values(the result of the unique attr() function)
Property
content
Description
Values
Generates content in a document. Used string with the :before and :after pseudourl elements counter(name) counter(name, list-styletype) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote
counter-increment Sets how much the counter increments none on each occurrence of a selector identifier number counter-reset quotes Sets the value the counter is set to on each occurrence of a selector Sets the type of quotation marks none identifier number none string string
Regular string content: Using this value of content ,we can insert a string of text before or after the selected element by wrapping that text in double quotation after the keyword content. Eg. We want to generate the content "Chapter " before every heading level 1. h1:before{content: "Chapter "}
<html> <head> <style> h1:before{content:Chapter-} </style> </head> <body> <h1>1:HTML <h1>2:CSS <h1>3:XML </body> </html> Output: Chapter-1:HTML Chapter-2:CSS Chapter-3:XML
<html> <head> <style> .headers:before{content: "::";color: red} p:before{content: "@";color: blue} p:after{content: "@";color: green} </style> </head> <body> <h3 class="headers">This is header 1</h3> <h3 class="headers">This is header 2</h3> <h3 class="headers">This is header 3</h3> <p>This is paragraph</h3> </body> </html>
<html> <head> <style> :before { content:"<>";color:red} :after {content:"</>";color:red} </style> </head> <body> <h1>This is header-1</h1><br> <p>This is a paragraph</p> <form> Name:<input type="text"> </form> <br><br>
<table border=1> <tr> <td>Roll No. <td>Name</tr> </table> <ul> <li>HTML <li>CSS </ul> </body> </html>
Image content : Using this value of content ,we can insert image before or after the selected element . <html> <head> <style> body:before {content:url(leaf.gif)} body:after {content:url(ball1.gif)} ul:before{content:url(ball.gif)} </style> </head> <body> <h1>This is header-1</h1> <ul> <li>HTML <li>CSS </ul> </body></html>
Quotation marks(or Generated quotes): CSS allows you to define quotation marks for any element. To do this,a two-step procedure is required: 1) First define the quotation marks. To define a set of quotation marks,use a selector and thequotes. The possible values are none or space delimited lists of pairs: <string1> <string2> to define each level of quotation ( <string1> for the open quotation mark & <string2> for the close quotation mark ) 2) Then insert the quotation marks using the :before or :after pseudo-elements with the content property set to one of these four values: open-quote | close-quote | no-open-quote | no-close-quote
The supported values for your quote content are: open-quote: Inserts an opening quotation mark as per the "quotes" property close-quote: Inserts a closing quotation mark as per the "quotes" property no-open-quote: No opening quotation is inserted. no-close-quote: No closing quotation is inserted. ( Generated quotes in CSS is accomplished by first defining the kind of quotes you want via the "quotes" property. quotes are always specified in pairs, one for the opening and one of the closing quotation mark.)
<html> <head> <style> q {quotes:'"' '"';color:purple} q>q {quotes:'"' '"';color:red} q>q>q {quotes:'<' '>';color:blue} q:before {content:open-quote} q:after {content:close-quote} </style> </head> <body> <q>This is the first level <q>This is the second level <q>This is the third level </q></q></q>Normal text. </body> </html>
<html> <head> <style> p.one{quotes: '"' '"';} p.one:before{content: open-quote} p.one:after{content: close-quote} p.two{quotes: '<' '>';} p.two:before{content: open-quote} p.two:after{content: close-quote} </style> </head> <body> <p class=one">This is para-1.</p> <p class=two"> This is para-2.</p> </body> </html>
<html> <head> <style> td,a{quotes:"[" "]";color:red} td:before,a:before{content:open-quote} td:after,a:after{content:close-quote} </style> </head> <body> <table border=1> <tr><td>RN<td>Name</tr> <tr><td>12<td>aaaaaaaa</tr> </table> <a href="">This is a link.</a> </body> </html>
Counters (ie: for lists): Counter is a super-charged versions of numbered lists. Counters have a name, and a style. Counter is created using the counter function & then use in conjunction with the content property to insert markers into a document. The form of counter function is, counter( identifier, list-style). where, identifier is the name of the counter whose value we want to insert & list-style(optional) specifies what style of counter we want (for instance lower-roman.). These styles are the same as those for elements of type list-style(for list)
To set up a counter in CSS, we rely on the following two properties: counter-reset : purpose:The counter-reset property sets the value of a named counter. counter-reset takes the name of the counter to reset. It also takes an optional integer, to which it sets the value of the identified counter. If no integer is specified, the default value is 0.(The integer specifies at what number the counter begins at.) syntax: counter-reset :identifier number (number can be +ve,0,-ve) Eg. h1 { counter-reset: counter1 -1 } h1 { counter-reset: counter2 99 } or h1 { counter-reset: counter1 -1 counter2 99 }
counter-increment: purpose:The counter-increment property increments the value of a named counter by a certain amount. counter-increment takes the name of the counter to increment. It also takes an optional integer, which specifies by how much the counter is incremented each time. If no integer is specified, the counter is incremented by one. Zero and negative integers are allowed. syntax: counter-increment :identifier number (number can be +ve,0,-ve) Eg. h1 { counter-increment: counter1 -1 } h1 { counter-increment: counter2 99 } or h1 { counter-increment: counter1 -1 counter2 99 }
<html> <head> <style> body { counter-reset: chapter }/* Create a chapter counter scope*/ h2:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter 1 } /* Add 1 to chapter */ h2 { counter-reset: section } /* Set section to 0 */ h3:before { content: counter(chapter) "." counter(section) " "; counter-increment: section 1} /* Add 1 to section*/ </style> </head><body> <h2>JavaScript Basics</h2> <h3>Structure</h3> <h3>Event handlers</h3> <h3>Loops</h3> <h2>Objects</h2> <h3>Window</h3> <h3>Form</h3> </body></html>
<html> <head> <style> body { counter-reset: chapter }/* Create a chapter counter scope*/ h2:before { content: "Chapter " counter(chapter,upper-roman) ". "; counter-increment: chapter 1 } /* Add 1 to chapter */ h2 { counter-reset: section } /* Set section to 0 */ h3:before { content: counter(chapter,upper-roman) "." counter(section,lower-alpha) " "; counter-increment: section 1} /* Add 1 to section*/ </style> </head><body> <h2>JavaScript Basics</h2> <h3>Structure</h3> <h3>Event handlers</h3> <h3>Loops</h3> <h2>Objects</h2> <h3>Window</h3> <h3>Form</h3></body></html>
Attribute values: Using this value of content ,we can insert attribute value of element before or after the selected element with attr function. Syntax : attr(attribute) -This function allow us to insert the value of the attribute attribute of the given element
Eg. <html> <head><title>generated content in CSS</title> <style> a[href]:after { content: "( " attr(href) " )"; padding-left: 0.2em; color: #0ff; font: small "Courier New"} img[alt]:after{content:"("attr(Alt) ")"} </style> <body> <a href="cf.html">click here</a> <img src="b_right1.gif" alt="image"> </body> </html>
Practical-4 Design a cascaded style sheet using CSS boxes, positioning, lists & generated content.
Measurements
Unit
Description percentage inch centimeter millimeter
% in cm mm
em
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses one ex is the x-height of a font (x-height is usually about half the font-size) point (1 pt is the same as 1/72 inch) pica (1 pc is the same as 12 points) pixels (a dot on the computer screen)
ex pt pc px
CSS Background The CSS background properties define the background effects of an element. Property Description Values
background A shorthand property for setting all background properties in one declaration background-color background-image background-repeat backgroundattachment background-position
backgroundattachment
Sets whether a background scroll image is fixed or scrolls with fixed the rest of the page color-rgb color-hex color-name transparent
background-color Sets the background color of an element
Property
background-image background-position
Description
Sets an image as the background Sets the starting position of a background image
Values
url(URL) none top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat
Sets if/how a repeat background image will repeat-x be repeated repeat-y no-repeat
<html> //css_backg_1.html <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>
<html> //css_backg_2.html <head> <style type="text/css"> body { background-image: url(bulbon.gif'); background-repeat: repeat } </style> </head> <body> <p> This example demonstrates how to repeat a background image. </p> </body> </html> // re-execute by replacing background-repeat: no-repeat / repeat-x / repeat-y
<html> //css_backg_3.html <head> <style type="text/css"> body { background-image:url(bulbon.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center } </style> </head> <body> <p> This example demonstrates how to place the image on the page. For this to work in Mozilla, the background-attachment property must be set to "fixed".</p> </body></html> // re-execute by replacing background-position: 30% 20%; (using %) or 50px 100px ;(using pixels)-it indicates image position
<html> //css_backg_4.html <head> <style type="text/css"> body { background-image: url(blue hills.jpg'); background- repeat: no-repeat; background-attachment: fixed } //scroll </style> </head> <body> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> <p>The image will not scroll with the rest of the page</p> </body> </html>
<html> //css_backg_5.html <head> <style type="text/css"> body {background-color: yellow ;color:blue} </style> </head> <body> <h1>This is header 1</h1> <h2 style=background-color: green;color:yellow> This is header 2</h2> <h3>This is header 3</h3> <p style="color: magenta"> <b>This is a paragraph<b></p></body> </html>

CSS

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS

Uploaded by

Copyright:

Available Formats

CSS

Style Sheets Can Save a Lot of Work

How to Insert a Style Sheet

CSS text (contd.)

Sets an image as the list-item marker none / url(URL)

Sets where the list-item marker is placed in the list

static / relative / absolute / fixed

margin border padding

margin-top border-top padding-top Padding edge content edge

padding-bottom border-bottom margin-bottom bottom border edge

border-left-width border-style border-color

border-color border-style thin medium thick length

border-left-width Sets the width of the left border

border-color border-style thin medium thick length

border-top-width border-style border-color

border-top-color border-top-style border-top-width

border-color border-style thin medium thick length

border-bottomcolor border-bottomstyle border-bottomwidth

border-bottomcolor border-bottomstyle border-bottomwidth

Generated content in CSS

Description percentage inch centimeter millimeter

background-color Sets the background color of an element

You might also like