introduction to cascading style sheets
Download
Skip this Video
Download Presentation
Introduction to Cascading Style Sheets

Loading in 2 Seconds...

play fullscreen
1 / 16

Introduction to Cascading Style Sheets - PowerPoint PPT Presentation


  • 48 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introduction to Cascading Style Sheets' - oren-spence


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

ad