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:

<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:
5. Name the source and 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:

               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, 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.

               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 () in the Selectors section.
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:

               .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:

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 () 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 () in the Selectors section.
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 drop-down in the Properties:
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.

               #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:

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.
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 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:

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

Text

Border

Background

More

Styling a Table

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:
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: