MAT 125: Exercises & Projects

Exercise 2: Lists and CSS Basic Styles

In this Exercise we will work with three different types of lists and learn some basic CSS to style our pages. Review DEMO & VIDEO pages as needed.

Exercise Requirements

Watch: the step by step Videos Lectures for Exercise 2.
Read: Chapter 5 (about Lists), Chapter 11 (Introducing Cascading Style Sheets) in Learning Web Design. You do not have to test yourself.
Folder Name: Ex2

Number of Pages/Documents Required for Exercise: 4
You will create two pages of content which will each be used twice. Once each with no CSS styles and once with CSS Document and Inline styles added.

  1. Index.html page Use all three different types of lists (Unordered, Ordered and Definition Lists). Create at least 4 of each of the Unordered and Ordered Lists. Try out ALL the attributes and different values. Try nesting some lists. See the videos and demos for more information on this. Use at least 5 or more terms in the Definition Lists. Do not use CSS styles on this page.
  2. Page2.html Use the same content as your Index Page. Add CSS Document and Inline Styles to make the page interesting.
  3. Page3.html Review Exercise One. Create new content. Use the H (headline) and P (paragraph) elements that we covered in Exercise One to create a minimum of 5 different sized headlines and 5 paragraphs of content. Do not use CSS styles on this page.
  4. Page4.html Use the same content as your Page 3. Add CSS Document and Inline styles to make the page interesting.

Review the Exercise 2 demo pages and video lecture pages for more information. The more you experiment, the better you will understand the coding.

Page Content Suggestions: Create your own content, do not use mine from the videos or demos. For the index page, a grocery list, a To Do list, a list of your favorite foods, a step by step list explaining how to do something - a recipe works great for these.
For the Definition list - you could explain about the parts of something. Like a game, or ingredients in a recipe, types of food (definition and description).
For Page3 - Use the header tags and p or paragraphs to tell me about something you like to do, or where you work, or your pets (one of my favorite things to write about). At least 5 paragraphs and 3 or 4 headings and subheads.

Possible Points: 30

The Elements, Attributes and Values to be used for this exercise.

The Unordered List
ul

attribute:
type

Value options:
square
circle
disc

The List Item
li

Use the Unordered List or UL to create lists with bulleted items in it. The List Items or LI will go inside the opening and closing UL tags.

<ul>   </ul>

Use the TYPE attribute to change the bullet styles by using the different values. The default style is the round black bullet or disc.

Use the LI Element to create your List Items in your unordered list. Add as many LI to each list as you want.

EXAMPLE:
<ul type="circle">
<li> Taco </li>
<li> Pizza </li>
<li> Lasagna </li>
</ul>

  • Taco
  • Pizza
  • Lasagna

The Ordered List
ol

attribute:
type

Value options:
1
I (Roman Numerals)
A
a

attribute:
start

Value option:
#
Replace the # with a number

The List Item
li

Use this element to create a list with numbered or alphabetized items in it. The list items will go inside the opening and closing OL tag.

<ol>   </ol>

Use the TYPE attribute to change the styles by using the different values. The default value is number, but you also have options for Roman Numerals, capital letters or lowercase letters.
The second attribute you can use is start. The value would be a number. Try with and without the attributes.

The Ordered List - OL also uses the LI Element to create the List Items. Add as many LI to each list as you want.

EXAMPLE:
<ol type="A">
<li> Dog </li>
<li> Cat </li>
<li> Fish </li>
</ol>

  1. Dog
  2. Cat
  3. Fish

EXAMPLE 2:
<ol type="I" start="7">
<li> Pen </li>
<li> Pencil </li>
<li> Ruler </li>
<li> Exacto Blade </li>
</ol>

  1. Pen
  2. Pencil
  3. Ruler
  4. Exacto Blade

You can also nest lists inside of lists. Make sure you close as many lists as you open.

The Definition List
dl

The Definition Term
dt

The Definition Description
dd

Use this Element when you have terms to define. The Definition List DOES NOT use List Items. It uses Definition Terms - DT and Definition Descriptions - DD.

EXAMPLE:
<dl>
<dt> Tiger </dt>
<dd> A large striped cat that lives in the wild </dd>
<dt> Elephant </dt>
<dd> A large grey animal with big ears </dd>
</dl> <dt> Rhinocerus </dt>
<dd> Save the Chubby Unicorn </dd>
</dl>

Tiger
A large striped cat that lives in the wild
Elephant
A large grey animal with big ears
Rhinocerus
Save the Chubby Unicorn

Using CSS to add style to your page content
We will use CSS Document Styles which are placed in the head of your HTML page and also CSS Inline Styles which are used right in the body of the page by the specific content you want styled.

CSS Document Style Element:
style

Attribute:
type

Value:
text/css

CSS Document Syntax:
Selector { }

Property:

Value;

Add CSS Document Styles in the HEAD of your HTML Document. Use them to style the Elements you are using in your page content.

<style>   </style>

Use the TYPE attribute with the value text/css to tell the browser you are using CSS to style your page content.

CSS uses SELECTORS, PROPERTIES and VALUES instead of elements, attributes and values that we use in HTML. Use the selectors to choose what you will be styling on your page.

Choose the element you want to add style to, place the Element name in the Document style area (as the Selector). After you place the name, add an opening curly brace { and place each property: value; set inside until you have all the styles you want for that selector. Then close the curly brace } to tell the browser those are the styles for the particular Element you Selected to style.

Selector {property: value; }

See the DEMO pages & Video Lectures for more information.

You can also add comments in your CSS styles to remind yourself of what a style means, or where a group of styles begins and ends. The Video Lectures show many different examples of CSS you can try out.

EXAMPLE (this would be placed in the head of your document):

<head>

<title> </title>

<style type="text/css">

body {background-color: red;
font-family: Helvetica, Arial, san-serif;
color: white; }

h1 {font-size: 45px;
color: #faffcc; }

/* This is a CSS Comment. I am styling my whole page by using the body tag as a selector and all the h1 tags too. */

</style>

<head>

As you add more styles into your CSS Document Styles remember to add them between the style tags in the head area.

CSS Inline Styles

These styles are added right into the main body area of your page. You can add the Style Attribute to an Opening Tag of an Element on the page to style the whole set of content for that specific tag. They are a hybrid sort of coding as they use HTML & CSS to make them work.

Adding the CSS style attribute to any opening tag. This will add the style until the tag closes.

EXAMPLE 1
<p style="font-size: 16px; color: purple; letter-spacing: 1px;">This is a paragraph that has CSS styles added to it to make the whole paragraph look different.... </p>

This is a paragraph that has CSS styles added to it to make the whole paragraph look different....

Using the Span Tag with the CSS style attribute. You can style as little as one letter, or a whole group of content by adding the SPAN Element with the Style Attribute.
The CSS style all needs to be INSIDE the quote marks, including the last semi-colon, to make it work correctly.

<span> </span>

style="property: value;"

In this example we added the span tag inside another tag:

EXAMPLE 2
<h4> This is an H4 Header with some
<span style="font-size: 30px; color: hotpink; font-family: Comic Sans MS, serif;"> CSS Added
</span> To It </h4>

This is an H4 Header with some CSS Added To It

There are a lot of CSS styles you can use. Try some simple ones to start with.

Exercise Two Grading Rubric
Item/Points 1-2 3-4 5-6
Coding / Errors Some Mostly Correct All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Most Requirements Above & Beyond
Design & Creativity Basic Average Amount Above & Beyond

Evaluation

This exercise is worth up to 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort/experimentation (6)
Design (6)