Adobe Education

Adobe Web Tech Table of Contents:

• Lessons revised for CS2

• Lessons revised for CS

• Original lessons

Unit 4: GoLive, (X)HTML, and CSS

Lesson 4.3: Cascading Style Sheets 1

!	Lesson Goal: Learn why cascading style sheets are the way to go and how to use GoLive's CSS Editor.

Cascading style sheets (also called CSS) contain "styles," instructions that tell the browser how to display the elements on the associated Web page. The W3C recommends the use of styles to replace deprecated tags and to handle presentation issues (as opposed to structural issues, best handled within the HTML code itself). In this lesson, you'll learn the basics of style sheets, including how to use GoLive's built-in CSS Editor and Style Inspector.

Why Cascading Style Sheets?

If you look at the overview of the Web Tech Curriculum, you'll see that there are numerous lessons on cascading style sheets. As a result, you may be asking yourself, "What's the big deal about style sheets? Why are they so important?"

Well, the answer comes from the evolution of HTML recommendations. When the W3C releases a new version of HTML recommendations, certain elements are deprecated and/or obsoleted. Deprecated elements still work in most browsers (but may be on their way out); obsoleted elements may not work in browsers at all. In the W3C's own words:

A deprecated element or attribute is one that has been outdated by newer constructs... Deprecated elements may become obsolete in future versions of HTML...
An obsolete element or attribute is one for which there is no guarantee of support by a user agent.
~ W3C HTML 4.01 Specification (http://www.w3.org/TR/html401/conform.html#deprecated)

You've been learning about the current W3C standard, XHTML. Many elements from previous HTML versions (HTML 4.01 and earlier) may be considered deprecated or even obsolete by the W3C. According to the W3C, style sheets are the new big thing and are quickly becoming the de facto standard.

Your first real exposure to deprecated elements in this curriculum came in the previous lesson — Entering and Formatting Text in GoLive. For example, the font element, used for some of the basic GoLive text formatting options, was deprecated in the HTML 4.0 specs in favor of styles. If you recall, the font element is used by GoLive when applying size and color to text. This might bring another question to mind: "Why does GoLive use deprecated elements?" We think at least part of the answer coincides with the reasons that it is important to know deprecated elements:

• Many people still use them; if you ever have to update or troubleshoot somebody else's code, you'll need to understand the deprecated tags being used.
• Browsers still support them and probably will do so indefinitely.
• Styles, the alternative to many deprecated elements, are not yet supported by all browsers or by older browser versions (though the current browsers are quickly catching up).

But, don't worry — Adobe wouldn't leave you stranded using deprecated elements. GoLive provides an extensive cascading style sheet editor. The various cascading style sheet lessons in this curriculum will bring you up to speed on the various types of style sheets, how and when they should be used, and how to create and apply styles in GoLive. Once you start working with styles, you will forget all about using deprecated formatting options and use styles within GoLive. Styles will become your de facto standard for handling Web page presentation issues, not just because they are the W3C standard, but because you will be amazed at their ease of use and flexibility.

Cascading Style Sheet Basics

Types of CSS

CSS vs. HTML Alert
Be aware that style or CSS "language" is not the same as HTML markup language, so the code you are about to view looks quite different!

Cascading styles can be used in various ways:

• Inline, also called styles applied locally

  Example opening tag using style attribute:
  
  <h1 style="font-family:sans-serif; color:#996633">

• Internal style sheets (also called document-level style sheets), which reside in the head section of an HTML document

  Example style element coding:
  
  <style>
<! —
body {font-family:Arial, sans-serif; color:green}
— >
</style>

• External style sheets, which reside in a separate file which is referenced from within the HTML document

By the way, the term "cascading" refers to the cascading order of precedence for these various levels of formatting changes. In general, the formatting changes closest to the affected element have precedence. Let's use the h1 element as an example.

1. If no other formatting changes are specified, the browser default will determine how h1 headings display.
2. If an external CSS file specifies how h1 headings should display, the CSS file takes precedence over the browser default.
3. If an internal style sheet in the document's head section specifies how h1 headings should display, that document-level style sheet takes precedence over both external CSS files and browser defaults.
4. Finally, if inline styles affect a particular h1 heading, they take precedence over all other formatting specifications.

Advantages and Disadvantages of Using CSS

Using external style sheets is an excellent way to maintain consistency among the pages of your Web site. Here are some of the advantages:

1. It's a time-saver.
   • For example, you can set the format for all h1 headings one time, in one place.
   • Likewise, if you ever need to change it, you only have to change it one time, in one place. That's a huge advantage.
2. It reduces the file size (hence the loading time) of your individual pages.
3. It reduces the clutter of your individual pages, thus increasing your code's readability.
4. It makes it easy to create a common format for all the pages in your Web site.
5. It reaches beyond HTML's formatting limitations.

So what's the down side? There is one major one:

• No one browser supports CSS completely.

This means you need to stay aware of which browsers support which features and design accordingly. For example, you may wish to include only those features which are supported by the last two or three versions of both of the two major browsers. The good news is that, generally speaking, each new version of the major browsers includes more CSS support. As users update their browsers, this problem will decrease substantially.

Inline Styles

Introduction to Inline Styles

As discussed previously, inline styles are also sometimes called styles applied locally. Because they are formatting changes applied closest to the affected element, they have precedence over the other style types. You've already seen how the deprecated font element can be used to format inline text. The newer, preferred way is to use the style attribute inside the opening tag of the element you wish to format. For example, you might include the style attribute inside an opening <p> or <h1> tag, in order to specify desired changes to the font color, size, etc.

The basic syntax for the style attribute is:

<elementname style="property:value; property:value;">

Note the following:

• No matter how many property:value pairs are specified, there's only one set of quotes around the whole list (not around each pair individually).
• Although the semicolon after the final property:value pair is optional, it is good practice to include it.

In the following example, the opening <h1> tag includes the style attribute, which is used to set the heading's font properties:

<h1 style="font-family:Arial,Helvetica,sans-serif; color:#000080">Heading One</h1>

which renders as:

Heading One

The properties used by the style attribute that affect text's typeface, size, and color are font-family, font-size, and color. Again, notice the difference in the syntax and terminology of styles compared to basic HTML.

Let's compare the HTML code using inline styles versus the deprecated font element to control the size of paragraph text:

	style attribute	font element
HTML Code	<p style="">Relative Font Size 175%</p>	<p><font size="+2">Relative Font Size +2</font></p>
Browser Rendering	Relative Font Size 175%	Relative Font Size +2

As you can see, the style attribute used by inline styles works just like any other attribute previously discussed. The difference is in the terminology (e.g., font-size) and the syntax of the information within the quotes (e.g., "property:value;").

The span Element

What if you don't want to format a whole block (e.g., a whole paragraph, a whole heading, etc.), but only a few words within a block? The span element, along with the style attribute, affords the opportunity to affect a particular selection of text. By itself, the span element doesn't really do anything to the text contained by it; it gains its "power" from the attributes it utilizes, e.g.:

<p>I want these <span style=" color:purple;">large, purple words</span> to stand out.</p>

which renders as:

I want these large, purple words to stand out.

Internal Style Sheets

Internal style sheets (also called document-level style sheets), reside in the head section of an HTML document. Unlike inline styles, internal style sheets use the style element, rather than the style attribute.

The basic syntax for the style element is:

<style>
<! —
elementname {
  property:value;
  property:value;
  property:value;
  }
— >
</style>

Note the following:

• The <style>...</style> container contains all of the formatting instructions.
• Opening and closing comment tags are nested just inside the opening and closing style tags in order to hide styles from those browsers that don't support them. Otherwise, the formatting instructions will show up on the Web page as though they were part of its intended-to-be-viewed content.
• All the property:value pairs are enclosed within one set of curly braces { }.
• You don't have to put each property:value pair on its own line, but it does help increase readability.

In the example below, the style element (set inside a document's head section, where it belongs) sets the body text's default typeface, size, and color:

<head>
  <title>title text</title>
  <style>
  <! —
  body {
    font-family:Arial, sans-serif;
   
    color:green;
    }
  — >
  </style>
...
</head>

External Style Sheets

External CSS

An external style sheet is simply a stand-alone text (ASCII) file with a .css extension. For example, the CSS file used on this course Web site is named "adobe_style.css."

Since CSS files are not HTML files, their contents do not need to be enclosed in html tags or have head and body sections. They simply start with the first element for which you wish to set a style.

CSS files use a syntax similar to that of the style element discussed previously, e.g.:

h1 {property1: value1;
    property2: value1,value2;
    property3: value1;
   }

Note the following:

1. First, you identify the element for which you are setting a style (in this case, it is the h1 element).
2. The style properties are completely enclosed inside curly braces ({...}) following the name of the element.
3. Styles are set with property:value pairs; each property is separated from its value by a colon (:), while the pairs are separated from one another by semicolons (;).
4. Several properties may be specified for an element at the same time.
5. A property may have more than one value.
6. The space after the colon is not required (but makes it easier to read).
7. The final semicolon (e.g., the one after property3's value1 in the example above) is not required, though it is recommended (in case you want to add another property later).

8. Comments may be entered using the following syntax:

   /* comment goes here */

   So, for example, if I want all my h2 headings to be large, blue Arial (or other sans serif font), the h2 element in my style sheet will look something like this:

   h2 {font-family: Arial, sans-serif;
    
    color: #083194; /* dark blue */
   }

You can even include more than one tag name in a specification if it's more efficient to do so. For example, if I want all my headings to be dark blue and Arial, I could lump them all together to specify those properties, then create individual specs for the properties that differ among the headings (in this case, the font sizes):

h1, h2, h3, h4
   {font-family: Arial, sans-serif;
    color: #083194; /* dark blue */
   }
h1 {font-size: x-large;}
h2 {}
h3 {}
h4 {}

Linking External Style Sheets to HTML Documents

Once you've created an external style sheet (a .css file), you can link to it from as many different HTML documents as you wish. Let's say you've named your CSS file "style1.css" and you want every page on your site to use that style sheet. In each HTML document's head section, usually after the title line, insert the following line:

<link rel="stylesheet" href="style1.css" type="text/css">

Note the following:

1. The rel="stylesheet" means the referenced CSS file is related to the HTML document as a style sheet.
2. The href="style1.css" gives the path and name of the CSS file.
3. The type="text/css" tells the browser that the referenced file is a text file which follows CSS conventions.

Classes of Styles for Internal or External Style Sheets

A very powerful feature of CSS is the ability to use a class name to represent or assign a specific set of style changes. The class you create can be a generic class (applicable to multiple elements) or an element-level class (applicable to a specific element).

Generic Classes

Let's say I teach an online course. In my course Web site's CSS file, I have my h1 and h2 headings set as follows:

h1, h2
   {font-family: "Times New Roman", serif; color: magenta;}
h1 {font-size: x-large;}
h2 {}

I want all my h1 and h2 headings to display in left-aligned, magenta Times New Roman except when I use h1 for my course number (EDUC 110) and h2 for my course name (Learning Theory & Instructional Design); in that particular case, I want them to display in centered, blue, italic Arial. Therefore, my CSS file also contains the following lines, which create a generic class named "courseid." Note that generic class names must be preceded by a period:

.courseid
   {color: blue;
    font-style: italic;
    font-family: Arial, sans-serif;
    text-align: center;
   }

Now that I have the class in my CSS file, how do I tell the HTML pages when to use it? Generic classes are utilized via the class attribute of an element's opening tag. In the body of my course Web site pages, I make use of that "courseid" generic class whenever I start the page with my course number and name:

<h1 class="courseid">Education 110</h1>
<h2 class="courseid">Learning Theory & Instructional Design</h2>

Since my "courseid" class doesn't specify a font size, these h1 and h2 headings inherit their font sizes from the h1 and h2 specs elsewhere in the CSS file.

The div Element

If you want a whole section of a Web page (e.g., several paragraphs or a whole table) to be affected by the same generic class, you can enclose that section within <div> tags. The div element is a block-level element. It helps to add structure to documents; however, the content contained between the div tags does not appear visually different in a browser when used by itself. (FYI, this element can also be used with the id or style attributes.)

The following example would render both the paragraph and the table between the div tags in centered, italic, blue Arial (because that's how I defined the "courseid" class in my CSS):

<div class="courseid">
  <p>...paragraph text here...</p>
  <table>
  ...table tags here...
  </table>
</div>

The span Element

The span element, typically used with inline text, can be used in conjunction with a CSS class. It identifies an individual section of text (e.g., a word or two) for special formatting. For example, if I occasionally want to call attention to certain words by making them bold and green, I could create the following class within my CSS file:

.boldgreen
  {font-weight: bold; color: green;}

Then, within my HTML document, I utilize the opening <span> tag's class attribute to format the particular words I want to emphasize, e.g.:

<p>Pay particular attention to the <span class="boldgreen">span</span> and <span class="boldgreen">div</span> tags!</p>

which would render as:

Pay particular attention to the span and div tags!

Element-Level Classes

In some cases, you may wish to create classes for two or more different formats for the same tag. In this case, the name of the element is followed by a period, which is followed by the name of the class. For example, if you need two different p formats in addition to the default, one bold and centered and the other left-justified and italicized, here's what would go in your CSS file:

p.centered {font-weight: bold; text-align: center;}
p.left {font-style: italic; text-align: left;}

Here's how you would use these element-level classes within your HTML document:

<p class="left">This paragraph is left-aligned and italicized.</p>

<p class="centered">This paragraph is centered and bold.</p>

which would render as:

Type-Related Styles in GoLive

Go to page: | Lesson Home | 01 | 02 | 03 | 04 | 05 | 06 | 07 | Printable Version of Lesson |

Course Home

Copyright © 2002-2005 Adobe Systems Incorporated, except those portions marked copyright © 2000-2005 ID 4 the Web. All rights reserved.