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.
- Open Textpad or Notepad
- Copy and Paste the following into a new document:
<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>
- Save the file as css_lab_example.html
There are 3 different levels of css when working with an html document.
- In-line
- Internal
- External
In-Line Styles
We will start by doing some In-line styles
- Locate the line <h2>Grouping Selectors</h2>
We want the word Grouping Selectors to have a different appearance from the rest of the paragraph element. To do this, we will use an HTML style attribute, style=" ", placed inside the <h2> tag. - Click within the <h2> tag , just after the 2 and before the > to place your cursor.
- Type <h2 style="color: #CC0000; font-weight: bold">
- Save your work and view in a browser
Grouping Selectors should now be bold and red. You have created an in-line style. - Repeat the process with the words Grouping Declarations.
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
- Place your cursor after </title>
- Press Enter twice
- Type <style> ( The style element creates a little bubble of CSS code inside an HTML document. )
- Press Enter
- Type p { font-family: Georgia, Times, serif; font-size: 12pt } ( This sets the styles for all the paragraphs in the document.)
- Press Enter
- Type h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1.8em; font-weight: bold; color: #00CC00} (This sets the style for any h1 element. See if you can figure out how these elements will apear when applied.)
- Press Enter
- Type ul { list-style-type: none;} (This sets the style for any ul element. See if you can figure out how these elements will apear differently when this style is applied.)
- Press Enter
- Type </style>
- Save your work and view in a browser
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.
- Place your cursor just before the </style> tag in the style definition.
- Type.rule { font-size: 1.2em; font-weight:bold;}
- Press Enter
- Type.selector { font-size: 1.2em; font-weight: bold; color: #0033CC}
- Press Enter
- Type .declaration { font-size: 1.2em; font-weight: bold; color: #CC0099}
- Press Enter
- Type .property { font-size: 1.2em; font-weight: bold; color: #6633FF}
- Press Enter
- Type .value { font-size: 1.2em; font-weight: bold; color: #FF6600}
- Press Enter
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.
- Place your cursor after <p>Example of a
- Type <span class="rule">Rule</span>
- Place your cursor after the <p but before the ending > in the line <p>h1 { color:red }</p>
- Type <p class="rule">h1 { color: red }</p>
- Save your work and view in a browser
Notice how the class is applied to a part of the line using the <span> tag or the entire line in the <p> tag.
- Place your cursor after <p>A Rule rules consists of two parts:
- Type <span class="selector">Selector</span>
- Place your cursor after that part before the left curly brace, and
- Type <span class="declaration">Declaration</span>
- Locate h1 in the next paragraph
- Type <span class="selector">h1</span>
- Locate {color:red}
- Type <span class="declaration">{color:red}</span>
- Save your work and view in a browser
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:
- Place your cursor after <p>A declaration has two parts separated by a colon:
- Type <span class="property">Property</span>
- Place your cursor after that part before the colon
- Type <span class="value">Value</span>
- Place your cursor before color
- Type <span class="property">color</span>
- Place your cursor before red
- Type <span class="value">red</span>
- Save your work and view in a browser
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.
External Style Sheet
You have now applied in-line and internal styles. Time to try an external style sheet.