MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 2: Lists and CSS Basic Styles

In this Exercise we will work with different types of lists and learn some basic CSS to style our pages. Follow the Exercise TWO Assignment Instructions on BlackBoard. Review DEMO & VIDEO pages as needed.


The Unordered List - UL

Use this element to create a list with bulleted items in it. The list items will go inside the opening and closing UL tag.

<ul> </ul>

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

  • type="square", "circle", or "disc"

The List Items

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

<li> </li>

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


The Ordered List - OL

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.

  • type="1", "I", "A", or "a"
  • start="#"

The List Items

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

<li> </li>

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

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


The Definition List - DL

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.

<dl> </dl>

The Definition Terms & Definition Descriptions

<dt> </dt> & <dd> </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>

Using Simple CSS to Style your Elements

CSS Document Styles

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

<style> </style>

Be sure to add the attribute to tell the browser you are using CSS to add style:

  • type="text/css"

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. See the DEMO pages 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.

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

You can keep adding more styles into your Document Styles. Just add them between the style tags.


CSS Inline Styles

This styles are added right into the main body area of your page. You can style as little as one letter, or a whole group of content by add the SPAN Element with the Style Attribute. Or you can add the Style Attribute to an Opening Tag of an Element on the page.

<span> </span>

  • style="property:value;"

Using the Span Tag with the CSS style attribute. In this example we added the span tag inside another tag:

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

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

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

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
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Deadline More than one class late 1 Class Late On Time

Evaluation

This exercise is worth 15 points.

Coding (3)
Functionality (3)
Meeting project requirements (3)
Your effort (3)
Meeting deadlines (3)


Useful Links

List of Supported HTML Color Names with the hex codes listed.

Fonts for Mac & PC

Some Basic CSS Styles