Your SlideShare is downloading. ×
  • Like
  • Save
Class5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
576
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Show limits of inline styling of many repeated elements such as DT’s and DD’s

Transcript

  • 1. Class 5
  • 2. Overview ofCascading Style Sheets (CSS)
    2
    Greater typography and page layout control
    Style is separate from structure
    Styles can be stored in a separate document and linked to from the web page
    Potentially smaller documents
    Easier site maintenance
  • 3. CSS: Separating Structure and Design
    CSS in Action:
    http://www.csszengarden.com
  • 4. Types of Cascading Style Sheets
    Inline Styles
    Embedded Styles
    External Styles
    Imported Styles
    4
  • 5. Inline Styles
    Inline Styles
    • Configured in the body of the Web page
    • 6. Use the style attribute of an XHTML tag
    • 7. Apply only to the specific element
    5
  • 8. Inline CSS
    Inline CSS
    Configured in the body of the Web page
    Use the style attribute of an XHTML tag
    Apply only to the specific element
    Example: configure red color text in an <h1> element:
    <h1 style="color:#ff0000">Heading text is red</h1>
    6
  • 9. Inline CSS
    Separate style rule declarations with ;
    <h1 style="color:#FF0000; background-color:#cccccc">This is displayed as a red heading with gray background</h1>
    7
  • 10. Embedded CSS
    Embedded Styles
    • Configured in the header section of a Web page.
    • 11. Use the XHTML <style> element
    • 12. Apply to the entire Web page document
  • CSS Syntax
    Style sheets are composed of "Rules" that describe the styling to be applied
    Each Rule contains a Selector and a Declaration
    Declaration for the Selectors are contained in Curly Braces
    Each Declaration is ended with a semi-colon
    9
    td { color: #3399cc; }
    selector
    property
    value
  • 13. Common FormattingCSS Properties
    See Table 3.1 Common CSS Properties, including:
    background-color
    color
    font-family
    font-size
    font-style
    font-weight
    line-height
    margin
    text-align
    text-decoration
    width
    10
  • 14. CSS Embedded Styles
    Embedded style
  • 15. CSS Selectors
    CSS style rules can be configured for an:
    HTML element selector
    class selector
    id selector