160 likes | 242 Views
Explore the fundamentals of Cascading Style Sheets (CSS) with tutorial exercises and download links for practical sessions covering HTML integration, style creation, selectors, inheritance, text formatting, layout management, and graphic inclusion. Enhance your web design skills efficiently and create clean, compliant code while optimizing page layout and structure.
E N D
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 • 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
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
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)
http://reference.sitepoint.com/css/css 3 Layers of Web Page Construction
Page 37 CSS Structure Declaration Property Value Selector p { color: red; font-size: 1.5em; } Declaration Block
The Box Model Margin Border Padding Page 101
Element Dimensions 10 px padding all around 300px W Content 300 + 10 + 10 = 320 px wide element
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
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
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