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 CC 2017, 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:

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:

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

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

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