(Cascading Style Sheets)
are a means of managing the appearance of Web pages. They were developed in
early 1996 and are the preferred method for controlling the appearance of
your Web pages, for a consistent "look-and-feel." In this lesson we'll look at using CSS for:
- Fonts - control the font faces in your page(s), as well as the sizes of font.
- Colors - set the colors of all kinds of page elements, such as headings, page text, image borders, table borders, horizontal rules, etc.
CSS Rule or CSS Style?
In some parts of Dreamweaver, CSS styles are referred to as CSS rules. They are actually the same thing, and both terms are correct.
You Can Start Small!
You can start out by making one or two CSS styles to see how they work. Add to your collection of styles as you become more comfortable with CSS.
How is CSS used?
There are three types of Cascading Style Sheets. They allow the webmaster to control CSS at the site level, at the page level, or at the page element (paragraph, image, etc.) level. The three types are:
- Inline Styles
Used as an attribute within an HTML tag, such as:
This is a style sheet defined within the <head> of a
document. It can be a good place to define a style or styles
that will only be used in one document. Here's an example:
Arial, Helvetica, sans-serif;
- External Style Sheets
This is an external file, which you attach to your Web pages. It can be used
with multiple pages and is generally the easiest way to employ style sheets.
Tags vs. Classes
Styles that Affect TAGS
Tags are the "code" that make Web pages display in browsers. Some CSS styles modify the behavior of tags, such as the headings (<h1>, <h2>, etc.), the body
of the page (<body>), etc. These styles take effect automatically, whenever the tag is used.
For example, a style that affects the font of the <body> will make that the "default"
font for the entire page.
Styles that Are CLASSES
Classes do not take effect automatically. We must highlight text, or an image, or a horizontal rule, and apply the class to it. On the other hand, classes can be used in many different places.
Setting a Default Font in Dreamweaver
- If the CSS Panel is not visible, open it by selecting Window > CSS Styles.
- At the bottom of the CSS Panel, click the New CSS Rule icon ().
- In the New CSS Rule window:
- Under Selector Type: select Tag.
- In the Tag: drop-down menu, either select body from the list or type the word.
- Under Define in: choose either (New Style Sheet File) -- if you do not have an external style sheet, or select your existing style sheet from the drop-down menu.
New CSS rule - Adobe Dreamweaver CS4 and CS5
- The Save Style Sheet File As window will appear.
Save the CSS file in your local root folder.
The CSS Style Sheet file you just created will be the place where you
define all of the other CSS styles for the page or website.
- The CSS Rule Definition for body will now appear.
Follow these steps to select a good, readable, Sans-serif font as the
default for your site:
- On the left, under Category, choose Type.
- In the Font: drop-down, choose one of the
Sans-serif fonts, such as Verdana, Arial, or Geneva (red oval).
- Under Size: type .9 or 1.0, and choose ems from the drop-down
- Click the [Apply] button if you want to keep the window
open and see the changes take effect, or click the [OK] to
save the changes and close the window.
The change made in the steps above will set a default font for
an entire Web page. We used ems as the unit of measure (instead of pixels or points) so that Internet Explorer users can adjust their text size, if needed.
Attaching Style Sheets to Existing Pages
Any existing Web page in your site can be attached to any CSS file that you have created. The steps are easy:
- Open the Web page you wish to attach.
- At the bottom of the CSS Panel, click the Attach Style Sheet icon ().
Note: Some older versions of Dreamweaver use a different icon ().
- Click the [Browse] button and find the CSS Style Sheet you wish to attach.
- Select the Link radio button, then click the [OK] button.
Inline Styles - Useful for CMS Outreach!
Inline styles are the most "powerful" of the three types, in that they
will override any conflicting styles in external or embedded style sheets.
Inline styles let us change any part of any Web page, using CSS. They are entered within HTML tags, to
change the appearance of that single tag’s contents. They can be used in
Web applications – such as Moodle or CMS Outreach – where you can bring up an
HTML editing window, but you cannot modify the <head> of the document to
use embedded styles or to link to an external style sheet.
Inline styles are also useful for changing just a single element of a Web
page, while leaving similar elements untouched. Because they override
embedded and external styles, you can use an inline style to change a single
element in a page, even though the inline style conflicts with a previously defined
embedded or external style.
What if you want to change the appearance of just one word or a group of words? There is no tag to modify, so just use a <span> tag on either side of the words to be styled.
Inline Styles for Fonts
You can use an inline style to change the font face or the font color of any piece of text in a Web page. We'll start by modifying a paragraph tag and a heading tag. Here are a few examples. The part that you would type is in blue:
<p style="font-family: tahoma, arial, sans-serif;">
<h1 style="font-family: verdana, arial, sans-serif;">
<p style="font-size: 1.0em;" align="left">
<p style="font-family: arial, sans-serif; font-size: .85em;">
Inline Styles for Colors
Colors can be applied to text, headings, borders, horizontal rules, and much more. CSS colors can be written using the names of colors or
the six-character hexadecimal color codes. These 17 color names should
work just about everywhere, but be careful of your spelling! Write grey instead of gray, and you’ll probably find that your browser reads the color as green!
Here are a few examples of colors being applied to text. Note that the <span> tag is used in one example. Again, The part that you would have to type is in blue:
<p style="color:navy;" align="center">
...should read: <span style="color:red;">Do Not Enter</span> in large, red letters. The other safety issue is...
Printer-friendly version of this exercise (PDF)