Be able to apply styles to elements within a web page including to a list (ordered list, unordered list)

Published by Patrick Mutisya · 14 days ago

ICT 0417 – Website Authoring: Styling Elements and Lists

21. Website Authoring

Objective

By the end of this lesson students will be able to apply CSS styles to any element on a web page, including ordered and unordered lists.

1. Where CSS can be placed

  • Inline style – added directly to an element using the style attribute.

  • Internal (embedded) style sheet – placed inside a <style> block in the document’s <head>.

  • External style sheet – saved in a separate .css file and linked with <link rel="stylesheet">. (The file itself is not shown here.)

2. Basic CSS syntax

A CSS rule consists of a selector followed by a declaration block:

selector {
property: value;
property: value;
}

Example – making all paragraphs red:

p {
color: red;
}

3. Applying styles to a list

3.1 Ordered lists (<ol>)

Common properties for ordered lists:

PropertyPossible valuesEffect
list-style-typedecimal, lower-alpha, upper-roman, …Changes the marker style.
list-style-positioninside, outsidePlaces the marker inside or outside the list item box.
margin-leftany length valueIndents the whole list.

Example – a Roman‑numeral ordered list with inside markers:

ol.custom {
list-style-type: upper-roman;
list-style-position: inside;
margin-left: 2em;
}

HTML markup:

<ol class="custom">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

3.2 Unordered lists (<ul>)

Key properties for unordered lists:

PropertyPossible valuesEffect
list-style-typedisc, circle, square, noneChanges the bullet shape.
list-style-imageurl('image.png')Uses a custom image as the bullet.
list-style-positioninside, outsideControls where the bullet appears relative to the text.

Example – a square‑bullet list with outside markers:

ul.square {
list-style-type: square;
list-style-position: outside;
margin-left: 1.5em;
}

HTML markup:

<ul class="square">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

3.3 Combining list styles with other element styles

Lists can inherit or override styles from parent elements. For example, to colour all list items blue while keeping the list markers black:

ul.coloured li {
color: blue;               /* text colour */
}
ul.coloured {
color: black;              /* marker colour */
}

4. Practical activity

  1. Create a new HTML file called list-styles.html.

  2. Add an internal style sheet that defines:

    • A class .roman for ordered lists using upper‑roman markers.

    • A class .bullet for unordered lists using circle markers.

  3. Insert one ordered list and one unordered list, each using the appropriate class.

  4. Preview the page in a browser and verify that the markers appear as specified.

  5. Experiment by changing list-style-position to inside and observe the effect.

5. Summary checklist

  • Know the three places CSS can be written (inline, internal, external).

  • Remember the syntax: selector { property: value; }.

  • Use list-style-type to change marker shapes or numbering systems.

  • Use list-style-image for custom bullet graphics.

  • Control marker placement with list-style-position.

  • Apply a class or ID to a list to target it specifically.

Suggested diagram: Flowchart showing the cascade order – Inline → Internal → External → Browser defaults.