Cascading Style Sheets - PowerPoint PPT Presentation

cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets PowerPoint Presentation
Download Presentation
Cascading Style Sheets

play fullscreen
1 / 11
Cascading Style Sheets
117 Views
Download Presentation
knoton
Download Presentation

Cascading Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Cascading Style Sheets Dreamweaver

  2. Styles • Determine how the HTML code will display • Gives designers much more control • Over the look of the page • With page layout

  3. 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

  4. Syntax of Style Rules • Syntax: • Selector { definition;} • Selector { attribute: value;} h1 { font-size: 130%; }

  5. Style Rules • h1,h2,h3,h4 { color: #ff3300; font-family: Arial; } • h1{ font-size: 160%; }

  6. Three Kinds of Styles • Inline • Internal (Embedded) • External (Linked)

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

  8. 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>

  9. 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

  10. Methods • Redefine HTML tags • Create a new .Class • Advanced Selectors • Multiple tags • #ID’s

  11. 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