Introduction to cascading style sheets
This presentation is the property of its rightful owner.
Sponsored Links
1 / 16

Introduction to Cascading Style Sheets PowerPoint PPT Presentation


  • 28 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Introduction to cascading style sheets

Introduction to Cascading Style Sheets


Exercise files

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

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

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

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)


3 layers of web page construction

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

3 Layers of Web Page Construction


Css structure

Page 37

CSS Structure

Declaration

Property

Value

Selector

p {

color: red;

font-size: 1.5em;

}

Declaration

Block


The box model

The Box Model

Margin

Border

Padding

Page 101


Element dimensions

Element Dimensions

10 px padding all around

300px W

Content

300 + 10 + 10 = 320 px wide element


Element dimensions1

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 dimensions2

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 dimensions3

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


  • Login