Dreamweaver Tutorial: An introduction to styles

What you’ll learn in this Dreamweaver Tutorial:

  • Understanding styles

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

Dreamweaver Tutorial: An introduction to styles

You have styled the first element on your page by first formatting the text as a Heading 1 in HTML, and then you changed the font and color using CSS. It’s important to realize that every change you make in the Design view creates or modifies the code. In the next exercise, you’ll begin to explore the HTML and CSS code behind the Design view. To help put this exercise in context, a little background on HTML and CSS is in order.

The HTML language has been around since the dawn of the Web. It’s easiest to think of HTML as the structure behind the pages that are rendered in your web browser. An HTML page at its most basic is a collection of text, images, and sometimes multimedia such as Flash or video files. The different sections of a web page, such as a paragraph, a heading, or a list, are all elements.

CSS is also a language, but it has not been around as long as HTML. In many ways, CSS was created in order to allow HTML to do what it does best: create the structure of a page, but not style. CSS is a simple language that works in combination with HTML to apply style to the content in web pages, such as text, images, tables, and form elements. CSS uses rules, or style instructions, that the HTML elements on your page follow. The most important thing to remember is that HTML and CSS are two separate languages, but they are very closely aligned and work together very well.

In the last exercise, you were introduced to this interplay between HTML and CSS. There was an HTML element for the Heading 1 formatting. In the code it looks like this:

<h1>OrganicUtopia Events</h1>

That was the HTML element. The CSS rule that defines the appearance of the <h1> element looks like this:

h1 {

font-family: Verdana, Geneva, sans-serif;

color: #9C3;

}

CSS has a different syntax than HTML. In HTML, tags are defined by angled brackets, and you have opening tags, <h1>, and closing tags, </h1>. In CSS code, you are not working with tags at all, instead you use selectors. In the CSS code above, the h1 is referred to as the selector because it is selecting the HTML element and then declaring some rules for its appearance. Because you’ve established that HTML and CSS are two separate languages and have different syntax, it’s important that you see where this code lives in your web page. You will do this by changing Dreamweaver’s workspace.

This exercise is intended to help you understand the relationship between HTML and CSS code that is created in Dreamweaver, and is not necessarily the way you will always work in the program. Many people will work in the Design view most of the time, but the Split view you are about to use is very helpful for learning the languages of HTML and CSS.

1 Click on the Split button in the Document toolbar at the top of your page to open up the Split view. The Split view allows you to see your code and the design of your page simultaneously.

2 Click quickly three times in the paragraph beneath OrganicUtopia Events in the Design view. In the Code view the text is highlighted between the opening and closing paragraph tags. As noted above, this is referred to as the paragraph element. .

Image
tutorial image

A paragraph highlighted in the Split view.

You will now change the font size of your paragraphs.

3 Make sure you have CSS selected in the Property Inspector at the bottom of your page and choose 18 from the Size drop-down menu. The New CSS Rule dialog box appears again. This dialog box appears because it is the first time you have attempted to style a paragraph. After you define the properties, all text formatted as a paragraph will appear as indicated.

4 From the Selector Type drop-down menu, choose Tag. Since there are different categories of CSS rules, Dreamweaver wants to know which one you would like to use. You will stick with Tag for now (as you did in the last exercise). In the Selector Name text field, the selector p has been chosen for you because your cursor was inside a paragraph. Press OK to apply the changes; in this case, the font size is set to 18 pixels. Now let’s look at the CSS code that is defining this font size.

5 Within the Code view of the split screen is all the HTML and CSS code that defines the appearance of this page. On the right side of the Code view, scroll up by clicking on the up arrow or by clicking the scroll bar and dragging upward. Toward the top of the page, you are looking for a few lines of code that look like this:

<style type="text/css">

h1 {

font-family: Arial, Helvetica, sans-serif;

color: #9C3;

}

p {

font-size:18px;

}

</style>

Between the two <style> tags are all the CSS rules you have created up to this point. Previously, you learned that CSS has a different syntax than HTML: because all the CSS rules are actually contained within an opening <style> tag and a closing </style> tag, they are allowed to have a different syntax. Additionally, the style tag itself is nested inside an opening and closing <head> tag. In the world of HTML, nothing contained within head tags is rendered on a web browser’s screen. You will explore this further in the next lesson, but this is referred to as an internal style sheet.

You will now see that changes made in Dreamweaver’s Code view apply to the Design view as well.

6 In the Code view, locate the line font-size:18px in the rule for p, and select the value 18 by clicking and dragging over it. Type 14 to change the value. Although you made a change in the Code view, it has not yet been automatically updated in your Design view. You need to refresh your page in order to see the changes occur in the Design view.

7 In the Property Inspector, press the Refresh button to apply the changes; your paragraph text becomes smaller.

Image
tutorial image

Changes made in the Code view are reflected in the Design view after pressing the Refresh button.

Image
tutorial image

You can also click once inside the Design view for the page to refresh automatically.

On the Web, font sizes are specified differently than they are in print. The numerical choices in the Size drop-down menu refer to pixels instead of points. Also, the xx-small through larger options may seem oddly generic if you are accustomed to the precision of print layout. Because web pages are displayed on a variety of monitors and browsers, relative measurements can be a useful way for designers to plan ahead for inevitable discrepancies in the rendering of pages.

8 Click inside the first paragraph in the Design view. You will now change the color of the paragraph slightly to a dark gray rather than the default pure black. In the Property Inspector, click on the color swatch, and in the top-left corner, locate the dark gray swatch, which is hexadecimal color #666. Click on the swatch to apply the color. Notice that not only does the appearance in the Design view change, but in your Code view a new line of CSS has also been created (color: #666).

Working in the Split view can be a great way to learn about hand-coding without diving in completely. Even if you’re not quite comfortable editing code, keeping an eye on the code that Dreamweaver writes for you can give you a better understanding of how things like CSS affect your web pages.

9 Click the Design view button to return to Design view.

10 Choose File > Save. Keep this file open for the next part of this lesson.

Image
tutorial image

or a more in-depth look at Cascading Style Sheets see the Web Design with HTML and CSS Digital Classroom book available in electronic and print formats.

 

Continue to the next Dreamweaver Tutorial: Previewing your Dreamweaver pages in a web browser >