Cascading style sheets
This presentation is the property of its rightful owner.
Sponsored Links
1 / 11

Cascading Style Sheets PowerPoint PPT Presentation


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

Cascading Style Sheets. Dreamweaver. Styles. Determine how the HTML code will display Gives designers much more control Over the look of the page With page layout. Style Sheet. List of Rules Each Rule has a Selector and a Definition Each Rule can have one or more Definitions

Download Presentation

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


Cascading style sheets

Cascading Style Sheets

Dreamweaver


Styles

Styles

  • Determine how the HTML code will display

  • Gives designers much more control

    • Over the look of the page

    • With page layout


Style sheet

Style Sheet

  • List of Rules

    • Each Rule has a Selector and a Definition

    • Each Rule can have one or more Definitions

    • Each Definition can be applied to one or more selector


Syntax of style rules

Syntax of Style Rules

  • Syntax:

    • Selector { definition;}

      • Selector { attribute: value;}

        h1 {

        font-size: 130%;

        }


Style rules

Style Rules

  • h1,h2,h3,h4 { color: #ff3300; font-family: Arial;}

  • h1{ font-size: 160%;}


Three kinds of styles

Three Kinds of Styles

  • Inline

  • Internal (Embedded)

  • External (Linked)


Inline

Inline

  • Very similar to regular HTML styles

  • Applied to each individual instance

  • <style =attribute:values>

    content

    </style>

  • Must be hand coded in Dreamweaver except with layers for positioning.


Internal

Internal

  • Placed in the <head> of your document

  • Rules are wrapped in style tags

  • Styles are wrapped in comment markers

    <style type =“text/css”>

    <!–

    H1 {

    font-size: 16px;

    } -->

    </style>


External

External

  • Totally separate from the HTML Document

  • Can be linked or imported

  • Referenced in the <head> section

  • <link rel=“stylesheet” href=“styles.css”>

  • @import “styles.css”

  • Can be used by many web pages


Methods

Methods

  • Redefine HTML tags

  • Create a new .Class

  • Advanced Selectors

    • Multiple tags

    • #ID’s


Layout

Layout

  • Use <div> tags for block elements

    • Create whitespace like a paragraph

    • Pulls content out of the page flow

  • Use <span> tags for inline elements

    • No break created

      • Like a wrapper for an element or section of text.

  • Layers use ID selectors


  • Login