Understanding CSS in Dreamweaver CS4: A Guide to Web Design Fundamentals
This guide covers the essentials of Cascading Style Sheets (CSS) as applied in Dreamweaver CS4 for effective web site creation. It explains the structure of XHTML and CSS, differences between inline, embedded, and linked styles, and the significance of cascading in styling elements. Learn how to format your website consistently, redefine tags, and establish styles for common elements like navigation bars and headlines. With practical CSS examples and a focus on best practices, this resource equips you to create visually appealing and well-structured websites.
Understanding CSS in Dreamweaver CS4: A Guide to Web Design Fundamentals
E N D
Presentation Transcript
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
RedefineExisting 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
