1. Introduction to CSS Brendan Knight

2. What is CSS Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice or even in Braile CSS can enable multiple pages to share formatting A user may choose from various style sheets provided by the designers or even provide their own And your favourite ……CSS can produce frameless web pages

3. Where is CSS Author styles can be specified as 1. Inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute 2.Embedded style, blocks of CSS information inside the HTML itself 3.External style sheets, i.e., a separate CSS file referenced from the document

4. Putting it Inline Style attribute applied to a HTML tag Style attribute applied to a HTML tag This is rendered first priority This is rendered first priority eg eg This paragraph is styled in red with the New Century Schoolbook font, if available. This paragraph is styled in red with the New Century Schoolbook font, if available.

5. Embedded style The STYLE element is placed in the document HEAD The STYLE element is placed in the document HEAD eg eg

6. Embedded Second priority Second priority Used when one page has a unique style Used when one page has a unique style Cant be used for multiple pages Cant be used for multiple pages

7. External Style Sheets Details provided on a separate sheet with NO Tags Details provided on a separate sheet with NO Tags In the form something.css file In the form something.css file Linked in the Head of a HTML page using the tag Linked in the Head of a HTML page using the tag Can be referenced by multiple pages Can be referenced by multiple pages 3 rd priority in rendering 3 rd priority in rendering

8. Part Example External Style Sheets style. cssbody { background-color:whitesmoke ;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:purple;}a:hover { font- family:Verdana, Arial, Helvetica, sans-serif;color:purple;background-color: white}h1 { font-family:Verdana, Arial, Helvetica, sans-serif;font- size:36px}h2 { font-family:Verdana, Arial, Helvetica, sans-serif;font- size:30px}h3 { font-family:Verdana, Arial, Helvetica, sans-serif;font- size:24px}#leftcontent { position: absolute;left:10px;top:77px;width:100px;background:lavender;border:0p x solid darkblue;}#centercontent { top:77px;background:whitesmoke;margin-left:99px;margin- right:119px;border:1px solid darkblue;voice-family: "\"}\"";voice-family: inherit;margin-left:101px;margin-right:121px;}html>body #centercontent { margin-left:101px;margin-right:121px;}#rightcontent { position: absolute;right:10px;top:77px;width:120px;background:plum;border:0px solid darkblue;}#banner { background:lavender;height:50px;border-top:0 solid darkblue;border-right:0 solid darkblue;border-left:0 solid darkblue;voice-family: "\"} etc etc

9. Cascading The style sheet with the highest priority controls the content display. The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on by a source of lower priority. Declarations not set in the highest priority source are passed on by a source of lower priority. Can go all the way to a style specified by the user. Can go all the way to a style specified by the user. This process is called cascading. This process is called cascading.

10. Advantages of CSS Flexibility. Flexibility. Separation of content from presentation Separation of content from presentation When CSS is used effectivelya global style sheet can be used to affect and style elements site-wide. When CSS is used effectivelya global style sheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made by editing rules in the global style sheet If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made by editing rules in the global style sheet Bandwidth,A style sheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded Bandwidth,A style sheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded

11. Where next http://www.w3schools.com/css/ http://www.w3schools.com/css/ http://www.w3schools.com/css/ Linking Style Sheets to HTML Linking Style Sheets to HTML CSS Structure and Rules CSS Structure and Rules http://www.maketemplate.com/csstemplat e/cssout.php http://www.maketemplate.com/csstemplat e/cssout.php http://www.maketemplate.com/csstemplat e/cssout.php http://www.maketemplate.com/csstemplat e/cssout.php