CSS Cascading Style Sheets - PowerPoint PPT Presentation

About This Presentation
Title:

CSS Cascading Style Sheets

Description:

CSS Cascading Style Sheets – PowerPoint PPT presentation

Number of Views:378
Avg rating:3.0/5.0
Slides: 24
Provided by: evlUicEdu
Learn more at: http://www.evl.uic.edu
Category:
Tags: css | cascading | sheets | style

less

Transcript and Presenter's Notes

Title: CSS Cascading Style Sheets


1
CSSCascading Style Sheets
2
  • CSS
  • Define style, look and presentation of the
    website content
  • The way the content is presented on the page is
  • determined in presentation rules in a style sheet
  • layout
  • background
  • fonts
  • margins

3
  • CSS
  • HTML
  • is used to create logical structure of the
    content
  • CSS
  • is used to style the structured content

4
  • Styles
  • External
  • reside in a separate style sheet file (.css)
  • Internal
  • located inside individual page within ltstylegt
    tags inside the documents ltheadgt
  • Inline
  • located within HTML tags themselves and only
    apply to the content of that tag

5
  • Style rules Cascade
  • There are rules to determine which style takes
  • precedence while multiple styles can cover a
    single
  • element of the page.
  • When style rules conflict, the laws of
  • the cascade determine how the conflict is
    settled.
  • The order of the cascade
  • 1. External
  • 2. Internal
  • 3. Inline

6
  • Style rules Cascade
  • The closer a rule to the element getting styled,
    the more power the rule has in the battle of
    conflicting style rules.
  • The order of the cascade
  • 1. External
  • 2. Internal
  • 3. Inline

7
  • Creating CSS
  • A style rule begins with a selector.
  • Selector can be a
  • tag
  • class
  • id

8
  • Creating a style rule for a tag
  • Redefining the style for a tag gives considerable
    control,
  • as HTML has a tag for nearly any type of text you
    need to
  • format.
  • ltbodygt

9
  • DW CSS categories
  • Type
  • Background
  • Block
  • Box
  • Border
  • List
  • Positioning
  • Extensions

10
  • Creating a Custom class
  • Style rule for something that does not have tag
    as
  • a label.
  • Custom name for a style when you create a class.
  • .myclass
  • Do not create classes for something that has a
    logical tag, like heading lth1, h2, h3, etcgtYou
    can simply redefine one of the heading tags.
  • HTML is used to create logical structure of the
    content
  • CSS used to style the structured content

11
  • Creating a Custom class
  • Class is reusable
  • Many different elements on a page can be assigned
    to the
  • same class
  • Class has a name
  • A period (.) precedes a class selector
  • Named elements can be targeted with CSS rules

12
  • Creating a Custom class
  • Class style rule must be applied to the
  • document

13
  • Creating advanced selectors (IDs, pseudo-class
  • selectors)
  • An ID can only be used once per page
  • IDs are unique
  • Used in addition to CSS rules
  • A hash or pound sign () precedes an id selector.
  • subnav

14
  • Creating advanced selectors (IDs, pseudo-class
  • selectors)
  • ID is another method for assigning names
  • ID style rule must be applied to the
  • document

15
  • Pseudo-class selectors
  • Names so because pseudo-states dont actually
    exist in
  • the document
  • The user must do something to trigger the
    pseudo-class,
  • such as
  • Visit a link
  • Hover over a link
  • Browse over a visited link

16
  • Pseudo-class selectors L-V-H-A order
  • LoVeHAte
  • A link
  • A visited
  • A hover
  • A active

17
  • Verification of styles
  • Previewing in a variety of browsers and browser
    versions
  • Sometimes the style rules conflict and you get
    enexpected
  • results

18
  • CSS for layout
  • Box model
  • DIV
  • division

19
  • CSS for layout
  • Box model
  • Margin
  • Border
  • Padding
  • Content
  • CSS set rules
  • For each element

20
  • CSS for layout
  • Position and float
  • Static
  • Relative
  • Inherit
  • Absolute
  • Fixed

21
  • CSS for layout
  • Position and float
  • Static
  • Relative
  • Inherit
  • Absolute
  • Fixed

22
  • CSS for layout
  • Float
  • Left
  • Right
  • None
  • Inherit

23
  • CSS for layout
  • Elements in HTML can nest.
  • Inside the body tag might be a div (division)
    named
  • content with a div named newitem nested inside.
  • Each of these nested elements exist in a
    parent-child
  • relationship that allows CSS properties to be
    inherited.
  • The child elements are descendants of the parent
    and
  • inherit properties from them.
Write a Comment
User Comments (0)
About PowerShow.com