CSS

CSS stands for Cascading Style Sheet g y

What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one .

There are three ways of inserting a style sheet: External Style Sheet Internal Style Sheet Multiple Style Sheets .How to Insert a Style Sheet When a browser reads a style sheet it will sheet. format the document according to it.

gif")} {background- . An example of a style sheet file is shown below: hr {color: sienna} p {margin-left: 20px} {marginbody {background-image: url("images/back40. Each page must link to the file.External Style Sheet An external style sheet is ideal when the style is applied to many pages.css"/> </head> The browser will read the style definitions from the file mystyle. section: section: <head> h d <link rel="stylesheet" type="text/css“ href="mystyle. The file should not contain any html tags. pages. Your style sheet should be saved with a . The <link> tag goes inside the head tag. With an external style sheet you can change the look of an sheet.css. style sheet using the <link> tag. entire Web site by changing one file. An external style sheet can be written in any text editor. mystyle css and format the document according to it.css extension.

gif")} {background</style> </head> The browser will now read the style definitions.Internal Style Sheet An internal style sheet should be used when a single y g document has a unique style. . like this: <head> head <style type="text/css"> hr {color: yellow} p {margin-left: 20px} {marginbody {background-image: url("images/puppy. You define internal styles in the head section by using the <style> tag. and format the document according to it.

Multiple Style Sheets If some properties have been set for the same selector in different style sheets. the values will b i h it d f diff t t l h t th l ill be inherited from the more specific style sheet. texttext-align: left. an external style sheet has these properties f the h3 selector: ti for th l t h3 { color: red. fontfont-size: 8pt } And an internal style sheet has these properties for the h3 selector: . For example.

i ht fontfont-size: 20pt The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the textfontinternal style sheet.h3 { texttext-align: right. . fontfont-size: 20pt } If the page with the internal style sheet also links to the g y external style sheet the properties for h3 will be: color: red. texttext li t t-align: right.

The example below shows how to define a center aligned paragraph. } . and each property can take a value. The property is the attribute you wish to change.g {text-align:center.color:red} . with a red text color: p{ {text. put quotes around the value: p {font-family: "sans serif"} {fontNote: If you wish to specify more than one property.CSS Syntax The CSS syntax is made up of three parts: a selector. and surrounded by curly braces body {color: black} Note: If the value is multiple words. l t a property and a value: selector {property: value} The selector is normally the HTML element/tag you wish to define. you must separate each property with a semicolon. The property and value are separated by a colon.

y can describe one property on each line.color: black. you y .To make the style definitions more readable.font- . like this: p{textp{text-align: center.font-family: arial} black.

css / </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> .Example-1 ExampleThe HTML file be o links to a e te a sty e e e below s an external style sheet with the <link> tag: <html> <head> <link rel="stylesheet" type text/css href="ex1.External Style Sheet .css" /> type="text/css" href ex1.

css): s s t e sty e s eet e (e css) body { backgroundbackground-color:yellow. } . } p { marginmargin-left:50px. } h2 { color:blue.This is the style sheet file (ex1. } h1 { fontfont-size:36pt.

com" target="_blank">This is a link</a></p> g p </body> </html> .Example .2 <html> <head> <link rel="stylesheet" type="text/css" li k l " l h " " / " href="ex2.google.css" /> </head> <body> <h1>This is a header 1</h1> <hr /> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.

margina:link {color:green.This is the style sheet file (ex2.} a:active {color:blue.} a:hover {color:black.margin-left:15px.font-size:20pt.css) s s t e sty e s eet e (e css) body {background-color:tan.} {font-size:11pt.fonthr {color:navy.} p {font-size:11pt.} a:visited {color:yellow.} {color:maroon.} {backgroundh1 {color:maroon.} .

</p> </body> </html> . left:0px.Internal Sty e S eet – Text on Image te a Style Sheet e to age <html> <head> <h d> <style type="text/css"> img.x { position:absolute.gif" width="100" height="180"> <p>Default z-index is 0 Z-index -1 has lower priority </p> z0. top:0px. Zpriority. z-index:-1. index:} </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="bulbon.

url('smiley. backgroundbackground-repeat: nono-repeat.<html> <head> <style t t l type="text/css"> type="text/css" "t t/ "> body { backgroundbackground-image: url('smiley.gif'). backgroundbackground-attachment: fixed } </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 th page</p> < >Th i ill t ll ith th t f the </ > </body> .gif').