Building Managing Web Sites Cascading Style Sheets 11262020

Cascading Style Sheets (CSS) • HTML goal to separate content from presentation. • CSS allows application of styles and spacing for presentation/displaying HTML page elements. • Single page can receive presentation information from multiple CSS sources. • Single HTTP resource can be formatted with different CSS based on the client type (print, Braille, etc. ) • CSS achieves separation of content from presentation. 11/26/2020 © 1999, 2000 Valtara Digital Design 2

• Without CSS <H 1>TITLE</H 1> Returns TITLE • With CSS … H

Cascading Style Sheets (CSS) • Browsers have always had a default “style sheet” that specifies the presentation of HTML elements (e. g. , headings, margins, font, size, etc. ). • During "browser wars" HTML elements created that mixed content with presentation (e. g. , FONT). • HTML 4 recommends replacing these deprecated elements with style sheets. 11/26/2020 © 1999, 2000 Valtara Digital Design 4

CSS Syntax • CSS applies a style to an element, using a property/value pair: H 1 { color: green } selector { declaration } • Declaration can have multiple property/value pairs H 1 { color: green; font-family: sans-serif } • Spacing, line breaks in declaration not important H 1 {color: blue; font-family: sans-serif} 11/26/2020 © 1999, 2000 Valtara Digital Design 5

More CSS Syntax • Group properties with commas to save space H 1, H 2, H 3 {font-family: verdana, helvetica, sans-serif } • Separate multiple properties with semicolons: H 1, H 2, H 3 { font-size: 15 pt; font-weight: bold } • Over 50 different properties can be applied to HTML elements (“selectors”) • Most important properties include: font-family, font-size, color, margins, background 11/26/2020 © 1999, 2000 Valtara Digital Design 6

Implementing Style Sheets Inline styles • Use inline styles sparingly as they are essentially equivalent to the <FONT> element. • Use SPAN elements to apply styles to elements on single line of text. <p style="color: green">Green paragraph</p> <p><span style="color: green">Green</span> paragraph</p> 11/26/2020 © 1999, 2000 Valtara Digital Design 7

Embedded Style Sheets Embedded style sheets • Make sure interior of style sheet is commented so older browsers won't render the contents. • Add a style sheet type to ensure future compatibility. <head> <style type="text/css"> <!-h 1 { color: green } --> </style> <title>Home page of sample site</title> </head> <h 1>Sample Site Title</h 1> 11/26/2020 © 1999, 2000 Valtara Digital Design 8

Linked Style Sheets • Linked style sheets offer the primary benefits of CSS -- edits to one place changes many pages. • A linked style sheet lists is a list of declarations. • Default. htm would include. . . <head> <link rel="stylesheet" href=”mystyle. css" type="text/css"> <title>Home page of sample site</title> </head>. . . • mystyle. css could be as simple as. . . H 1 {color: green} 11/26/2020 © 1999, 2000 Valtara Digital Design 9

CSS Classes • How do you apply styles to only specific HTML elements? • Define a class in the style sheet using a period. greentext {color: green} • In the page, specify the class in the HTML element. . . <H 1 class="greentext">My Green Title</H 1> • You can also create classes specific to an element H 1. greenhead { color: green } 11/26/2020 © 1999, 2000 Valtara Digital Design 10

Specifying Margins • Specify margins for the whole page on the BODY element BODY { margin-left: 100 px; margin-right: 100 px; margin-top: 50 px } • You can specify margins for specific elements as well… TABLE {margin: 100 px 50 px} 11/26/2020 © 1999, 2000 Valtara Digital Design 11

Specifying colors These all specify the same color for <EM> element. EM { color: red } /*natural language */ EM { color: #f 00 } /* #rgb */ EM { color: #ff 0000 } /* #rrggbb */ EM { color: rgb(255, 0, 0) } /* integer range 0 - 255 */ EM { color: rgb(100%, 0%) } /* float range 0. 0% - 100. 0% */ 11/26/2020 © 1999, 2000 Valtara Digital Design 12

Specify Font Sizes • Font sizes can be expressed in points, pixels, inches, relative sizes, or percentage of default (i. e. 40 pt, 60 px, 1. 5 in, 0. 9 em, or 200%). • Absolute sizes: – [small | medium | large | x-large ] • Relative sizes: – [ larger | smaller ] • Examples: P { font-size: 12 pt; } EM { font-size: 150% } EM { font-size: 1. 5 em } 11/26/2020 © 1999, 2000 Valtara Digital Design 13

CSS Cascade • Multiple CSS style sheets can influence presentation simultaneously, but only one source can apply to a specific element/property combination. • CSS-enabled browsers need a process to determine which source wins a conflict. – Browser reads all CSS sources – Browser reads through HTML document hierarchy. – Where specific element/property declarations are in conflict, the declaration "closest" to the content "wins. " 11/26/2020 © 1999, 2000 Valtara Digital Design 14

CSS Inheritance • When there is no specific element/property declaration, inheritance is used to determine style. • Styles applied to a parent element generally are inherited by the child elements. <style type="text/css"> Body { color: green } </style> • The example above will apply green to all HTML elements (e. g. , h 1, h 2, etc. ) unless over-ridden by another style declaration. • Some style declarations are not inherited (e. g. , background). 11/26/2020 © 1999, 2000 Valtara Digital Design 15

Major Browsers Supporting CSS • Internet Explorer 3. x – ok support for CSS 1, several key differences with IE 4. x support • Internet Explorer 4. x – Good support for CSS 1 • Internet Explorer 5. x – Excellent CSS 1 support, ok CSS 2 support • Netscape 4. x – Ok support • Opera 3. 5 – Good support for CSS 1 and some support for CSS 2 11/26/2020 © 1999, 2000 Valtara Digital Design 16

Browser Statistics Sources • Some sources on current browser statistics: http: //browserwatch. internet. com/ http: //www. upsdell. com/Browser. News/stat. htm http: //dreamink. com/design 5. html 11/26/2020 © 1999, 2000 Valtara Digital Design 17

11/26/2020 © 1999, 2000 Valtara Digital Design 18

11/26/2020 © 1999, 2000 Valtara Digital Design 19

11/26/2020 © 1999, 2000 Valtara Digital Design 20

11/26/2020 © 1999, 2000 Valtara Digital Design 21

Cascading Style Sheets • Browsers unevenly implement CSS rendering. Check out http: //css. nu/pointers/bugs. html • Start out slow and incrementally. Don’t use too many features until you are very familiar with techniques. • Style sheets are great, when they work! -- be patient and prepared to spend some time implementing them. 11/26/2020 © 1999, 2000 Valtara Digital Design 22