Lesson 2 - Defining a CSS Class

Defining a Class

Select the New Style button from the CSS Styles Panel and select the Class Selector Type Radio Button. A class enables you to apply a style to many different page elements whereas the redefined Tag redefines the look of a specific tag. Name the Class something descriptive such as .14Bgreen for 14 point bold green font, or .p_indent for a different paragraph style than your standard paragraph tag.

I named my custom class .h14b. Whatever you put will be preceded by the dot even if you forget to put in the dot before the name. Define In: This Document Only and press OK.

This will open the CSS Style Definition for .h14b. I've defined some attributes and values for the Type and Background categories including the none checkbox for the Decoration on the Type category. None for decoration means that if I apply this class to an anchor tag, there will be no underline to define the text as a link but the cursor will still change into a hand when the user puts the cursor over the text to provide a visual cue to the user that the element is hypertext or linked. Here is an example of my .h14b class.

Look at the source code and you'll see that the class is an attribute of the paragraph tag and the text is not contained in span or div tags.

<p align="left" class="h14b">Here is an example of my heading .class</p>

The selector and declaration are listed in the style tag at the top of the HTML document in the head tag:

<style>
.h14b {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   text-transform: uppercase;
   color: #666666;
   background-color: #66CC00;
}
</style>

To apply the sample class to an entire paragraph, merely click within the paragraph (without selecting the entire paragraph) and select the class from the Style dropdown menu of the PI. The style is applied to the paragraph. To undo the application of a style, either click within the paragraph or make a selection on selected text and select None from the Style dropdown menu in the PI.

You can also rename and manage styles from the Style dropdown menu of the PI.  Rename styles 1, 2, and 3 to something more descriptive now. Select the Rename... option from the Style dropdown menu and then select the style you want to rename from the Rename dropdown menu of the Rename Style window.

An error message appears reminding me that there is a rule for naming classes.

Class names must start with an alphabetical character preceded by an optional period.
There should be no spaces or additional punctuation. If you forget to use the dot or period at the beginning of a class name, DW will add it for you.

Here is my CSS Styles Panel for my (renamed) Internal Styles.  The Rules panel lists all the styles for the active document. Rename all your styles to reflect intuitive names.

There is a quick way to view and edit the attributes of a selected style in the CSS Styles Panel. Notice the Properties window that is just below the All Rules window in the CSS panel.  Whenever you select a style in the All Rules window, the attributes of that style appear as blue text in the Properties window, as you can see in the illustration above.  If you wish to change an existing attribute, simply select the appropriate attribute value (on right side of the display) and enter the new value.  Often, as in the illustration below, a dropdown menu or other aid will appear which will make it easy to choose your new value.  If you wish to add a new rule to your style, click the Add Property link in the Properties window and all of the available, unused attributes will appear in black. Simply select the one you wish to use and enter a value for it.

Important: You must manually apply any classes you create to HTML tags in your document. Only the HTML tags with styles defined for them (such as the <li> tag) or contextual selectors created from these HTML tags will display the associated styles automatically.  I have to manually apply all of the classes (the custom styles I created that begin with a dot such as .verdana3bold, .v12, etc.) to every HTML tag I wish to apply them to.

The Tag Selector

The Tag Selector allows you to see any HTML attributes that are being applied to any element on your page.  Open the Tag Selector (Window>Tag Inspector) and simply click on an object in your Design window.  The Tag Selector will show the HTML Attributes available for that object, as well as the current values of any attributes already assigned values!  You can add or change attribute values for HTML attributes using the Tag Selector in the same way that you change CSS attribute values in the CSS Styles Properties window. Here I have undocked the Tag Selector and moved it next to an image -- when I clicked on the image, a list of available HTML <img> attributes appeared, as well as the current values for the attributes that were already specified.

Creating a Contextual Selector

So far, you've redefined an HTML tag and created a class using the New CSS Style window.  The remaining radio button option in the Selector Type is the Advanced (IDs and Contextual Selectors, etc.).  The Advanced option is used to create a combination of tags or tags that are nested in other tags.  If you have already redefined an HTML tag, you can use that tag in combination with or nested within another tag.

One of the best definitions and examples of a Contextual Selector comes from CodeAve.com

"Contextual selectors define styles that are only applied when certain tags are nested within other tags. This allows you to use a tag an not have it adopt the CSS attribute each time it is used. In this first example we have the <p>tag defined by a contextual selector to only display a tan background behind the text when there is an <i> tag nested within the <p> tag. The second example we nested a strong tag within the <p> and <i> tags to display a yellow background. Only the combination of either of those tags will yield a background color."
Read more and view the HTML code for using this Contextual Selector - http://www.codeave.com/css/code.asp?u_log=4025 - retrieved April 22, 2004.

In the example above from CodeAve.com, the <p> tag will not display a tan background behind the text, the <i> tag will not display a tan background behind the text.  However, when the <i> tag is nested within the <p> tag a tan background will display behind the text. CodeAve.com adds: "All contextual selectors are seprated by a space not by a comma as in CSS grouping."

<p><i> this combination will display a tan background behind the text <i><p>

The selector and declaration for this selector are in the style tag in the head of the HTML file.
Here is an example of the PI Contextual Selector

p i {background: tan;}

The Advanced Selector Type also lets you create IDs.  An ID is a unique identifier for an element. You can only use each ID once on each page.  IDs are used with scripts that require an ID name.  An ID is preceded by the pound or hash symbol #.

Here is an example of a selector and declaration for an ID
#center {font-family: Georgia, Times New Roman, Times, serif; font-size: 14px; color: #99CC00}

Read more about the ID Selector at the World Wide Web Consortium (W3C) site:
http://www.w3.org/TR/REC-CSS2/selector.html#id-selectors
or at the CSShark site: http://www.mako4css.com/BasClass.htm
or at the CSS-Wiki Discussion Board, Class vs. ID Topic: http://css-discuss.incutio.com/?page=ClassesVsIds

We won't be using IDs with scripting in this Intro course.

Exporting your Styles to an External Style Sheet

All the styles that you have created in this lesson reside in the current document.  When you created a new style from the New CSS Style window, you selected "This document only" as the Define in: radio button selection.  The other radio button in the Define in: radio button set is "(New Style Sheet File).  When you select a "New Style Sheet File", DW will create a new document that will have all the styles you create defined in the document.  The file format for this file is .css and it is a text document.  The styles will be defined in the code the same way they are defined in the style tags of the head of the document when you select "This document only".

There are several advantages to using an external style sheet. I mentioned before that you can link and reference styles in an external css file from all the pages in your site, managing the modifcation of the styles to one location.  In addition, all the code for your styles takes time to load on each page.  When you write the code once and link to it, the pages in your site will load quicker because the style code only has to download once.

In this part of the lesson, I'll show you how to convert your internal styles to an external style sheet.  First, it is possible to have both internal styles, external styles, and inline styles (which I haven't discussed yet). But it makes more sense to remove any internal styles that are duplicates of the external.  So let's convert the internal styles you created now.  Follow the steps to convert your internal styles to an external .css file.

Go to your Files Panel in DW and navigate to the .css file you just created. Open the file.  The css file will only open in Code View.  The buttons to view in Split or Design are dimmed out because you can only view .css files in Code View.  You will see the same style tags that were - I mean still are - in your current html file.  Hmmm. If we exported the styles, why are they still in the original HTML document? Good question.  DW does not remove the styles when you export them to a .css file, so you have to go into the original HTML file and remove them and then link your HTML file to the .css file.  Let's remove the internal styles that we just exported and then link our html file to the external css file.

Remove Internal Styles and Link External Style Sheet

There are several ways to delete internal styles.  You can select your .html file and then go to the CSS Styles Panel and select the word <style> from the All Rules window.  Simply click the trash can icon button on the bottom right of the panel to remove all your styles at once.

You can open your file in Split View and select the style container tags in the head of the document and remove them.  Container tags have an open and close tag like this: <style> </style>. Select these style tags and all the content contained within these tags.

Once you have deleted the styles, your HTML file will lose all it formatting.  Don't despair.  You have saved the styles in the external.css file and now all you have to do is link the html page to the css file with simple click of a button in the CSS Styles Panel. The first icon button on the bottom right of the CSS Styles Panel is a piece of chain link.  That is the "Attach Style Sheet" button. Press the Attach Style Sheet button now to open the Attach External Style Sheet dialog box.

Browse for the file and select the Add as: Link Radio Button. Notice the DW has sample style sheets to get you started. These are predesigned and you may modify these files or use them as is.

Your linked .css file now appears in the CSS Styles Panel.

Expand the style sheet by clicking on the + sign to the left of the .css file name.

<

You can also create a New Style Sheet from scratch.  I recommend that you only link to one style sheet.  Some older browsers don't display multiple style sheets properly.  Instead of linking to multiple style sheets, you can open the style sheet and combine styles into one .css file by copying and pasting styles.

An external style sheet is the same as a linked style sheet. You can see the link in the HEAD of the document. Dreamweaver inserts it for you. For the dw-lessons.css sheet above, my source code looks like this:

<link href="dw-lessons.css" rel="stylesheet" type="text/css">

So what's Cascading about Style Sheets?

Cascading refers a specific style taking precedence over a general style. The physically closest style to the text it is modifying takes precedence over any other styles that effect it. This is used to avoid conflicting styles.

Styles on specific text override styles on an entire paragraph. Styles on a paragraph override styles applied to the entire body of the document. Cascading refers to how local styles take precedence over page styles which take precedence over global styles.

1stsitefree.com says this about Cascading Styles Sheets:

"Why are they called Cascading Style Sheets? Because, if you use multiple styles to control the appearance of your Web page, a browser will follow the rules of CSS according to the following precedence:

1. External Style Sheet.
2. Internal Style Sheet (inside your <head> and </head> tags).
3. Inline Style Sheet (inside your HTML Tags).
4. Thus, an Inline Style Sheet (inside your HTML Tags) has the highest priority and will override all others."

http://www.1stsitefree.com/css-intro.htm

CSS is a huge web technology.  I have a list of references for you to explore at the end of this lesson.  For now, I just want to focus on a few ways to use CSS in this Intro to DW course.  We will not be able to cover all the features of CSS in the scope of this course. The ultimate authority on CSS is the World Wide Web Consortium. Check the w3.org site for the most recent information on CSS, browser compatibilities, work arounds, and Web Standards.
http://www.w3.org/Style/CSS/

It's possible that more than one rule is applied to an element.  In this case, rules of Specificity will determine which style is the most specific to the element. Specifity is the rule that resolves conflicts and generally goes like this:

"Some selectors are more specific than others. For example, the class and ID selectors are more specific than simple HTML element selectors. When two rules select the same element and the properties contradict one another, the rule with the more specific selector takes precedence. Specificity for selectors is a little involved. Without going into the full detail, most situations can be resolved with the following rules.

1. ID selectors are more specific than other selectors
2. Class selectors are more specific than HTML element selectors, and other selectors such as contextual, pseudo class and pseudo element selectors.
3. Contextual selectors, and other selectors involving more than one HTML element selector are more specific than a single element selector (and for two multiple element selectors, the one with more elements is more specific than the one with fewer.)"

Read more about Specificity at: 
http://www.westciv.com/style_master/academy/css_tutorial/advanced/cascade_inheritance.html
1997-2004 Western Civilisation Pty. Ltd.

CSS Tips

To create linked text without underline, use the Type Category, Decoration set to none.

Make your bg image scroll by using the Background Category Attachment field. Try it and let us know what you selected from the drop down menu and which browsers show the feature.

Remember to upload your external style sheet to the server along with all your linked documents.

Styles applied to table tags may give inconsistent results across browsers.

Using CSS font color shortcuts for fonts that have double digits:
Often you'll find that the colors you use have matching pairs of digits for each of the red, green, and blue components. If you specify only three hex digits for the color, CSS will automatically expand it to a full 6-digit color value. Thus,

#FFF -> #FFFFFF -> White
#000 -> #000000 -> Black
#FFE -> #FFFFEE -> Light Tan
#0CF -> #00CCFF -> Sky Blue

You get the idea. Remember -- this shortcut only works in CSS and will shave off a few extra bytes off your page sizes. If you try typing 3-digit color values in HTML, you'll get unpredictable results.

The DIV tag forces a line break after the closing /DIV tag.

Uses can set their browsers to ignore style sheets and apply their own settings.

You can define an image to be used as a bullet in the List Category. This image can be an animated gif images. Bullet images are not supported by NN4 but bullet types such as disc, circle, square, decimal, lower and uppercase numerals, lower and uppercase alphabet is supported.

These two sites provide info on browser compatibility:
http://hotwired.lycos.com/webmonkey/reference/browser_chart/
http://westciv.com.au/style_master/academy/browser_support/

I've applied a style to this document only to set my <A> link Decoration to none and the color to gray.

The three methods of applying styles are:

Inline Style Attribute - used in a specific HTML tag locally, this style takes precedence over the other 2.

Internal or Embedded Styles - defined inside the HTML file but not inside the specific HTML tag. Usually placed in the HEAD section of the document. Useful in redefining HTML tags. Dreamweaver will put the style code and then list the styles. The code for the scrollbar above is an example of Internal Styles. Often you'll see the style tag defined by the type as follows:

<style type="text/css">
<!--
    .background {background-color: #FFOOOO;}
    table {font-family: arial, helvetica, sans-serif; font-size: 36pt;}
-->
</style>

Using Layers for CSS-P. The P stands for Positioning.

Inheritance

Certain tags cannot be used without other tags. The TD tag is a component of the TABLE tag. If you apply a style to the TABLE tag, the TD tag will inherit the style of their container TABLE tag.

* click the link below to read the next tutorial*
CSS-P

Copyright © 2008 - 2009 Robert D. Cormia - October 7, 2008