Embed Size (px)
Citation preview
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
