1 / 16

Introduction to Cascading Style Sheets

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.

oren-spence
Download Presentation

Introduction to Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Cascading Style Sheets

  2. 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)

  3. Course Objectives, Session 1 • Chapter 1: HTML for CSS • Chapter 2: Creating Styles & Style Sheets • Chapter 3: Selectors; Identifying What to Style • Chapter 4: Saving Time with Style Inheritance • Homework Tutorial: Inheritance pg 97-102

  4. Course Objectives, Session 2 • Chapter 5: Managing Multiple Styles, The Cascade • Chapter 6: Formatting Text • Chapter 7: Margins, Padding, and Borders • Chapter 8: Adding Graphics to Web Pages • Chapter 12: Introducing CSS Layout

  5. What is CSS A core technology that allows you to efficiently create and modify web page layout and design. First appeared in 1996. Benefits of CSS • Separate style from basic structure • Create clean, standards compliant code • Develop and maintain websites quickly • Allows HTML to be used as it should be (structure content)

  6. http://reference.sitepoint.com/css/css 3 Layers of Web Page Construction

  7. Page 37 CSS Structure Declaration Property Value Selector p { color: red; font-size: 1.5em; } Declaration Block

  8. The Box Model Margin Border Padding Page 101

  9. Element Dimensions 10 px padding all around 300px W Content 300 + 10 + 10 = 320 px wide element

  10. Element Dimensions 10 px padding all around 300px W Content 1 px border all around 300 + 10 + 10 = 320 px wide element 300 + 10 + 10 + 1 +1 = 322 px wide element

  11. Element Dimensions 10 px padding all around 300px W Content 25 px margin-left 1 px border all around 300 + 10 + 10 = 320 px wide element 300 + 10 + 10 + 1 +1 = 322 px wide element 300 + 10 + 10 + 1 +1 + 25 = 347 px wide element

  12. Element Dimensions 347 px wide 10 px padding all around 300px W Content 25 px margin-left 1 px border all around 300 + 10 + 10 = 320 px wide element 300 + 10 + 10 + 1 +1 = 322 px wide element 300 + 10 + 10 + 1 +1 + 25 = 347 px wide element

More Related