CSS Styling Lab

This lab is to get you started working with Cascading Style Sheets. Please take a look at the image of the page in
CSS_Lab Example for a visual example of what the page will display. The page you create should be similar when complete.


The bold words denote the action you take. Italics denote a special key or code, and dark red denotes the charaters you should type.

<!DOCTYPE html>

<html lang="en">

<head>

<title> CSS Lab : Your Name</title>
<meta charset="utf-8" />
<meta name= "author" content="yourname" />

</head>

<body>

<h1>CSS Lab - Example page</h1>

<p>In CSS there are Rules and Style Sheets. A rule is a statement about one stylistic
aspect of one or more elements. A style sheet is one or more rules that apply to an HTML document. </p>

<p>Example of a Rule</p>

<p>h1 { color: red }</p>

<p>A Rule rules consists of two parts: Selector - that part before the left curly
brace, and Declaration - that part within the curly braces</p>

<p>h1 { color:red }</p>

<p>A declaration has two parts separated by a colon: Property - that part before
the colon Value - that part after the colon</p>

<p>h1 { color:red }</p>

<h2>Grouping Selectors</h2>
<p>Group the selectors into a comma-separated list and only write the declaration</p>

<ul>
<li>h1 { font-weight: bold }</li>
<li>h2 { font-weight: bold }</li>
<li>h3 { font-weight: bold } becomes:</li>
<li>h1, h2, h3 { font-weight: bold } </li>
</ul>

<h2>Grouping Declarations</h2>
<p>Group the declarations that relate to the same selector into a semicolon-separated list</p>

<ul>
<li>h1 { color: red } </li>
<li>h1 ( text-align: center } becomes:</li>
<li>h1 { color: red; text-align: center; }</li>
</ul>

</body>

</html>

There are 3 different levels of css when working with an html document.

  1. In-line
  2. Internal
  3. External

In-Line Styles

We will start by doing some In-line styles

If your words are not bold and red check for spelling errors and syntax errors such as not using quotes or semi-colons correctly.

Internal Styles

Now we are going to create a set of Internal styles

You have now created an internal style sheet. You could see how the paragraph <p> and heading <h1> tags changed when you applied the style sheet. The text where the <h1> was applied should be slightly larger, bold and green

Now we are going to apply an internal style sheet to a particular section of the text using a class. We are going to create our own class definition and then apply it.

Now we need to apply the custom rules (classes) to the appropriate text. We can do this by assigning the class to an existing tag or by wrapping text in a special tag called a <span> tag.

Notice how the class is applied to a part of the line using the <span> tag or the entire line in the <p> tag.

If your words do not match the style you defined check for spelling errors and syntax errors such as semi-colons. Apply the remaining custom styles:

If your words do not match the style you defined check for spelling errors and syntax errors such as semi-colons.

Check to see that your final document matches the look of the this example page. CSS Lab Example

External Style Sheet

You have now applied in-line and internal styles. Time to try an external style sheet.