CSS Tips & Tricks

Introduction

CSS (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:

  1. Inline Styles
    Used as an attribute within an HTML tag, such as:

            <h1 style="color: blue;">Page heading</h1>
  2. Document-Level Styles
    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:

      <head>
      <title>
      Sample Web page</title>
      <style type="text/css">
      .bodytext {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 1.0em;
      }
      </style>

      </head>
      <body>
  3. 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.

Fonts

Setting a Default Font in Dreamweaver

  1. If the CSS Panel is not visible, open it by selecting Window > CSS Styles.
  2. At the bottom of the CSS Panel, click the New CSS Rule icon (New CSS Rule icon).
  3. In the New CSS Rule window:
    1. Under Selector Type: select Tag.
    2. In the Tag: drop-down menu, either select body from the list or type the word.
    3. 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.
  4. New CSS rule - Adobe Dreamweaver CS4 and CS5
    New CSS rule - Adobe Dreamweaver CS4 and CS5

  5. The Save Style Sheet File As window will appear. Save the CSS file in your local root folder.
  6. 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.
  7. 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:
    1. On the left, under Category, choose Type.
    2. In the Font: drop-down, choose one of the Sans-serif fonts, such as Verdana, Arial, or Geneva (red oval).
    3. Under Size: type .9 or 1.0, and choose ems from the drop-down (blue oval).
  8. CSS Rule Definition for <body>
  9. 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.
IMPORTANT:
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:

  1. Open the Web page you wish to attach.
  2. At the bottom of the CSS Panel, click the Attach Style Sheet icon (Attach Style Sheet icon (Dreamwever CS3)).

       Note: Some older versions of Dreamweaver use a different icon (Attach Style Sheet - older icon).
  3. Click the [Browse] button and find the CSS Style Sheet you wish to attach.
  4. Select the Link radio button, then click the [OK] button.
Attach External Style Sheet - CS3

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.

The <span>

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;">

<span style="font-weight:bold;">Important:</span>

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!

Color names for CSS

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:

<h2 style="color:maroon;">

<p style="color:navy;" align="center">

<strong style="color:#FF0000;">

...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)