1 / 11

Cascading Style Sheets

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

knoton
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related