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

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

CSS 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 May be in the webpage or in a “Master List”

CSS 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 A “Master List” allows the Cascade Style to Cascade throughout the web pages.

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

Hello

Greater control CSS Hello

Greater control CSS Font Size Number of Pixels Number of Centimeters, Millimeters, Inches Points ( 1/72”) EM ( size of upper case “M”) Ex ( size of a lower case “x” ) Borders Padding Margin Etc…

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

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: Rule HTML, Class or ID DECLARATION value; }

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

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

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

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

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

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

Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded External

Basic Syntax of a CSS Rule CSS Rules may be: I nline HTML My Dog Fido CSS My dog Fido

Basic Syntax of a CSS Rule CSS Rules may be: I nline HTML My Dog Fido CSS My dog Fido CSS My dog Fido

Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded

Basic Syntax of a CSS Rule My web site My Dog Fido Style Info Here!

Basic Syntax of a CSS Rule My web site My Dog Fido h1 {color: red; font-size: 20px; background-color: blue;} My Dog Fido

My web site Adam Billy Charlie David Edward Frank George My web site h1 { color: red;} Adam Billy Charlie David Edward Frank George HTML onlyWith embedded CSS

Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded External

My web url(pets.css) Important people Adam Billy Charlie David Edward Frank George pets.html h1 { color: red; font-size: 20px; } h2 { color: green; font-size: 30px; } h3 { color: blue; font-size: 50px; } p { color: black; font-size: 10px; background-color: white; border: 5px dotted green; } pets.css

Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded External Priority

CSS Shortcuts p { color: red; } p { color: #FF0000; } FF F 0 0 p { color: #F00; }

CSS Shortcuts My Dog Fido Border width style color Border-right h1 { border-right-width: 5px; border-right-style: dotted; border-right-color: #F00; } h1 { border: 5px dotted red; }

CSS Shortcuts My Dog Fido Padding h1 { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } h1 { border: 5px dotted red; } My Dog Fido

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

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

Padding h1 { padding: 5px; } All four sides are equal My Dog Fido

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

CSS Cascading Style Sheets. Class website