Learning how to work with CSS is absolutely critical to building contemporary websites. It's one of those things that we, as designers, have to hunker down and learn at some point. And even after you master the fundamentals, there's still room to grow and expand. You can learn about new properties or how to achieve specific results, and you can discover techniques for keeping your CSS as lean 'n mean as possible.
In this tutorial post, we'll be taking a look at the fundamentals of working with CSS in Dreamweaver. You'll learn about two primary rule types, how to create them, and how to begin applying them throughout your site.
First off, I have to ask you, do you know about styles in some of your other applications? InDesign has styles, Illustrator has styles...heck even Microsoft Word has styles. A style is simply a collection of formatting options. For example, we might have a style called "Emphasis," and within Emphasis we've set a font, a size, and a color. At this point, we can begin applying Emphasis throughout our document, and of course, where ever we use it, we'll get the same font, size, and color being used. If we go back and make a change to the original Emphasis style, then the formatting will update instantly where ever it's been used in our document.
This is how styles traditionally work. However, CSS takes this idea even further. Rather than working with styles within just one page, with CSS you can apply your set of rules to a group of pages -- or to all pages throughout your site. Edit one of your rules, and that change will ripple across your entire site as quickly as you can choose "File > Save"!
A few other quick points before we move on. First, the term "style" and the term "rule" are used interchangeably in Dreamweaver and in CSS. Sometimes Dreamweaver will use the term "style," and other times it'll use "rule." Many new users get confused by this and assume Dreamweaver's talking about two different things. It isn't! Styles and rules are the same thing.
Second, a list of rules is referred to as a style sheet. Style sheets can either be located within a specific HTML page (this is called an internal style sheet) or saved as a separate file outside of your pages (called an external style sheet). There are many cool things you can do with style sheets, and we talk about them in much more detail in Dreamweaver CS5 101: Core Dreamweaver CS5.
Now that we understand how styles work and have a sense of what style sheets are all about, we should discuss the two primary types of CSS styles we can work with: redefined HTML elements, and class rules. Each is very powerful, and has specific uses. Let's take a look.
Let's address redefined HTML elements first. This is my favorite type of style because what they do is take plain, boring HTML and drag it from the stone age into the 21st century with just a few lines of code. And thankfully for us, Dreamweaver's going to be doing all the heavy lifting, so if we don't want to, we don't have to see any code.
With redefined HTML elements, we'll be taking plain, boring HTML elements and placing them under the control of CSS. For example, we could control tables, images, headings, paragraphs, and pretty much anything else that might appear on your page. What's important to remember is that when we redefine an HTML element, we're controlling all occurrences of that element. For example, if you create a CSS rule that redefines, then all
As awesome as that is, it may not be what you want. What if you only wanted to control one table and leave the others as they were? That's where class rules come into play. We'll get into those in just a bit. For now, let's try creating a quick redefined HTML tag.
Here's How To Create A Redefined HTML Tag:
At the bottom of the CSS Styles panel, click the New CSS Rule icon.
In the New CSS Rule dialog box that appears, choose Tag (Redefines An HTML Element) from the Selector Type drop down menu.
In the Selector Name field, type in the name of the HTML element that you want to control.
When you type in the element name, be sure to leave out the angle brackets. In other words, if you wanted to control "
Rather than typing in the element's name, you can choose it from the fly-out menu on the right side of the Selector Name field.
From the Rule Definition pulldown menu at the bottom of the dialog box, choose if you'd like to save your new rule in an internal style sheet (This Document Only) or an external style sheet (New Style Sheet File). Or, if you already have an external style sheet attached to your page, you can choose to save it there by selecting its name.
In the CSS Rule Definition dialog box that appears, begin applying the CSS formatting that you'd like to use for your new rule.
When you're done, click OK.
When you're finished creating your redefined HTML element, all occurrences of the HTML element on your page now carry the formatting that you set in the CSS Rule Definition dialog box. There's no need to apply your formatting to anything, because you're redefining something that's already being used. Not only that, but should you go back and insert this HTML element onto your page at some point down the road, it will also be under the control of your CSS. It's a very powerful and very efficient way to work.
Although this is just a brief introduction to working with redefined HTML elements, hopefully you can see why they're such an important part of a web designer's toolbox. They're pretty easy to work with, too. Just fiddle around a bit with them in Dreamweaver for 10-20 minutes and I'm sure you'll be up to speed with them.
Now, I'm anxious to continue our look at CSS in Dreamweaver and this discussion on the two primary rule types, so join me in Part 2 where we'll take a look at working with class rules. See you there!
Can't wait for Part 2? You don't have to! Check out this Dreamweaver tutorial in the meantime, with more advanced tutorials coming soon!