Introduction to Cascading Style Sheets

Introduction to Introduction to Cascading Style Cascading Style

SheetsSheets

Exercise FilesExercise Files

• www.missingmanuals.comwww.missingmanuals.com

• Top nav bar, click on “Missing CDs”Top nav bar, click on “Missing CDs”

• Sub nav bar, click on “C”Sub nav bar, click on “C”

• Scroll down to:Scroll down to:CSS3: The Missing Manual, Third EditionCSS3: The Missing Manual, Third Edition

• Tutorial Downloads link (.zip file)Tutorial Downloads link (.zip file)

• www.missingmanuals.comwww.missingmanuals.com

• Top nav bar, click on “Missing CDs”Top nav bar, click on “Missing CDs”

• Sub nav bar, click on “C”Sub nav bar, click on “C”

• Scroll down to:Scroll down to:CSS3: The Missing Manual, Third EditionCSS3: The Missing Manual, Third Edition

• Tutorial Downloads link (.zip file)Tutorial Downloads link (.zip file)

Course Objectives, Session 1Course Objectives, Session 1

• Chapter 1: HTML for CSSChapter 1: HTML for CSS

• Chapter 2: Creating Styles & Style SheetsChapter 2: Creating Styles & Style Sheets

• Chapter 3: Selectors; Identifying What to StyleChapter 3: Selectors; Identifying What to Style

• Chapter 4: Saving Time with Style InheritanceChapter 4: Saving Time with Style Inheritance

• Homework Tutorial: Inheritance pg 97-102Homework Tutorial: Inheritance pg 97-102

Course Objectives, Session 2Course Objectives, Session 2

• Chapter 5: Managing Multiple Styles, Chapter 5: Managing Multiple Styles, The Cascade The Cascade

• Chapter 6: Formatting TextChapter 6: Formatting Text

• Chapter 7: Margins, Padding, and BordersChapter 7: Margins, Padding, and Borders

• Chapter 8: Adding Graphics to Web PagesChapter 8: Adding Graphics to Web Pages

• Chapter 12: Introducing CSS LayoutChapter 12: Introducing CSS Layout

• Separate style from basic structureSeparate style from basic structure• Create clean, standards compliant codeCreate clean, standards compliant code• Develop and maintain websites quicklyDevelop and maintain websites quickly• Allows HTML to be used as it should be Allows HTML to be used as it should be

(structure content)(structure content)

What is CSSWhat is CSSA core technology that allows you to efficiently A core technology that allows you to efficiently create and modify web page layout and design. create and modify web page layout and design. First appeared in 1996.First appeared in 1996.

Benefits of CSSBenefits of CSS

http://reference.sitepoint.com/css/css

3 Layers of Web Page 3 Layers of Web Page ConstructionConstruction

CSS StructureCSS Structure

p { p { color: red; color: red; font-size: 1.5em;font-size: 1.5em;

}}

SelectorSelector PropertyProperty ValueValue

DeclarationBlock

DeclarationBlock

Page 37

DeclarationDeclaration

The Box ModelThe Box Model

MarginMargin

BorderBorder

PaddingPadding

Page 101

Element DimensionsElement Dimensions

300px W

Content

10 px padding all around10 px padding all around

300 + 10 + 10 = 320 px wide element300 + 10 + 10 = 320 px wide element

Element DimensionsElement Dimensions

300px W

Content

10 px padding all around10 px padding all around

300 + 10 + 10 = 320 px wide element300 + 10 + 10 = 320 px wide element

1 px borderall around

1 px borderall around

300 + 10 + 10 + 1 +1 = 322 px wide element300 + 10 + 10 + 1 +1 = 322 px wide element

Element DimensionsElement Dimensions

300px W

Content

10 px padding all around10 px padding all around

300 + 10 + 10 = 320 px wide element300 + 10 + 10 = 320 px wide element

1 px borderall around

1 px borderall around

300 + 10 + 10 + 1 +1 = 322 px wide element300 + 10 + 10 + 1 +1 = 322 px wide element

25 px margin-left

25 px margin-left

300 + 10 + 10 + 1 +1 + 25 = 347 px wide element300 + 10 + 10 + 1 +1 + 25 = 347 px wide element

Element DimensionsElement Dimensions

300px W

Content

10 px padding all around10 px padding all around

300 + 10 + 10 = 320 px wide element300 + 10 + 10 = 320 px wide element

300 + 10 + 10 + 1 +1 = 322 px wide element300 + 10 + 10 + 1 +1 = 322 px wide element

1 px borderall around

1 px borderall around

25 px margin-left

25 px margin-left

300 + 10 + 10 + 1 +1 + 25 = 347 px wide element300 + 10 + 10 + 1 +1 + 25 = 347 px wide element

347 px wide347 px wide