introduction to cascading style sheets
DESCRIPTION
Introduction to Cascading Style Sheets. Exercise Files. www.missingmanuals.com Top nav bar, click on “Missing CDs” Sub nav bar, click on “C” Scroll down to: CSS3: The Missing Manual, Third Edition Tutorial Downloads link (.zip file). Course Objectives, Session 1. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/1.jpg)
Introduction to Introduction to Cascading Style Cascading Style
SheetsSheets
![Page 2: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/2.jpg)
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)
![Page 3: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/5.jpg)
• 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
![Page 6: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/6.jpg)
http://reference.sitepoint.com/css/css
3 Layers of Web Page 3 Layers of Web Page ConstructionConstruction
![Page 7: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/7.jpg)
![Page 8: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/9.jpg)
![Page 10: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/10.jpg)
The Box ModelThe Box Model
MarginMargin
BorderBorder
PaddingPadding
Page 101
![Page 11: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/11.jpg)
![Page 12: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to Cascading Style Sheets](https://reader035.vdocuments.net/reader035/viewer/2022062217/56813034550346895d95cb1f/html5/thumbnails/16.jpg)