Web Pages Week 10 CSS Next week CSS

Web Pages Week 10 CSS Next week: CSS – Part 2

CSS = Cascading Style Sheets. Add style to web documents fonts, colors, spacing, size, links

CSS May be in the webpage or in a “Master List” CSS = Cascading Style Sheets. Separates the style and the layout of a web page. • The Style is defined in one place • The Layout is defined in the web pages

CSS A “Master List” allows the CSS = Cascade Cascading Style Sheets. Style to throughout the web pages. Separates the style and the layout of a web page. • The Style is defined in one place • The Layout is defined in the web pages

? CSS y h W • Easier updating & maintenance • Coding is reduced • Pages are more efficient, require less bandwidth • Standardized layout • Greater control

<font size=“ 1… 7”> Hello Hello • Greater control Hello

• Greater control CSS <font size=“ 1… 7”> Hello

• Greater control CSS <font size=“ 1… 7”> s r e d r o B g n i d Font Size d Pa gin r Number of Pixels a M Number of Centimeters, Millimeters, c Inches … t E Points ( 1/72”) EM ( size of upper case “M”) Ex ( size of a lower case “x” )

Box Model Top margin outer edge Padding Width Height Padding Right margin Bottom margin Left margin

Positioning • Static • Relative • Absolute • Fixed • Letter Spacing • Word Spacing • List Style • Line Height

Pseudo-selectors • First Line • First Letter • Link • Hover • Visited

Basic Syntax of a CSS Rule Selector { property: value; } HTML, Class or ID DECLARATION

Basic Syntax of a CSS Rule Selector { property: value; } DECLARATION

Basic Syntax of a CSS Rule Example Selector { property: value; } h 1 { font-size: 20 px; }

Basic Syntax of a CSS Rule Example Selector { property: value; } h 1 { font-size: 20 px; color: red; }

Basic Syntax of a CSS Rule Example Selector { property: value; } h 1 { font-size: 20 px; color: red; border: 2 px solid blue; }

Basic Syntax of a CSS Rules may be: • Inline • Embedded • External

Basic Syntax of a CSS Rules may be: • Inline HTML <h 1> <font color=“red”>My Dog Fido</font></h 1> CSS <h 1 style=“color: red; ”> My dog Fido</h 1>

Basic Syntax of a CSS Rules may be: • Inline HTML <h 1> <font color=“red”>My Dog Fido</font></h 1> CSS <h 1 style=“color: red; ”> My dog Fido</h 1> CSS <h 1 style=“color: red; font-size: 20 px; ”> My dog Fido</h

Basic Syntax of a CSS Rules may be: • Inline • Embedded

Basic Syntax of a CSS Rule <html> <head> <title> My web site </title> </head> Style Info Here! <body> <h 1> <font color=“red”>My Dog Fido</font></h 1> </body> </html>

Basic Syntax of a CSS Rule <html> <head> <title> My web site </title> <style type=“text/css”> h 1 {color: red; font-size: 20 px; background-color: blue; } </style> </head> <body> <h 1>My Dog color=“red”>My Fido</h 1> <font Dog Fido</font></h 1> </body> </html>

HTML only <html> <head> <title> My web site </title> </head> <body> <h 1> <font color=“red”>Adam</font></h 1> <font color=“red”>Billy</font></h 1> <font color=“red”>Charlie</font></h 1> <font color=“red”>David</font></h 1> <font color=“red”>Edward</font></h 1> <font color=“red”>Frank</font></h 1> <font color=“red”>George</font></h 1> </body> </html> With embedded CSS <html> <head> <title> My web site </title> <style type = “text/css”> h 1 { color: red; } </style> </head> <body> <h 1>Adam</h 1> <h 1>Billy</h 1> <h 1>Charlie</h 1> <h 1>David</h 1> <h 1>Edward</h 1> <h 1>Frank</h 1> <h 1>George</h 1> </body> </html>

Basic Syntax of a CSS Rules may be: • Inline • Embedded • External

pets. html pets. css h 1 { color: red; font-size: 20 px; } h 2 { color: green; font-size: 30 px; } h 3 { color: blue; font-size: 50 px; } p { color: black; font-size: 10 px; background-color: white; border: 5 px dotted green; } <html> <head> <title> My web site </title> <style type=“text/css”> @import url(pets. css) </style> </head> <body> <p>Important people</p> <h 1>Adam</h 1> <h 2>Billy</h 2> <h 3>Charlie</h 3> <h 2>David</h 2> <h 2>Edward</h 2> <h 3>Frank</h 3> <h 1>George</h 1> </body> </html>

Basic Syntax of a CSS Rules may be: • Inline • Embedded • External Priority

CSS Shortcuts p { color: red; } p { color: #FF 0000; } FF 00 00 F 0 0 p { color: #F 00; }

CSS Shortcuts <h 1>My Dog Fido</h 1> My Dog Fido Border-right Border • width • style • color h 1 { border-right-width: 5 px; border-right-style: dotted; h 1 {border-right-color: border: 5 px dotted #F 00; } red; }

CSS Shortcuts <h 1>My Dog Fido</h 1> My Dog Fido Padding h 1 { padding-top: 5 px; padding-right: 5 px; padding-bottom: 5 px; padding-left: 5 px; }

1 4 My Dog Fido 2 3 Padding CSS ORDER 1. Top 2. Right 3. Bottom 4. Left h 1 { padding-top: 5 px; padding-right: 5 px; padding-bottom: 5 px; padding-left: 5 px; } 1 2 3 4 h 1 { padding: 5 px 5 px; }

1 4 My Dog Fido 2 3 Padding CSS ORDER 1. Top & bottom 2. Right & Left 1&3 2&4 h 1 { padding: 10 px 5 px; }

1 4 My Dog Fido 2 3 Padding All four sides are equal h 1 { padding: 5 px; }

1 4 My Dog Fido 2 3 Separate Declaration Quick Review h 1 { padding-top: 5 px; padding-right: 5 px; padding-bottom: 5 px; padding-left: 5 px; } Shorthand Declaration h 1 { padding: 5 px 5 px; } Top/bottom right/left h 1 { padding: 5 px; } All four sides equal h 1 { padding: 5 px; }

CSS Cascading Style Sheets. Class website