Lesson: Styling Content

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:

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

Attributes

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

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

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:

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.

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/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 Styles):
4. Make sure All is selected and click on the New CSS Rule icon in the CSS Styles panel:
5. Fill out the New CSS Rule dialog as follows and click OK:
   • Selector Type: Tag. All paragraphs (<p> tags) will take on this new style.
   • Select Name: p. The name of the tag.
   • Rule Definition: New Style Sheet File. We will be prompted to save the new file.
6. Fill out the Save Style Sheet File As dialog as follows and click Save:
   • Click the Site Root button to jump to the site root folder.
   • Save in: Navigate to the ClassFiles/Dreamweaver/Exercises folder.
   • File name: main.css. This is an arbitrary file name.
   • Save as type: Style Sheet Files (*.css)
   • URL: This should be filled in automatically when you name the file.
   • Relative to: Document. This will create relative paths from the HTML files to the CSS files. If you prefer to use absolute paths, you can choose Site Root; however, for the purposes of this course you should choose Document.
7. Fill out the CSS Rule Definition dialog as follows and click OK: Your paragraphs should update to the new style.

Adding Your First Rule (using Dreamweaver CC)

To illustrate how to add rules in Dreamweaver:

1. Open ClassFiles/Dreamweaver/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:
5. Name the source, click OK:
6. Make sure the new .css file is selected and add a new Selector:
7. Click on the new Selector, then click on the Text choice. Set the text properties:

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:

This rule specifies that the text of every <p> element should be dark green and use a 10-point Verdana font. As we saw in the previous example, you create type selectors in Dreamweaver by choosing "Tag" as the Selector Type in the CSS Rule dialog:

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

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.

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.

Dreamweaver refers to descendant selectors as "Compound" selectors. To create them in Dreamweaver, you select "Compound" as the Selector Type in the CSS Rule dialog:

To illustrate:

1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html.
2. Place the cursor in the "wikipedia" link.
3. In the CSS Styles panel, click the New CSS Rule icon ().
4. Select Compound from the Selector Type options.
5. Dreamweaver will then provide you with a descendant selector starting with the body tag:This 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.
6. You can use the Less Specific and More Specific buttons to change how specific your selector is. To see this, press Less Specific once. The Selector Name should change to "p a".

Steps in Dreamweaver CC

1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html.
2. Place the cursor in the "wikipedia" link.
3. In the CSS Designer panel, click the New CSS Rule icon ().
4. Dreamweaver will then provide you with a descendant selector starting with the body tag:This 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:

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

To create class selectors in Dreamweaver, you select "Class" as the Selector Type in the CSS Rule dialog:

To illustrate how to add a class selector in Dreamweaver:

1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver.
2. Place the cursor at the end of the blockquote and press Enter.
3. Click the Outdent icon () in the Properties Inspector to get out of the blockquote.
4. Type "Don't forget to save your work!"
5. In the CSS Styles panel, click the New CSS Rule icon ().
6. Select Class from the Selector Type options.
7. Type "warning" for the Selector Name. Leave the Rule Definition set to "main.css":This rule will affect every element that has the "warning" class.

Steps in Dreamweaver CC

1. Return to ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver.
2. Place the cursor at the end of the blockquote and press Enter.
3. Click the Outdent icon () in the Properties Inspector to get out of the blockquote.
4. Type "Don't forget to save your work!"
5. In the CSS Designer panel, click the New CSS Rule icon ().
6. 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 dropdown in the Properties Inspector:
3. Open the page in your browser by pressing F12. If you get the following prompt, click Yes. This saves the CSS file.
4. The page should look like this:

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.

To create id selectors in Dreamweaver, you select "ID" as the Selector Type in the CSS Rule dialog:

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/Exercises/hello-world.html in Dreamweaver.
2. Place the cursor anywhere in the warning paragraph.
3. In the CSS Styles panel, make sure ".warning" is selected in the top part of the window. Then next to font-family, click on "Impact," type "Arial" over it and press Enter.
4. The page should update.

In Dreamweaver CC:

1. Return to ClassFiles/Dreamweaver/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 top part of the window. Then next to font-family, click on "Impact," type "Arial" over it and press Enter.
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:

Notice above that there is an asterisk next to the main.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:

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 Rule Definition box.

Dreamweaver breaks CSS properties into the following categories:

• Type - for styles that effect text and fonts.
• Background - for background colors and images.
• Block - for spacing and alignment.
• Box - for margins, padding, height and width.
• Border - for border size, styles, and color.
• List - for list styles.
• Position - for positioning elements.
• Extensions - for browser-specific CSS extensions (these should be avoided).

Type

Background

Block

Box

Border

List

Dreamweaver CC - 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 CC 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.
• Others - for list styles.

Layout

Text

Border

Background

Other

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/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:
3. In the CSS Styles panel, click on the Attach Style Sheet icon:
4. Using Dreamweaver CC: In the CSS Designer panel, click on the Add CSS Source and choose Attach Existing Style Sheet icon:
5. In the Attach External Style Sheet dialog, browse to styles.css in the ClassFiles/Dreamweaver/Exercises folder:
6. Click OK.
7. Select the last table row showing the Grand Total and enter an id of "summaryrow":
8. 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:

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

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/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:
3. In the CSS Styles panel, click on the Attach Style Sheet icon:
4. Using Dreamweaver CC: In the CSS Designer panel, click on the Add CSS Source and choose Attach Existing Style Sheet icon:
5. In the Attach External Style Sheet dialog, browse to styles.css in the ClassFiles/Dreamweaver/Exercises folder:
6. Click OK.
7. Select the last table row showing the Grand Total and enter an id of "summaryrow":
8. 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:

Styling a Table

In this exercise, you will style some pages.

1. Open ClassFiles/Dreamweaver/Exercises/table.html in Dreamweaver.
2. Click somewhere in the table and then clear the deprecated HTML properties shown in the screen shot below:
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) shoud 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:

Solution:

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 sheet in Dreamweaver, create a new rule as we have done above, but in the New CSS Rule dialog, select "(This document only)" for the Rule Definition:

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

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:

To illustrate how to add inline styles:

1. Open ClassFiles/Dreamweaver/Exercises/sales-report.html in Dreamweaver if it's not open already.
2. Place the cursor in the heading 1.
3. In the Properties Inspector, click CSS.
4. Select <New Inline Style> from the Targeted Rule menu:
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.

CSS Play

This is an optional exercise if time allows.

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

Solution: