Cascading Style Sheets
Though invisible tables are still often used to control page layout, it's important that you know that Cascading Style Sheets (CSS) are being used by more and more advanced web designers to control the look and feel of multiple pages simultaneously. Similar in many ways to MS Word stylesheets, CSS allows you to control the placement of text and images on the page with pixel-level accuracy unmatched by the earlier use of invisible tables.
How does it do this? By drawing on a set of variables—contained in a single file or "stylesheet"—that controls the appearance and placement of various textual and visual elements on all pages of a site. Not only does this lead to greater consistency of layout and appearance across the entire site, but it effectively divorces style from content, making it easy to change features for the entire site by making changes in only one location.
For example, suppose that early in your site design you decided that all <h1> headers should be blue and all <h2> headers red. But after three weeks and 40 pages of site development, your boss suddenly tells you to reverse this color scheme, making all <h1> headers red and vice versa. If you had set those colors using the deprecated <font> tag, you would have to make such changes on every single page of the site. Either that, or run a global search and replace command and pray this didn't mess up your code.
But with Cascading Style Sheets, you simply call up the main external style sheet and make the change in this one file. The result shows up in all XHTML files throughout the entire site because each of these files is linked to the style sheet through a simple line of code placed in the head of each page, as shown below:
This short line of code points the browser to a CSS file called "313.css," which contains information about how the browser should interpret features and placement of common XHTML elements, such as headers and paragraphs, as well as modified tags known as classes and IDs.
CSS in Dreamweaver
CSS is well supported within Dreamweaver, allowing you to achieve some interesting visual effects that add to the consistency and quality of your entire site. This week, we'll take it slow and learn how to use CSS to centralize decision making about such choices as font family, font size, color, and other variables. To explore Dreamweaver's support of CSS, read the assignment for this week and try your hand at controlling typography for a simple page.
Though we'll focus this week mostly on external style sheets, there are actually three types types of CSS altogether:
- External Style Sheets - <style> tags within the head of many documents point to a single file with a .css extension.
- Document-level Style Sheets - all selectors, properties, and values are placed between <style> tags within the head of a single document.
- Inline Styles - properties and values applied within individual tags on only a single page, like so:
- <H1 style="color:green">Headline Name</H1>
For this week's lesson, we will be working only with external style sheets to achieve the following textual effects for your entire site:
- Specify font families for headers within your site.
- Add color to all main headers within the site.
- Set line height for all paragraphs.
- Add colored roll-overs to all links within your site.
Specifying Font Families and Colors
As a general rule in graphic design, headers and display type are set in a family of fonts known as sans-serif fonts, which means they do not have small serif swoops off the ends of the letters. Members of the sans-serif font family include some of the most commonly found typefaces on PC and Apple machines: Arial, Helvetica, and Geneva. Because of their wide-spread use, these typefaces are often set by designers as the default for H1 - H6 headers. So let's explore how to set these font families and other text properties in Dreamweaver's CSS external stylesheet.
First, you must assign various HTML elements to various sections of your page's text. In Dreamweaver, you can do so by selecting sections of text and then choosing the elements on the Text Insert window, shown below:
Next, you'll connect an external stylesheet to your page and specify what typeface and other properties apply to various HTML elements you've designated in your page. We'll review how to do this in class this week.
Setting Line Height
Many studies of reader habits and graphic design have found that slightly increasing the space or "leading" between lines of text improves reader comprehension. Explore Dreamweaver's CSS to see how to achieve this effect for most body text on your pages.
Link Color and Rollovers
Controlling link color for various states requires using the CSS pseudo-class element. Explore Dreamweaver's CSS to see how you control link colors for the following four states:
- a:link
- a:hover
- a:visited
- a:active
CSS Web Resources
There is much to learn about CSS beyond what we've covered in this week's lesson. Later in the semester, we'll try our hand at using CSS for page layout and examine other websites that make extensive use of CSS. For those who want to look ahead or learn more about CSS in detail, consult the links below to see how leading designers are using CSS to design page layouts without HTML tables. :
- The CSS Vault - tutorials and examples of CSS site designs.
- CSS Home Page - the official CSS site of the World Wide Web Consortium.
- CSS tutorial - a collection of CSS how-to's from the Web Design School.
- CSS Zen Garden - a very unique site that shows the power of CSS, with a variety of sheets applied to the same HTML file.
- Glish.com - a site dedicated to using CSS to replace HTML tables in page design.
- CSS Beauty - another site dedicated to promoting use of CSS in web design.