Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3
Cascading Style Sheets
17
CASCADING STYLE SHEETS Beginning Web Site Creation: Dreamweaver CS4
description
Cascading Style Sheets. Beginning Web Site Creation: Dreamweaver CS4. What’s the difference?. XHTML. CSS. Describes the structure Content . Collection of styles Formatting body { background-color: #006; margin-left: 100px; margin-right: 100px; }. - PowerPoint PPT Presentation
Transcript of Cascading Style Sheets
CASCADING STYLE SHEETS
Beginning Web Site Creation: Dreamweaver CS4
What’s the difference?XHTML CSS
Describes the structure
Content<p> </p>
Collection of styles Formatting body {
background-color: #006;margin-left: 100px;margin-right: 100px;
}
<body><h1><a href="index.html">Dreamweaver CS4</a></h1><p> </p>
<h4><a href="Dreamweaver Winter2010 Syllabus.pdf">Syllabus</a> <p>Thanks to everyone who made our first festival a great success! Keep checking back. We are working on the new site and should have it posted soon!</p></body></html>
How powerful is this?? Look @
http://www.csszengarden.com/
Cascading Style Sheets Style sheets come in three types:
Inline Part of the tag
<h1 style=“color: #6887c”> Inside text
<strong>HELP!</strong> Embedded
In the <head> tag Just for this page
Linked (or External) On a separate sheet Controls all the pages linked to it.
Preferred!
Preferred? Why? Format your site consistently
Redefine existing tags Create styles for commonly used elements
Navbars Headlines
Define styles that align and position elements – divs (divisions)
Make global changes
Cascading?The term Cascading, refers to which element takes precedence when it comes to styling a page, a line, or any other element on the page. Generally, the closer the better
Class wins over Internal wins over External
How does it work?
CSS Rule:h1 {color: #6887c;}
Declaration block
Selector
Selectors
Redefine Existing tags Type/Tag selectors Style all the tags on a Web consistently
(h1, h2, body . . . ) Found in or are part of the HTML code There are two types of CSS tags
Class ID
Or, Create your own -- Class Class selectors
Can be used many times on a page Formats selected things Naming
Starts with a . No spaces No other punctuation
CSS Example: .sidebarLeft HTML Example: <p class=“sidebarLeft”> </p>
Create your own -- ID ID selectors
Identify specific items (#navbar, #footer) Should be unique to the page Can only be used once Naming
Starts with a # Case sensitive No spaces
CSS Example: #footer HTML Example: <p ID=“footer”> </p>
How does CSS Code work? h1 {color: #6887c}
Selector
How does it work? Declaration Block
h1 {color: #6887c}
Property
How does it work? Declaration Block
h1 {color: #6887c}
Value
More h1 {
font-family: Arial, Helvetica, sans-serif;font-size: x-large;font-weight: bold;text-align: left;
}
#navbar {font-family: Arial, Helvetica, sans-serif;font-size: x-small;font-weight: bold;text-align: center;vertical-align: bottom;height: 20px;
}
Attributes Type
Font family, size, color, decoration, weight Background
Color, image Block
Spacing, alignment, indents Box
Placement of elements on a page Border
Weight, color, line styles of the selection box
Attributes List
Ordered, unordered Positioning Extensions
Page breaks
