› Dreamweaver tutorial: Styling Your Pages with CSS in Dreamweaver

Dreamweaver tutorial: Styling Your Pages with CSS in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Introducing Cascading Style Sheets (CSS)
  • Comparing CSS and <font> tags

This tutorial provides you with a foundation for working with styling Adobe Dreamweaver pages. It is the fourth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Styling Your Pages with CSS in Dreamweaver

Many years ago, creating a beautiful web page required a lot of work, using the limited capabilities of HTML tags. The introduction of Cascading Style Sheets changed the way pages are created, giving designers an extraordinary amount of control over text and page formatting, as well as the ability to freely position content anywhere on a page. In this lesson, you’ll focus on techniques for styling text with Cascading Style Sheets.

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” in the Starting Up section of this book.

You will work with several files from the dw04lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” in the Starting Up section of this book.

Before you begin, you need to create site settings that point to the dw04lessons folder from the included DVD that contains resources you need for these lessons. Go to Site > New Site, or, for details on creating a site, refer to Lesson 2, “Setting Up a New Site.”

What are Cascading Style Sheets?

In the last lesson you had a brief introduction to Cascading Style Sheets (CSS); now you will dive in a bit deeper. CSS is a simple language that works alongside HTML to apply formatting to content in web pages, such as text, images, tables, and form elements. Developed by the World Wide Web Consortium (W3C), CSS creates rules, or style instructions, that elements on your page follow. There are three locations for CSS: (1) directly within the <head> section of an HTML document, (2) inline (the CSS is located side by side with your HTML tags), or (3) an external file that can be linked to any number of HTML pages. If you completed Lesson 3, you have had experience with the first option.

A style sheet is a collection of CSS rules; typically, rules that belong to a specific project, theme, or section are grouped together, but you can group rules in any way you want. You can place style sheets directly within your page using the <style> tag or in an external .css file that is linked to your document with the <link> tag. A single page or set of pages can use several style sheets at once.

You can apply CSS rules selectively to any number of elements on a page, or use them to modify the appearance of an existing HTML tag. Whenever or wherever you apply a rule, that rule remains linked to its original definition in the style sheet, so any changes you make to the rule automatically carry over to all items to which the rule has been applied.

Each CSS rule is composed of one or more properties, such as color, style, and font size, which dictate how an item is formatted when the rule is applied. A single CSS rule can include several properties, just as a single style sheet can include multiple CSS rules. Dreamweaver’s CSS Styles panel lets you easily view and modify any of these properties and change the appearance of your page in real time.

This sample rule is composed of three properties that control the color, typeface, and size of any text to which it’s applied. In the simplest example, the CSS rules define the appearance of an H1 or heading element:

H1 {
color: red;
font-family: Arial,Helvetica,Sans-serif;
font-size: 28px;
}

Here is the result of the preceding code snippet:

CSS-styled text shown in the Design view.

CSS rules can affect properties as simple as typeface, size, and color; and as complex as positioning and visibility. Dreamweaver uses CSS as the primary method of styling page text and elements, and its detailed CSS Styles panel makes it possible to create and manage styles at any point during a project.

A little bit of ancient history: when <font> tags roamed the Earth in Dreamweaver

Before CSS came along, you styled text on a page using the <font> tag in HTML; you could wrap this limited but easy-to-use tag around any paragraph, phrase, or tidbit of text to apply color, or set the font size and typeface. Although it worked well enough most of the time, the <font> tag was a one-shot deal. Once applied, that tag’s job was done and you had to use a new <font> tag to style additional text, even if the color, size, and typeface values were exactly the same. You will now open an HTML document in which the list is styled using the <font> tag.

1 In your Files panel, locate and double-click the HTML file named FontTagList.html to open it in the document window.

2 Press the Code View button in the Document toolbar at the top of the document window. Notice that the <font> tag is used to style the items in the bulleted list.

Here, a <font> tag is used to format each bullet point. If you add more bullet points, you’ll need to use more <font> tags to keep the style of those bullets consistent with the others.

As you can see, there’s a lot of repetition in this code.

3 Press the Design View button on the Document toolbar. Position your cursor at the end of the last bulleted item, press Enter (Windows) or Return (Mac OS) to add a new bullet point, and type Peppers. You see that the text reverts to the default typeface, size, and color. You would have to add a new <font> tag with the same attributes as the others to get it to match. If you wanted to change an attribute such as the color for all the bullet points, you would have to adjust each tag separately. In early versions of Dreamweaver, there were actually ways to perform global changes using HTML; however, these were sometimes tricky to control, and CSS offers a better solution in any case.

You may lose the formatting between bullet
points when using <font> tags.

4 Choose File > Save to save your work, then choose File > Close.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.