CSS - PowerPoint PPT Presentation

About This Presentation
Title:

CSS

Description:

p STYLE='color: red; This paragraph is styled in red. / p ... External Style sheet. Creates repetition - one of the elements of design ... – PowerPoint PPT presentation

Number of Views:185
Avg rating:3.0/5.0
Slides: 18
Provided by: juliewh3
Category:
Tags: css | styled

less

Transcript and Presenter's Notes

Title: CSS


1
CSS Cascading Style Sheets
2
Style Sheet
  • A style sheet is made up of style rules that tell
    a browser how to present a document.

3
Why CSS
  • CSS enables you to separate the presentation of
    the page from its structure
  • Increased Performance
  • Easy Document Maintenance
  • More Flexibility
  • Increase Accessibility

4
Embedded Style
  • Added directly into a html document
  • Located in the ltheadgt section

5
Embedded Style Directions
  • enter a tag you want to define characteristics
    for, such as h1
  • a semi-colon () must separate each
    characteristic.
  • list the characteristics you want the tag to use.
  • This will affect all the information that uses
    the h1 tag on your web page.

6
Style Structure
Declaration Block
body background-color FFCCFF
Selector
Value
Property
7
Inline or Local Style
  • In the ltbodygt of your document
  • Just effects a paragraph, sentence or word.

ltp STYLE"color red gtThis paragraph is styled
in red. lt/pgt
8
Problem with Inline and Embedded Styles
  • Only applies to a single html document
  • Problems with consistency between web pages from
    the web site

9
Better solutionExternal Style sheet
  • Creates repetition - one of the elements of
    design
  • a consistent look and feel to your site
  • One place to make changes
  • It is a text file with the extension .css

10
Style Sheet Summary
  • External Style Sheet- linked to it
  • Embedded Style Sheet
  • - appears in the Head section
  • Inline Style Sheet- appears in the Body section

11
The Cascade
  • External Style Sheet
  • is overridden by
  • Embedded Style Sheet
  • which is overridden by
  • Inline Style Sheet

12
Inheritance
13
Inheritance
14
Inheritance
15
Inheritance
16
Inheritance
17
Summary
  • 3 types of styles
  • External (link to ) overridden by
  • Embedded ( ltheadgt) overridden by
  • Inline (ltbodygt)
  • Inheritance
  • The children will inherit the properties of the
    parent
Write a Comment
User Comments (0)
About PowerShow.com