CSS Basics LIS Webteam April 8, 2011

Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like tables to set aside parts of a page Cascading Style Sheets designed to solve a number of problems

Why CSS 1.Separate style from structure, this lets programs and devices read HTML for what it is 2.Cascading feature allows designers multiple levels of control 3.Global style changes that took tedious work to do in HTML now takes seconds in CSS

What can you do with CSS Colors, backgrounds Fonts Spacing Page positioning

CSS Basic structure selector { property : value; } Examples h1 { color : red; } p { background-color : #00FFFF; } a { font-size : 3em; color : red; }

Cascades 3 levels of CSS Checked in this order, each overrides the previous 1.External style sheet – applies to many pages 2.Internal style sheet – applies to all of 1 page 3.Inline style – applies to single HTML element

3 levels of CSS External Style Sheet Ex.: eportfolio.css

3 levels of CSS Internal Style Sheet Placed near the beginning of an html document between the tags, and enclosed by the tags.

3 levels of CSS Internal Style Sheet Example p {color: white; } body {background-color: blue; } White text on a blue background! The “Internal Style Sheet”

How code from the last slide would appear in your browser:

3 levels of CSS Inline Style Overrides the rules in the external and internal style sheets. Goes right in the HTML tag as an attribute. Ex.: <p style = “background = red;”>blah blah blah

That would look something like:

The CSS Box Model Content Padding Margin Border

Page Layout Block 1 Block 2 Block 3 Block 4

Time to Practice Work through the handout exercises Play around with CSS RGB Calculator!

Where to go for more LIS Webteam w3schools.com

Good Luck, Have Fun