Designing with Cascading Style Sheets in Dreamweaver, WordPress, and more

Dreamweaver CSS Styles panel The concept of creating styles has been around since long before the Web.

Desktop publishing programs (such as Adobe InDesign) and even word processing programs (such as Microsoft Word) have long used styles to manage the formatting and editing of text on printed pages. When using styles in a word processor, you can create and save styles for common features, such as headlines and captions.

In print design, styles are great timesavers because they enable you to combine a collection of formatting options (such as Arial and bold and italic) into one style and then apply all those options at once to any selected text in your document by using only a single style. The advantage is that if you change a style, you can automatically apply the change everywhere you’ve used that style in a document.

On the Web, you can do all that and more with CSS because you can use style sheets for even more than just text formatting. For example, you can use CSS to create styles that align images to the left or right side of a page, add padding around text or images, and change background and link colors. You can even create more than one style sheet for the same page @@md say, one that makes your design look good on computers, another for cell phones, and a third for a printed page.

For all these reasons (and more), CSS has quickly become the preferred method of designing Web pages among professional Web designers. One of the most powerful aspects of CSS is that it enables you to make global style changes across an entire Web site.

How Cascading Style Sheets Work

Suppose, for example, that you create a style for your headlines by redefining the <h1> tag to create large, blue, bold headlines. Then one fine day, you decide that all your headlines should be red instead of blue. If you aren’t using CSS, changing all your headlines could be a huge undertaking -- a matter of opening every Web page in your site to make changes to the font tags around your headlines.

But, if you’re using CSS in an external style sheet, you can simply change the style that contains formatting information for <h1> tag in the style sheet, and voilà! Your headlines all turn red automatically. If you ever have to redesign your site (and believe me, every good site goes through periodic redesigns), you can save hours or even days of work if you created your design with CSS.

A Web site designed with CSS separates content from design. Keeping the content of site (such as the text and headings) separate from the instructions that tell a browser how the content should look benefits both you as a designer and your site visitors.

Here are some of the advantages of using CSS:

CSS simplifies design changes. CSS styles can be saved in the header section at the very top of an XHTML page, or they can be saved in a separate file that can be attached to multiple XHTML pages. Either way, if you use a style to format many headlines, then you can make formatting changes by simply editing the style.
Separating content from design enables you to create different style sheets for different audiences and devices. Today’s Web sites are as likely to be viewed in giant, wall-sized screens as they are to be seen on screens small enough to hide in the palm of your hand during a lunch date. CSS makes enables you to create Web page designs that are more adaptable so that they look good on big and small screens, as well as everything in between.
As you get more advanced with CSS, you can even create multiple style sheets for the same Web page. For example, you can create one that’s ideally suited to a big computer monitor, another which is designed for the best results when page is printed, and yet another designed with a larger font size for anyone who may have trouble reading the small print that is so common on Web pages.
Using CSS makes your site comply with the current standards. Today, the W3C, which sets standards for the Internet, recommends using CSS for nearly every aspect of Web design because the best CSS designs are accessible, flexible, and adaptable.
Web sites designed in CSS are accessible to more visitors. Today, a movement is growing among some of the best designers in the world to get everyone to follow the same standards, create Web sites with CSS, and make sure sites are accessible to everyone.
When Web designers talk about accessibility, they mean creating a site that anyone who might ever visit your pages can access @@md including people with limited vision who use special browsers (often called screen readers) that read Web pages aloud, as well as many others who use specialized browsers for a variety of other reasons.
If you work for a university, a nonprofit, a government agency, or a similar organization, you may be required to create accessible designs. Even if you’re not required to design for accessibility, know that pages that meet accessibility standards also tend to score better in search engine rankings because accessible designs also enable search engines to easily access and interpret site content.

Understanding the basics of styles

Many people find CSS confusing at first because it’s such a different approach to design than what you may be used to if you’ve worked in print. The following are three of the more confusing aspects of CSS for beginners:

Getting used to thinking about the styles on your site separate from your text, images, and other content. For example, instead of simply applying formatting directly to a headline to make it bold, green, and 24 point, in CSS, you create a style for your headline that includes bold, green, and 24 point, save that style in a separate place in your document or in a separate file called an external style sheets, and then you apply the style to one or more headlines as a separate step. As a result, if you want to change the way your headline looks later, you don’t go to the headline itself in your page to make the change. Instead, you edit the style in the style sheet, and it automatically changes any headlines formatted with that style.
Understanding all the different kinds of style selectors you can choose from, such as class, ID, and tag selectors. No matter how you create your styles, each style definition, or rule, contains a selector and a declaration. The selector identifies the name and type of style; for example, the selector would be something like #container or .caption. The declaration defines the style and describes its properties, such as bold, blue, or 300 pixels wide. Dreamweaver’s four selector types are described in detail in the section that follows.
Understanding when it’s best to create external style sheets, internal style sheets, or inline styles, described in the section “Understanding rule definition options.”

And ultimately, you need to understand how CSS and HTML work together. So, for example, you can control the positioning and appearance of an HTML <div> tag by applying an ID style to the tag, or you can redefine a tag, such as the <h1> tag to change the way headlines look on a page.

If you’re starting to feel baffled already (or you get overwhelmed as you start learning CSS), hang in there.

Once you master the basic concepts and start creating and applying styles, all this should start making more sense. And remember, you can always come back and read through any of the articles on this site again. After you’ve been using styles for a while, the details in the tutorials on this site (see list on side of page) are likely to have more meaning to you, but it’s really hard to start using styles before you have a good overview of how they work.

View Course Outline

CSS Basics: Dive into Cascading Style Sheets

Whether you are completely new to designing with Cascading Style Sheets, or you really want to master the basics of CSS, Janine's crash course will get you up to speed quickly.

$29.00
2-hr Training DVD & project files