facebook google plus twitter
Webucator's Free Adobe Dreamweaver Tutorial

Lesson: Styling Content

Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.

While HTML is a language for structuring web pages, Cascading Style Sheets (CSS) is the language used for styling and laying out web pages. Although Dreamweaver provides a nice interface for working with CSS, to use it effectively, you must understand the different ways CSS styles can be applied to elements and pages. In this lesson, you will learn how CSS works in general and how Dreamweaver implements it.

Lesson Goals

  • Learn the basics of CSS.
  • Learn to work with the CSS Styles panel.
  • Learn to create and edit CSS rules.
  • Learn to apply CSS rules to elements on the page.
  • Learn to create and link to external style sheets.

HTML Structure

Before learning CSS, it is important to understand how HTML is structured. HTML is made up of elements that describe the structure of the content on a web page.

HTML Elements

HTML elements describe the structure and content of a web page. Tags are used to indicate the beginning and end of elements. The syntax is as follows:

<tagname>Element content</tagname>

For example, a paragraph would be marked up as follows:

<p>This is a paragraph.</p>

Attributes

Tags often have attributes for further defining the element. Attributes come in name-value pairs:

<tagname att1="value" att2="value">Element content</tagname>

For example, an important paragraph might be marked up as follows:

<p class="important">This is an important paragraph.</p>

Blocks and Inline Elements

Block-level Elements

Block elements are elements that separate a block of content. For example, a paragraph (<p>) element is a block element. Other block elements include:

  • Lists (<ul> and <ol>)
  • Tables (<table>)
  • Forms (<form>)
  • Divs (<div>)

Inline Elements

Inline elements are elements that affect only snippets of content and do not block off a section of a page. Examples of inline elements include:

  • Links (<a>)
  • Images (<img>)
  • Formatting tags (<b>, <i>, <tt>, etc.)
  • Phrase elements (<em>, <strong>, <code>, etc.)
  • Spans (<span>)

Strong knowledge of HTML makes working with CSS much easier, but with the basic knowledge covered above, you should be able to get a good start with CSS.

CSS Rules

CSS rules are statements that define the style of an element or group of elements. The syntax is as follows:

Syntax

selector {
	property: value;
	property: value;
	property: value;
}

Each property: value pair is a declaration. Multiple declarations are separated by semi-colons. The selector defines which elements are affected by the rule. Take a look at the following rule.

p {
	color: darkgreen;
	font-family: Verdana;
	font-size: 10pt;
}

This rule specifies that all paragraph text should be dark green and use a 10-point Verdana font.

Adding Your First Rule

To illustrate how to add rules in Dreamweaver:

  1. Open ClassFiles/dreamweaver-cc/Exercises/hello-world.html in Dreamweaver in Design View.
  2. Place the cursor in the first paragraph under the heading.
  3. Open the CSS Styles panel if it is not already open (Window > CSS Designer):
  4. Add a new source: Select Create a New CSS File
  5. Name the source and click OK:Create a New CSS File Dialog Box
  6. Make sure the new .css file is selected and add a new Selector:Select test.css
  7. Click on the new Selector, then click on the Text choice. Set the text properties:Selectors Dialog Box

Selectors

The are several different types of selectors. The most common ones are listed below:

  • Type
  • Descendant
  • Class
  • ID

Selectors identify the element(s) affected by the CSS rule.

Type Selectors

Type selectors specify elements by tag name and affect every instance of that element type. Looking again at a previous example:

               p {
	color: darkgreen;
	font-family: Verdana;
	font-size: 10pt;
}

This rule specifies that the text of every <p> element should be dark green and use a 10-point Verdana font.

In Dreamweaver CC 2017, you must type the beginning . or # to note a Class or ID type selector.

Selectors Dialog Box

Descendant Selectors

Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that <strong> tags within <p> tags should have red text.

               p strong {
	color:red;
}

With descendant selectors generations can be skipped. In other words, the code above does not require that the <strong> tag is a direct child of the <p> tag.

To illustrate:

  1. Return to ClassFiles/dreamweaver-cc/Exercises/hello-world.html.
  2. Place the cursor in the "wikipedia" link.
  3. In the CSS Designer panel, click the Add Selector icon (Plus Icon) in the Selectors section.
  4. Dreamweaver will then provide you with a descendant selector starting with the body tag:Select Body TagThis means that this rule will affect every 'a' element within a 'p' element within the 'body' element. It will not affect 'a' elements that are not nested somewhere within 'p' elements.
  5. Define the selector in the Properties area.

Class Selectors

In HTML, almost all elements can take the class attribute, which assigns a class name to an element. The names given to classes are arbitrary, but should be descriptive of the purpose of the class. In CSS, class selectors begin with a dot. For example, the following rule creates a class called "warning" that makes the text of all elements of that class bold and red:

               .warning {
	font-family: Impact;
	font-size: large;
	font-weight: bold;
	color: #F00;
}

Following are a couple of examples of elements of the warning class:

<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>

To create class selectors in Dreamweaver, you type ".warning" as the name of the Selector:Select Warning

To illustrate how to add a class selector in Dreamweaver:

  1. Return to ClassFiles/dreamweaver-cc/Exercises/hello-world.html in Dreamweaver.
  2. Place the cursor at the end of the blockquote and press Enter.
  3. Click the Outdent icon (Outdent Icon) in the Properties to get out of the blockquote.
  4. Type "Don't forget to save your work!"
  5. In the CSS Designer panel, click the Add Selector icon (Add Selector Icon) in the Selectors section.
  6. Type in .warning:Type in .warning
  7. Define the selector in the Properties area.

Now we have to apply the class to an element on the page:

  1. Place the cursor in the warning paragraph you typed under the blockquote.
  2. Select "warning" from the Class drop-down in the Properties: Warning as Class
  3. Open the page in your browser by pressing F12. If you get the following prompt, click Yes. This saves the CSS file.Warning in Browser
  4. The page should look like this: Hello World with Warning

ID Selectors

As with the class attribute, in HTML, almost all elements can take the id attribute, which is used to uniquely identify an element on the page. In CSS, ID selectors begin with a pound sign (#) and have arbitrary names. The following rule will indent the element with the "maintext" id 20 pixels from the left and right.

               #mainText {
	margin-left:20px;
	margin-right:20px;
	]

	<div id="mainText">
	This is the main text of the page...
	</div>

To create id selectors in Dreamweaver, you type "#mainText" as the name of the Selector:Selectors Main Text

ID vs. Class

Again, the id attribute is used to uniquely identify an element on a page, so no two elements may use same id.

Classes, on the other hand, can be applied to many elements on the page.

Modifying the Rule

Sometimes you will want to modify the rule after you have created it. For example, that warning class we created is a little too standout-ish. Let's make it less so, by changing the font-family from Impact to Arial:

  1. Return to ClassFiles/dreamweaver-cc/Exercises/hello-world.html in Dreamweaver.
  2. Place the cursor anywhere in the warning paragraph.
  3. In the CSS Designer panel, make sure ".warning" is selected in the Selectors part of the window. Then next to font-family, replace the existing font by typing "Arial" over it and press Enter.Font Family
  4. The page should update.

Making Sure the CSS File Saves

Beneath the file name at the top of the Document Window, you will see a line that begins with the words "Source Code." This line lists the source files associated with the HTML file:Source Code

Notice above that there is an asterisk next to the test.css file name. That's because the file has been changed and not saved. When you close the HTML file, you will be prompted to save the associated files that have been changed; however, you can save them earlier by selecting File > Save All Related Files: Select Save All Related Files

The asterisk should disappear.

CSS Properties

There are many CSS properties and it is beyond the scope of this course to cover each in detail. However, we will go over them quickly and you will be able to learn a lot more on your own by exploring the CSS Designer Properties area.

Dreamweaver breaks CSS properties into the following categories:

  • Layout- for margins, padding, height and width.
  • Text - for styles that effect text and fonts.
  • Border - for border size, styles, and color.
  • Background - for background colors and images.
  • More - for other choices.

Layout

Layout

Text

Text

Border

Border

Background

Background

More

More Choices

Styling a Table

Duration: 20 to 30 minutes.

In this exercise, you will style some pages.

  1. Open ClassFiles/dreamweaver-cc/Exercises/table.html in Dreamweaver.
  2. Click somewhere in the table and then clear the deprecated HTML properties shown in the screen shot below:Properties Panel
  3. Add a stylesheet called styles.css in the same folder.
  4. Create rules for the following:
    1. All caption elements should be bold and left-aligned with white text and a dark blue background.
    2. All table headers (th) should have dark blue text and should have 4 pixels of padding on all sides.
    3. All table data cells (td) should have 4 pixels of padding on all sides.
    4. All odd rows starting with the one under the table header, should have a light gray background color (#ccc).
    5. The heading 1 (h1) should be centered.
    6. The table should be centered. To center the table, you will need to change the left and right margins to "auto".
  5. When you're finished, open the page in your browser. It should look like this:Employees Table in Browser

There are different ways to accomplish this look. To compare how you did it with our solution, look at the CSS Styles panel. In the Selectors part, you will see the selectors. Ours look like this:CSS Designer Tab

Attaching an Existing Style Sheet

Style sheets that are saved as separate files can be used over and over again. To illustrate this:

  1. Open ClassFiles/dreamweaver-cc/Exercises/sales-report.html in Dreamweaver.
  2. Click somewhere in the table and then clear the deprecated HTML properties shown in the screen shot below:Properties Panel
  3. In the CSS Designer panel, click on the Add CSS Source and choose Attach Existing Style Sheet icon:CSS Designer Tab
  4. In the Attach External Style Sheet dialog box, browse to styles.css in the ClassFiles/dreamweaver-cc/Exercises folder: Attach Existing CSS File Dialog Box
  5. Click OK.
  6. Select the last table row showing the Grand Total and enter an id of "summaryrow":Properties Panel summaryrow
  7. Create a rule using an ID selector that sets the background color to dark green and the font to white and bold. The page should look like this:Sales Report Table in Browser

Style sheets that are saved as separate files can be used over and over again. To illustrate this:

  1. Open ClassFiles/dreamweaver-cc/Exercises/sales-report.html in Dreamweaver.
  2. Click somewhere in the table and then clear the deprecated HTML properties shown in the screen shot below:Properties Panel
  3. In the CSS Designer panel, click on the Add CSS Source and choose Attach Existing Style Sheet icon:CSS Designer Tab
  4. In the Attach External Style Sheet dialog box, browse to styles.css in the ClassFiles/dreamweaver-cc/Exercises folder: Attach Existing CSS File Dialog Box
  5. Click OK.
  6. Select the last table row showing the Grand Total and enter an id of "summaryrow":Properties Panel summaryrow
  7. Create a rule using an ID selector that sets the background color to dark green and the font to white and bold. The page should look like this:Sales Report Table in Browser

The Cascade

Web designers can define style rules in three different places:

  1. In an external (or linked or imported) style sheet.
  2. In an embedded style sheet.
  3. Inline in an element.

In the examples above, we have been using external style sheets. This is generally the best approach as it allows you to apply a single style sheet to an unlimited number of HTML files.

Embedded Style Sheets

To create and embedded style in Dreamweaver, select "(Define in Page)" for the Rule Definition:Define in Page Selection

Inline Styles

Inline styles are applied directly to an element within the HTML code using the style attribute. The value of the style attribute is a list of one or more property-value pairs separated by semi-colons. The code snippet below illustrates how inline styles are used:

<p style="color:red; font-weight:bold;">Hello, world!</p>

To illustrate how to add inline styles:

  1. Open ClassFiles/dreamweaver-cc/Exercises/sales-report.html in Dreamweaver if it's not open already.
  2. Place the cursor in the heading 1.
  3. In the Properties, click CSS.Targeted Rule Drop-down
  4. Select <New Inline Style> from the Targeted Rule menu:Select New Inline Style
  5. Click the Edit Rule button.
  6. Style the heading however you want.

Generally, you should avoid using inline styles as you will not be able to reuse them in the same document or in others.

Units of Measurement

CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available.

Name Unit Example
Pixels px margin-top: 10px;
Pixel is the measurement unit most often used for designing web pages is pixels. A pixel is not an absolute measurement like, for example, an inch or a point. The actual size of a pixel depends on the resolution and size of a user's monitor. Consider an image that is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, then the image will not fit on the screen. However, if the monitor resolution on the same computer is set to 1024 by 768 pixels, the image will fit with room to spare.
Points pt font-size: 12pt;
Points should be reserved for print. There are 72 points in an inch.
Inches in padding-top: .5in;
Although inches are one of the most common units of measurement in life, they should be avoided in web design.
Centimeters cm top: 5cm;
Although centimeters are one of the most common units of measurement in life, they should be avoided in web design.
Millimeters mm left: 45mm;
Although millimeters are one of the most common units of measurement in life, they should be avoided in web design.
Picas pc bottom: 12pc;
Picas should be reserved for print. There are 6 picas in an inch.
Ems em font-size: 1.5em;
An em (or Mutt) is a relative unit that refers to the size of the letter "M" in a font. Because em is a relative rather than absolute measurement, it is often used in web design, especially for font sizes.
Exs ex font-size: 1.5ex;
The "x-height" is the height of font's lowercase "x". Exs are used to set the size of content based on the size of the surrounding font.
Percentage % width: 80%;
The percentage is based on the default size had no value been specified.

CSS Play

Duration: 15 to 60 minutes.

This is an optional exercise if time allows.

  1. Style the following files however you like:
    1. ClassFiles/dreamweaver-cc/Exercises/index.html
    2. ClassFiles/dreamweaver-cc/Exercises/Resources.html
    3. ClassFiles/dreamweaver-cc/Exercises/RunningTerms.html

There is no right answer. Just have fun and share with your instructor and classmates.