Use this topic to learn the basic concepts of CSS such as CSS rules, selectors, inheritance, and more. Also, learn how to associate CSS with your web pages in Dreamweaver.

About Cascading Style Sheets

Cascading Style Sheets (CSS) is
a collection of formatting rules that control the appearance of
content in a web page. Using CSS styles to format a page separates content
from presentation. The content of your page—the HTML code—resides in
the HTML file, and the CSS rules defining the presentation of the
code reside in another file (an external style sheet) or in another
part of the HTML document (usually the head section). Separating
content from presentation makes it much easier to maintain the appearance
of your site from a central location because you don’t need to update
every property on every page whenever you want to make a change.
Separating content from presentation also results in simpler and cleaner
HTML code, which provides shorter browser loading times, and simplifies navigation
for people with accessibility issues (for example, those using screen readers).

CSS gives you great flexibility and control over the exact appearance
of your page. With CSS you can control many text properties including
specific fonts and font sizes; bold, italics, underlining, and text
shadows; text color and background color; link color and link underlining;
and much more. By using CSS to control your fonts, you can also
ensure a more consistent treatment of your page layout and appearance
in multiple browsers.

In addition to text formatting, you can use CSS to control the
format and positioning of block-level elements in a web page. A
block-level element is a standalone piece of content, usually separated
by a new line in the HTML, and visually formatted as a block. For
example, h1 tags, p tags, and div tags
all produce block-level elements on a web page. You can set margins
and borders for block-level elements, position them in a specific
location, add background color to them, float text around them,
and so on. Manipulating block-level elements is in essence the way
you lay out pages with CSS.

About CSS rules

A CSS formatting rule consists of two parts—the selector
and the declaration (or in most cases, a block of declarations).
The selector is a term (such as p, h1,a class
name, or an id) that identifies the formatted element, and the declaration block
defines what the style properties are. In the following example, h1 is
the selector, and everything that falls between the braces ({})
is the declaration block:

An individual declaration consists of two parts, the property
(such as font-family) and value (such as Helvetica).
In the previous CSS rule, a particular style has been created for h1 tags:
the text for all h1 tags linked to this style will be
16 pixels in size, Helvetica font, and bold.

The style (which comes from a rule, or a collection of rules)
resides in a place separate from the actual text it’s formatting—usually
in an external style sheet, or in the head portion of an HTML document.
Thus, one rule for h1 tags can apply to many tags
at once (and in the case of external style sheets, the rule can
apply to many tags at once on many different pages). In this way,
CSS provides extremely easy update capability. When you update a
CSS rule in one place, the formatting of all the elements that use
the defined style are automatically updated to the new style.

You can define the following types of styles in Dreamweaver:

Class styles let you apply style properties
to any element or elements on the page.

HTML tag styles redefine the formatting for
a particular tag, such as h1. When you create or
change a CSS style for the h1 tag, all text formatted
with the h1 tag is immediately updated.

Advanced styles redefine the formatting for
a particular combination of elements, or for other selector forms
as allowed by CSS (for example, the selector td h2 applies
whenever an h2 header appears inside a table cell.) Advanced
styles can also redefine the formatting for tags that contain a specific id attribute
(for example, the styles defined by #myStyle apply
to all tags that contain the attribute-value pair id="myStyle").

CSS rules can reside in the following locations:

External CSS style sheets

Collections of CSS rules stored in a separate, external CSS
(.css) file (not an HTML file). This file is linked to one or more
pages in a website using a link or an @import rule in the head section
of a document.

Internal (or embedded) CSS style sheets

Collections of CSS rules included in a style tag
in the head portion of an HTML document.

Inline styles

Defined within specific instances of tags throughout an HTML document.
(Using Inline styles is not recommended.)

Dreamweaver recognizes styles defined in
existing documents as long as they conform to CSS style guidelines. Dreamweaver also renders most applied styles
directly in Design view. (Previewing the document in a browser window,
however, gives you the most accurate “live” rendering of the page.) Some
CSS styles are rendered differently in Microsoft Internet Explorer,
Netscape, Opera, Apple Safari, or other browsers, and some are not
currently supported by any browser.

About cascading styles

The term cascading refers to the way a
browser ultimately displays styles for specific elements on a web
page. Three different sources are responsible for the styles you
see on a web page: the style sheet created by the author of the
page, the user’s customized style selections (if any), and the default
styles of the browser itself. The previous topics describe creating
styles for a web page as the author of both the web page and the
style sheet attached to that page. But browsers also have their
own default style sheets that dictate the rendering of web pages,
and in addition to that, users can customize their browsers by making selections
that adjust the display of web pages. The final appearance of a
web page is the result of the rules of all three of these sources
coming together (or “cascading”) to render the web page in an optimal
way.

A common tag—the paragraph tag, or <p> tag—illustrates
the concept. By default, browsers come with style sheets that define
the font and font size for paragraph text (that is, text that falls
between <p> tags in the HTML code). In Internet
Explorer, for example, all body text, including paragraph text,
displays in Times New Roman, Medium font by default.

As the author of a web page, however, you can create a style
sheet that overrides the browser’s default style for paragraph font
and font size. For example, you can create the following rule in
your style sheet:

p {
font-family: Arial;
font-size: small;
}

When a user loads the page, the paragraph font and font size
settings set by you as the author override the default paragraph
text settings of the browser.

Users can make selections to customize the browser display in
an optimal way for their own use. In Internet Explorer, for example,
the user can select View > Text Size > Largest
to expand the page font to a more readable size if they think the font
is too small. Ultimately (at least in this case), the user’s selection
overrides both the default browser styles for paragraph font size
and the paragraph styles created by the author of the web page.

Inheritance is another important part of the cascade. Properties
for most elements on a web page are inherited—for example, paragraph
tags inherit certain properties from body tags, span tags inherit
certain properties from paragraph tags, and so on. Thus, if you
create the following rule in your style sheet:

body {
font-family: Arial;
font-style: italic;
}

All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and italic because the paragraph tag inherits these properties from the body tag. You can, however, become more specific with your rules, and create styles that override the standard formula for inheritance. For example, if you create the following rules in your style sheet:

All body text will be Arial and italic except paragraph
(and its inherited) text, which will display as Courier normal (non-italic).
Technically, the paragraph tag first inherits the properties that
are set for the body tag, but then ignores those properties because
it has properties of its own defined. In other words, while page
elements generally inherit properties from above, the direct application
of a property to a tag always causes an override of the standard
formula for inheritance.

The combination of all of the factors discussed above, plus other
factors like CSS specificity (a system that gives different weight
to particular kinds of CSS rules), and the order of CSS rules, ultimately
create a complex cascade where items with higher priorities override
properties that have lower priorities. For more information on the
rules governing the cascade, inheritance, and specificity, visit www.w3.org/TR/CSS2/cascade.html.

About text formatting and CSS

By default, Dreamweaver uses Cascading Style Sheets (CSS) to format text. The styles that you apply to text using the Property inspector or menu commands create CSS rules that are embedded in the head of the current document.

You can also use the CSS Designer to create and edit CSS rules and properties. The CSS Designer is a much more robust editor than the Property inspector, and displays all CSS rules defined for the current document, whether those rules are embedded in the head of the document or in an external style sheet. Adobe recommends that you use the CSS Designer (rather than the Property inspector) as the primary tool for creating and editing your CSS. As a result, your code will be cleaner and easier to maintain.

About Shorthand CSS properties

The CSS specification allows for the
creation of styles using an abbreviated syntax known as shorthand
CSS. Shorthand CSS lets you specify the values of several properties
using a single declaration. For example, the font property
lets you set font-style, font-variant, font-weight, font-size, line-height,
and font-family properties on a single line.

A key issue to note when using shorthand CSS, is that values
omitted from a shorthand CSS property are assigned their default
value. This may cause pages to be incorrectly displayed when two
or more CSS rules are assigned to the same tag.

For example, the h1 rule shown below uses longhand
CSS syntax. Note that the font-variant, font-stretch, font-size-adjust,
and font-style properties have been assigned their
default values.

Rewritten as a single, shorthand property, the same rule might
appear as follows:

h1 { font: bold 16pt/18pt Arial }

When written using shorthand notation, omitted values are automatically assigned
their default values. Thus, the previous shorthand example omits
the font-variant, font-style, font-stretch,
and font-size-adjust tags.

If you have styles defined in more than one location (for example,
both embedded in an HTML page and imported from an external style
sheet) using both the short and long forms of CSS syntax, be aware
that omitted properties in a shorthand rule may override (or cascade)
properties that are explicitly set in another rule.

For this reason, Dreamweaver uses the
long form of CSS notation by default. This prevents possible problems
caused by a shorthand rule overriding a longhand rule. If you open
a web page that was coded with shorthand CSS notation in Dreamweaver, be aware that Dreamweaver will create any new CSS rules
using the longhand form. You can specify how Dreamweaver creates and edits CSS rules by
changing the CSS editing preferences in the CSS Styles category
of the Preferences dialog box (Edit > Preferences in
Windows; Dreamweaver > Preferences on the Macintosh).