All Articles Dreamweaver
Learning CSS in Dreamweaver Tutorial Part 2: Creating Class Rules
Geoff Blake on Tue, February 15th 0 comments
In Part One of our look at using CSS in Dreamweaver, I provided a rundown on a few key fundamentals, such as what styles are, how they work, what style sheets are. Remember, a style (also called a "ru

In Part One of our look at using CSS in Dreamweaver, I provided a rundown on a few key fundamentals, such as what styles are, how they work, what style sheets are. Remember, a style (also called a "rule") is simply a collection of formatting properties, and a style sheet is a list of styles.

Also in Part One, we discussed how to create Redefined HTML Elements, a CSS rule type. Recall that we weren't creating anything new per se, we were simply redefining what was already present on our page. This not only means that you don't have to apply your formatting manually to any content (since your content already exists on your page), but also that you're changing all instances of the HTML element that you've redefined. Now, you may not want that -- you may not want to redefine all paragraphs, for example; maybe only the first paragraph. And this is where class rules come into play.

With class rules, we name and create the rule completely from scratch, then go and apply the formatting where ever it's needed on our page. If you're familiar with styles from other applications, like Word, Pages, InDesign, and Quark, then you're already familiar with how class rules work.

What's great is that we can apply class rules to any HTML element: tables, divs, headings, the body, horizontal rules, lists...the works! This allows us to really get our page and our formatting under control. So let's take a look at creating a class rule, then we can discuss how to apply them.

Here's how to create a class rule...

Step - 1

At the bottom of the CSS Styles panel, click the New CSS Rule icon.

Step - 2

In the New CSS Rule dialog box that appears, choose Class (Can Apply To Any HTML Element) from the Selector Type drop down menu.

Step - 3

In the Selector Name field, type in a name for your new class rule.

Because we're essentially creating class rules from scratch, we can name them whatever we want, but be sure not to use spaces or special characters in your class rule names. For example, if you're creating a class rule to control graphics, you might name your rule "ImageController" or "PictureFixerUpper." If you're creating a sidebar, then name your rule "sidebar." Name 'em however you like, and use a name that's useful and meaningful!

Step - 4

At the bottom of the dialog box, decide whether you want to save your rule in an internal style sheet "This Document Only" or into an external style sheet "New Style Sheet File".  Then click OK.

Step - 5

In the CSS Rule Definition dialog box, go nuts and have some fun setting some CSS properties. The properties that you decide to use really depend on what it is you want your new class rule to do. Here are a few ideas to consider: If you're controlling images, you might want to apply a border, a margin, and perhaps a float setting. If you're creating a sidebar for some text, head for the Type category and possibly the Block category. Maybe throw on a background color and some padding too. Again, it really depends on what you have in mind, what you want to create, and how you want it to look.
When you're done, click OK.

Notice that your new rule appears at the top of the CSS Styles panel. Notice too that your rule's name is proceeded by a period / full stop. Class rule names must always be proceeded by a period; if you don't put one in when you're naming your rule (as we did back in Step 3), then Dreamweaver will stick the period in automatically.

Now that you've created a class rule, it's time to apply it throughout your page. As mentioned previously, unlike redefined HTML elements, class rules have to be applied manually in your document. Depending on how you apply your rule, either to block-level or inline HTML elements, you'll get different results on your page. Let's take a look at a few ways to do this.

Here's how to apply formatting to block-level HTML elements:

Step - 6

On your page, single-click on the object that you'd like to format. For example, if it's a heading or a paragraph that you'd like to format, just drop your cursor into the text. If it's a table, div, or image, make sure to select the object. Sometimes, using the Tag Selector on the status bar in the bottom-left corner comes in handy when you're trying to select these larger elements. Whatever it is that you want to format, the idea here is to select it.

Step - 7

From the Class menu on the Property Inspector, choose your class rule. This applies your class rule to the selected object. Notice that the Tag Selector now indicates the HTML element you've selected, as well as the name of your class rule, proceeded by a period. For example, . If we were to look at this example in Code View, it would look like this:

. Notice that the rule name in code is not proceeded by a period.

That's how to apply formatting to a block level element. Let's see what happens if we try selecting text instead of simply clicking inside it.

Here's how to apply formatting to an inline element. It's only slightly different, but let's give it a try.

Step - 8

Rather than single-clicking within some text, try selecting a word, phrase, or sentence. If you're coming from the print world, this is the equivalent to character formatting (as opposed to paragraph formatting).

Step - 9

Just as before, choose your class rule from the Property Inspector. The difference now is that only the selected word or sentence gets formatted. Check out the Tag Selector, and it'll tell you what's up. Now it reads followed by a period and your class rule's name; for example . In Code View, it would read . A is an inline element. As you can see, the same HTML attribute is used (class), and the syntax is exactly the same as it was previously, but we get a very different result on our page.

Knowing and understanding, not only how to create class rules, but also the two ways of applying them will really enhance your ability to build and develop great looking sites. Happy stylin'!

Get deeper into CSS with Exploring CSS.

Related Videos
Comments (0)

You must be logged in to comment.

OBS 101 - The OBS Video Manual
OBS 101
Dream It. Do It.
Do you want to learn OBS 101 - The OBS Video Manual?
Yes, I want to learn!
No Thanks, I just want to read the article.
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: