Martha's COIN 74 Week 9

zzz | HW1 | HW2 | HW3 | HW4 | HW5 | HW6 | KQ | HW7 | CR | HW8 | HW9 | HW10 | HW11 | HW12 | final | hw

Martha's COIN 74 Week 9 Exercises

Day One - CSS: Syntax and Classes

SOURCE: Robert D. Cormia's online text
my comments in blue

CSS Syntax

CSS defines display properties of most HTML tags by creating a rule for the display of the tag. The rule is composed of a selector (the tag) and a declaration. The declaration contains the descriptive properties and values. An example of property would be color. An example of value would be red. The rule for a paragraph tag with the color of red is written as follows:

p {color: #FF0000;}

The selector of p is typed followed by a space and then the declaration in curly braces. The red value of the color property is written in hexidecimal format as #FF0000.

Multiple declarations or multiple attributes of one tag are separated by semicolons such as this, which translates as "make all paragraphs red, arial, 10 points":

p {color: #FF0000; font-family: arial; font-size: 10pt;}

You can use one declaration for multiple selectors such as this, which translates as "make all paragraph, heading 1, and list items red, arial, 10 points":

p, h1, li {color: #FF0000; font-family: arial; font-size: 10pt;}

To summarize, rules are selectors and declarations. A selector is what you are defining. In the example that follows, the selector is the p or paragraph tag and the declaration are the properties of color, font-family, and fon-size and their associated values of #FF0000, arial, and 10pt:

p {color: #FF0000; font-family: arial; font-size: 10pt;}

selector {declaration comprised of property: value;}

CSS Classes

Classes are a category of CSS styles that enable you to have the option of applying more than one style to a specific tag. Let's say that you don't want all your paragraphs to be green, arial, 10pt. You can create one class of paragraph tag that is blue, verdana, 20pt, and one that is red, arial, and 36pt. What? 36 points? I thought font sizes only went from 1 - 7! Yes, but using style sheets enable you to define the font size in points, pixels or ems. Ems are the preferred font size definition to use for accessibility issues. Check the compatibility of this tag among browsers and check it in your browsers. Class rules are always preceded by a dot before the name. If you leave out the dot using Dreamweaver's Style Panel, DW will automatically insert the dot for you.

If you find yourself becoming overwhelmed by all this CSS information, you'll be happy to know that DW 8 provides a way that new users can create and use styles before comprehending all this information. Let's take a break and try this simple experiment.

1. Create some text. Just a few lines. Select a couple of words in a sentence and open your PI if it's not already displayed.
2. Click the color chip for text and select a red color to apply red to your selected words.
3. Look at the Style dropdown menu. It went from None to Style 1. DW created a style for you...

Later in the lesson you'll learn to rename the style and export all these internal styles to an external style sheet. For now, select the text to which the style1 is applied and open the document in code view. You will see a span tag around the selected text with style1 as the class of the span.

Here's what Martha's span looked like:

A class is a custom style. But where is this style defined? Scroll up to the top of the body of the document in Code or Split View and you'll see the Style tag with the class identified with the dot at the beginning of the word. The selector and declaration are contained in the style tags.

From now on, every time you want to apply a red font to a selected element, select the style1 from the Style dropdown menu in the PI. Try this now. Select a span of text or even one word. Select the style1 style from the Style dropdown menu in the PI to apply the attributes of that style to the selected text.

Note that the default font is 12 points. Let's create a style that is 14 points bold and italic.

Create some text and select a span of text. I created this size 14, but it looks the same to me!
I'll select the entire previous sentence.
Change the Font Size in the PI to 14.

Notice that the Style dropdown menu reflects style2. DW will name the styles sequentially. It doesn't mean that every time you make a font size 14 in all your sites you will create style2. Style2 means that it's the second style you have created in this particular document.
Select the B for Bold button. I added the bold font here.

Notice that the Style dropdown menu reflects the style by bolding the word style2.
Select the I for Italics button. I added an italic font here.

Notice that the Style dropdown menu reflects the style by italicisizing the bold word style2.

Here is my selected text with the style2 style applied: Create some text and select a span of text. I added the green...

Now select the same text and select a green color. Create some text and select a span of text. Did the Style dropdown menu change to reflect a new style? It should. Now you have 2 styles defined, and each of the styles is reflected in real time in the dropdown menu. This updated display in the style dropdown menu is a very effective authoring feature.

Before going further with the lesson, view the source code in Code or Split View to see the new style selectors and declarations at the top of your document, and view the actual tags identifying the classes in the body of the document. To see the tags in the body, return to the Design View, select the text to which you applied the style2 and then go back and view the source in Code or Split View. You will see the text contained in the span tag.

<span class="style2">Create some text and select a span of text</span>

Some of you may wonder about the difference between the span tag and the div tag. The span tag is used for words within a larger block of text. The div tag is used to define entire blocks like paragraphs.

Here are the 3 styles defined between the STYLE tags of the HTML file:

<style>
   .style1 {color: #FF0000}
   .style2 {font-size: 14px; font-weight: bold; font-style: italic;}
   .style3 {color: #33CC00; font-size: 14px; font-weight: bold; font-style: italic;}
</style>

Since DW places any styles you create using the PI directly in the Head tags of the HTML file, these styles are called internal and make up the internal style sheet of the codument. A style sheet lists the selector and declaration of styles. This style sheet resides within the current file only. If you open a new file in this site, you will not have any styles appear in the Style dropdown menu of the PI. Since DW is a site management tool, it's most efficient to create and use features that can be applied site-wide. Wouldn't it be nice to have all the styles in one document to which you could link all the pages in the site? That way, if you want to edit a style, add a style, delete a style, you can make a change in one document and have it apply to all the pages in the site. A style sheet that is outside of your current page and to which your current page links is called an External Style Sheet (see the COIN 74 CSS style). An added benefit of using an external .css file is that the style information only has to load in your site once, so your site pages with download quicker. Before I show you how to create an external style sheet and/or convert your internal styles for this document into an external sheet, I want to show you other ways to create styles or rules.

Martha's Style Sheet for this Page