The Cascading Style Sheets
system significantly increases the design capabilities for a Web site.
If you are a designer used to working with desktop publishing tools, you
may recognize many familiar features in CSS, including the following:
Commands for specifying and applying font characteristics
Traditional layout measurement systems and terminology
Pinpoint precision for page layout
Cascading Style Sheets are able to apply many
features with a simple syntax that is easy to understand. If you're
familiar with the concept of using styles in a word processing program,
you'll have no trouble grasping style sheets.
Here's how the process works: CSS instructions are
given in rules; a style sheet is a collection of these rules. A rule is a
statement made up of an HTML or custom style, called a selector, and its defined properties and values. For example, a CSS rule that makes the contents of all <h1> tags (the selector) red (#FF0000 in hexadecimal, the value) in color (the property) looks like the following:
h1 {
color: #FF0000;
}
A CSS property and its associated value are collectively referred to as a declaration.
In the following sections, you see the various
characteristics of CSS — grouping, inheritance, and cascading — working
together to give style sheets their flexibility and power.
1. Grouping properties
A Web designer often needs to change several style
properties at once. CSS enables you to group declarations by separating
them with semicolons. For example:
h1 {
color:#FF0000;
font-family:Arial,Helvetica,sans-serif;
font-size:18pt;
}
The Dreamweaver interface provides a wide range of
options for styles. If you look at the code, you find that Dreamweaver
groups your selections exactly as shown in the preceding example. You
can group selectors as well as declarations. Separate grouped selectors
with commas rather than semicolons. For example:
h1, h2, p, em {
color:green;
text-align:left;
}
2. Inheritance of properties
CSS rules can also be applied to more than one tag
through inheritance. The HTML tags enclosed within the CSS selector can
inherit most, but not all, CSS declarations. Suppose you set all <p> tags to the color red. Any tags included within a <p>...</p> tag pair then inherit that property and are also colored red.
Inheritance is also at work within HTML tags that
involve a parent-child relationship, such as a list. Whether numbered
(ordered, <ol>) or bulleted (unordered, <ul>), a list comprises any number of list items, designated by <li> tags. Each list item is considered a child of the parent tag, <ol> or <ul>. Look at the following example:
ol {
color:#FF0000;
}
ul {
color:#0000FF;
}
Using the preceding example, all ordered list items
appear in red (#FF0000); all unordered list items appear in blue
(#0000FF). One major benefit to this parent-child relationship is that
you can change the font for an entire page with one CSS rule. The
following statement accomplishes this change:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
The change is possible in the previous example because the <body> tag is considered the parent of every HTML element on a page.
3. Cascading characteristics
The term cascading
describes the capability of a local style to override a general style.
Think of a stream flowing down a mountain; each ledge encountered by the
stream has the potential to change its direction. The last ledge
determines the final direction of the stream. In the same manner, one
CSS rule applying generally to a block of text can be overridden by
another rule applied to a more specific part of the same text.
For example, you've defined, using style sheets, all normal paragraphs — <p> tags — as a particular font in a standard color, but you mark one section of the text using a little-used tag such as <samp>. If you make a CSS rule altering both the font and color of the <samp> tag, the section takes on the characteristics of that rule.
The cascading aspect of style sheets also works on a
larger scale. One of the key features of CSS is the capability to define
external style sheets that can be linked to individual Web pages,
acting on their overall look and feel. Indeed, you can use the cascading
behavior to fine-tune the overall Web site style based on a particular
page or range of pages. Your company may, for instance, define an
external style sheet for the entire company intranet; each division
could then build upon that overall model for its individual Web pages.
For example, suppose that the company style sheet dictates that all <h2> headings are in Arial and black. One department could output its Web pages with <h2> tags in Arial, but colored red rather than black, whereas another department could make them blue.
|
Dreamweaver has a great learning tool built in to
help you understand inheritance and cascading: the Relevant CSS tab of
the Tag inspector. Select any tag and you can see what CSS rules are
being applied to the selection; rules that are applied, but not taking
effect because of inheritance or cascading properties, are marked with a
red strikethrough.
|
|
4. Defining new class and ID selectors for extended design control
Redefining existing HTML tags is a step in the right
direction toward consistent design, but the real power of CSS comes into
play when you define custom selectors. One type of custom selector is
called a class; class selector names
always begin with a period. To style all copyright notices at the bottom
of all pages of a Web site to display in 8-point Helvetica all caps,
you could define a tag as in this simple example:
.cnote {
font-family:Helvetica, sans-serif;
font-size:8pt;
font-transform:uppercase
}
If you define this style in an external style sheet
and apply it to all 999 pages of your Web site, you have to alter only
one line of code (instead of all 999 pages) when the edict comes down
from management to make all the copyright notices a touch larger. After a
new class has been defined, you can apply it to any range of text, from
one word to an entire page.
Classes are typically applied to more than one
element on a page. You could, for example, have more than one paragraph
styled as a copyright notice in various parts of the page. A custom tag
intended to be applied to a single element, such as a <div> tag that contains the footer content, is called an ID selector. An ID selector is identified by its beginning pound sign — technically called an octothrope — for example, #footer.
If you want the footer content to really stand out, you could style it
with white type against a black background with a red border. The CSS
rule looks like this:
#footer {
color: #FFFFFF;
background: #000000;
border: thin solid #FF0000;
}
An ID selector is applied to a tag through the self-named id attribute, minus the pound sign. Thus, the <div> tag that holds the footer content is coded like this:
<div id="footer">Footer content goes here</div>
Designers use a combination of class and ID selectors
— as well as other types of selectors — when laying out the page. It's
considered a best practice to avoid using class selectors when the CSS
rule is intended to be applied only once on the page; in those
situations, an ID selector is the better choice.
5. Specificity
The specificity of a CSS rule determines which rule
takes effect when two or more rules conflict. For example, let's say you
have one rule that sets the color of an <h1> tag to dark gray, like this:
h1 { color: #333333; }
and another rule that sets the color of a class called .alert to bright red:
.alert { color: #FF0000; }
What would happen when the browser encounters code like this:
<h1 class="alert">Attention all shoppers!</h1>
As you might suspect, the .alert rule would be applied and the <h1> tag would appear red. This occurs because the .alert selector is more specific than the <h1> tag selector. The W3C CSS specification (no relation) provides a different weight for each kind of selector.
A rule's specificity is noted with four comma-separated values. For example, the specificity for the <h1> rule is
0,0,0,1
because there is one tag element in the selector, whereas the specificity for the .alert rule is
0,0,1,0
because there is one class element in the selector.
Any positive value in the second-to-last column outweighs any value in
the last column.
The formula for creating specificity is as follows:
Total inline styles, total ID selectors, total class and
pseudo-class selectors, total tag elements
Inline styles are the most specific — and the most
rarely used these days — so they trump any other type of selector. If
two rules have the same specificity and are applied to the same
selection, the rule that comes later in the style sheet — because it is
physically closer to the code — wins.
6. How styles are applied
CSS applies style formatting to your page in one of three ways:
6.1. External style sheets
An external style sheet is a file containing the CSS
rules; it links one or more Web pages. One benefit of linking to an
external style sheet is that you can customize and change the appearance
of a Web site quickly and easily from one file.
Two different methods exist for working with an external style sheet: the link method and the import method. Dreamweaver initially defaults to the link method, but you can also choose import if you prefer.
For the link method, a line of code is added outside of the <style> tags, as follows:
<link href="mainstyle.css" rel="style sheet" type="text/css">
The import method writes code within the style tags, as follows:
<style type="text/css">
<!--
@import url("newstyles.css");
-->
</style>
If you compare the link and the import methods, you see that the link
method was previously better supported among browsers, but all major
browsers support both techniques now. As a general rule, many developers
use the HTML element <link> to attach external style sheets to an HTML page and the CSS @import property from a CSS file to import other CSS documents.
6.2. Embedded styles
Embedded styles are those typically written into the actual file at the top of a Web page within a <style>...</style>
tag pair. Placing style sheets within the header tags has become a
convention that many designers use, although you can also apply a style
sheet anywhere on a page.
The <style> tag for a Cascading Style Sheet identifies the type attribute as text/css. A sample embedded Class listing looks like the following:
<style type="text/css">
<!--
p {
font-family: "Arial, Helvetica, sans-serif";
color: #000000;
}
.cnote {
font: 8pt "Arial, Helvetica, sans-serif";
text-transform: uppercase;
}
h1 {
font: bold 18pt Arial, Helvetica, sans-serif;
color: #FF0000;
}
-->
</style>
The HTML comment tags <!-- and --> prevent older browsers that can't read style sheets from displaying the CSS rules.
6.3. Inline styles
The final method of applying a style inserts it within HTML tags using the style attribute — a technique known as inline styles.
This method is the most local of all the techniques; that is, it is
closest to the tag it is affecting and, therefore, has ultimate control —
because of the cascading nature of style sheets as previously
discussed.
|
As my mother used to say, "Just because you can do
something, doesn't mean you should." Generally, inline styles are not
used because they exert such a high level of control, and modifying the
style must be done on an item-by-item basis, which defeats much of the
purpose of CSS.
|
|
When you create an AP element within Dreamweaver, you
notice that the positioning attribute is a Cascading Style Sheet inline
within a <div> tag like the following:
<div id="apDiv1" style="position:absolute; visibility:inherit; left:314px; i
top:62px; width:194px; height:128px; z-index:1">
</div>
For all its apparent complexity, the Cascading Style
Sheets system becomes straightforward in Dreamweaver. Often, you won't
have to write a single line of code. But even if you don't have to write
code, you should understand the CSS fundamentals of grouping,
inheritance, and cascading.
NOTE
Dreamweaver gives anyone
working with CSS layouts a big boost with the newly introduced starter
pages available through the Layout category of the New Document dialog
box. With a full array of layout variations, you can quickly get a solid
head start without touching a single CSS rule. Naturally, you're free —
and encouraged — to customize the styles.
