How to Style CSS Lists

CSS Styling Lists

Lists are those bullet points or numbered text that you see on a web page. Lists (both bullet points and numbered) have been a part of HTML code for ages. What's new about lists is the way you can stylize them for your users in CSS. Originally, lists were either bullet points or numbers, but now CSS lets you make lists dynamic, change the way they look to the user, and you can use images as bullet points. CSS lets you do much more with lists than old HTML tags.

There are two types of lists: ordered and unordered. HTML tags correspond with these two list types. Ordered lists include numbers in front of each point. Unordered lists include a bullet point, but these bullet points can be swapped out for images. There are several styles you can even use with a numbered or ordered list such as roman numerals and alpha characters.

List HTML

Before we begin, you should know the two list types and their associated HTML. The following code displays an HTML page with an ordered list.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<ol>

</ol>

</body>

</html>

The above HTML displays the list with numbers one, two and three ahead of each list item. The "ol" tag stands for "ordered" list, and this is how the browser knows to place numbers in front of each item. The "li" tags define each list item.

The above is an ordered list, but the following code shows you how to create an unordered list that just places bullet points in front of each item instead of numbers.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<ul>

</ul>

</body>

</html>

Notice the only changes are the "ul" tag instead of the "ol" tag.

List Styles

Now that you know how to create lists, you need to know how to change the styles. Basic HTML and CSS have predefined styles that change the look and feel of either the ordered list's numbers or the unordered list's bullet points.

Let's take a look at ordered lists first. There are several ways you can change the ordered list. You can change the list to upper or lower case roman numerals, or you can change the numbers to upper or lower case letters. Of course, you can also set the default, which is standard numbers starting with one.

The following CSS code changes the unordered list style to upper case roman numeral values.

ol {
list-style-type: upper-roman;
}

The following CSS code uses lower case alphabet letters for the ordered list.

ol {
list-style-type: lower-alpha;
}

Ordered lists are very standard, but most of the time, you want to use unordered lists for the way you can insert your own images as bullet points. The following code is an example of how you use your own custom image in place of a bullet point.

ul {
list-style-image: url('/myimages/bulletpoint.png');
}

The above code uses the list style property "list-style-image" to change the bullet point to the customized image "bulletpoint.png." Again, this image must be uploaded to your server and available to the CSS code. Just like background images, it's considered unethical to use images on other servers, so always make sure you first download the image and include it in your HTML website projects before including it in your pages.

Interested in learning more? Why not take an online CSS course?

There is more to styling lists than just bullet points and images and numbers. You can also change the font, the sizing, and the padding. We haven't seen padding properties and values yet. Padding is the spacing between the image or bullet point and the text that follows. Padding also defines the space between a leading list item and those that follow. Each item can have its own padding value to space each bullet point list item. Padding also defines the space between the text and surrounding elements that are placed on right or left side or the top or bottom.

Look at the following CSS code that defines a class for an unordered list.

ul {
    list-style-image: url('/myimages/bulletpoint.png');
    padding: 10px;
    margin: 10px;
}

In the above code, padding and margin are used. Margin is used for crossbrowser support since some browsers use the margin property instead of padding. Just like the previous CSS class, this definition uses an image as bullet points.

In the above example, the "padding" property is used, but you can define each side of the text. You can define the left, right, top or bottom padding values. When you use just the "padding" property, all sides of the list items have the same pixel spacing. In this example, the spacing is 10 pixels.

For instance, suppose you just want to set a right padding value of 10 pixels. Instead of using the "padding" property, you use the "padding-right" property. The following CSS code is an example of defining one side of the list's padding.

ul {
list-style-image: url('/myimages/bulletpoint.png');
padding-right: 10px;
}

HTML has some standard, predefined styles you can use in place of bullet points. The default is a circle, but HTML also has square, for instance, as a style. If you decide to use this standard, then you don't need to create an image for your list items. The following code sets the list style as a square, which replaces the circle.

ul {
list-style-type: circle;
padding-right: 10px;
}

The one last part when styling lists is where the marker such as the numbers or bullets should be placed compared to content flow. For instance, should the bullet points be aligned to the left with the rest of the text or should the bullets be indented to the left of the text. These styles are defined using the "list-style-position" CSS property.

The two main values in styling list positions are "inside" and "outside." The "outside" value places the bullets or numbers to the left of the text. This means that the bullets stand out against the rest of the text alignment. The "inside" value positions the bullet points or numbers directly with the other text.

The following CSS code defines the position of an unordered list bullet points.

ul {
list-style-type: circle;
padding-right: 10px;

list-style-position: inside;
}

Ordered and unordered lists are not as common as some previous CSS styles we've discussed, but you still need to know them for website design. The padding property is another common property you can use with other HTML tags. For instance, you normally need to define padding and margins for div tags, the body tag, and tables if you use them. These list styles are useful when you need to place a list of items on your pages with custom images and layouts.

Using CSS Classes and IDs

CSS declarations are classes. If you've never been exposed to classes and object-oriented programming languages, the concept of inheritance is usually more difficult to understand. CSS lets you use inheritance, which means that objects or styles can "inherit" or take from their parent classes.

Think of inheritance similar to parents and children. Children inherit traits from their parents. The same happens in CSS. A child class inherits from its parent. The parent could define text as red and a size of 16 pixels. When you set a child class to inherit its parent traits (red font and 16 pixel font size), the browser automatically knows to set the child class to the inherited styles. In other words, if you've already defined a class style, you can create a child style that inherits the parent class styles without retyping the code. Inheritance saves time and creates more efficient code since you only need to define styles once.

Examples of Inheritance

CSS has a value named "inherit" that tells the browser to inherit a parent class style. You can use the "inherit" value in most of your CSS declarations.

For instance, you might have a paragraph style that defines a font color. You later have a subclass that also affects paragraph tags, but you want to add some declarations while keeping the same font color. Instead of redefining the font color, you can use the "inherit" value to use the same font color and defining a new style for your new class.

For instance, the following class defines a red font color for all <p> tags.

p {
color: red;
}

The above CSS class just sets the font color to red, but it uses all other browser defaults including font family styles and size. Suppose you now want to use the same red font, but you want to change the font to a bold style. The following CSS code inherits the red font color but changes the font to bold.

.boldparagraph p {
color: inherit;

font-weight: bold;
}

You have your two CSS classes, but how do you use them in your HTML? The following HTML code shows you how to use inherited classes. The first paragraph will only display the default browser font (without the bold style) in red, but the second paragraph with the set "boldparagraph" class will use red font with a bold style.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<p> This paragraph will show a red font. </p>
<p class="boldparagraph"> This paragraph will show red font in bold.</p>

</body>

</html>

You can also reset properties to their defaults using the "initial" value. For instance, you could have several classes that inherit from a parent class, but you might want to use the browser default instead of inheriting a style. For instance, you can use the first two CSS classes as an example, and then use a third class to reset the red font to the browser default. Take a look at the following CSS declarations.

p {
color: red;
}

.boldparagraph p {
color: inherit;

font-weight: bold;
}

.resetparagraph p {
color: initial;

font-weight: bold;
}

The above has three CSS class declarations. The first two we've seen before but the third one uses the "initial" value for the color property. In this example, the "resetparagraph" class would use the default font color (black) in the browser and bold the font. The following HTML code shows you how to implement the three classes.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<p> This paragraph will show a red font. </p>
<p class="boldparagraph"> This paragraph will show red font in bold.</p>

<p class="resetparagraph"> This paragraph will show the default font color (black) and bold the font. </p>

</body>

</html>

Using ID Properties to Define HTML Styles

Selectors are the HTML attributes that let you define styles in your CSS. When you set a specific selector in your CSS classes, you affect only one or part of the HTML tags in your web pages. Selectors let you drill down to specific sections of your web page and apply CSS styles only to those tags.

One common selector is the ID tag. This section will give you more detailed examples of CSS classes, inheritance, and using the ID properties in your CSS and HTML to implement these styles.

Each element in your HTML must have a unique ID value. You cannot have more than one element with the same ID value. ID properties are not required, but they make it easier to specify CSS classes as well as use these elements in your JavaScript, if you use JS for any dynamic UI integration. Previous HTML examples did not use the ID property, but here is the same HTML code with a paragraph tag that also has an ID.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<p> This paragraph will show a red font. </p>
<p id="paragraphId"> This paragraph will show red font in bold. </p>

</body>

</html>

The above HTML is what we've used in this chapter, except the second paragraph has an ID property instead of a class property. Because an ID is a distinct value among all other tags on the page, you can use CSS to apply a class to a single HTML element. The following CSS code applies to the above HTML page.

p {
color: red;
}

#paragraphId p {
color: inherit;

font-weight: bold;
}

Notice that the "paragraphed" class still inherits from the previous paragraph <p> tag style. However, with this new class, the name has a preceding # character. This character specifies that the selector should call a specific HTML tag with the corresponding ID. In this example, the first <p> tag in the HTML has a red font color and then the second <p> tag has a red font with the bold style.

You don't need to inherit properties to define a class for a specific ID selector. CSS gives you the ability to define a specific class for one element. For instance, suppose you have an HTML 5 <header> section that displays on each of your pages. You only have one <header> section, so every page has the same ID for the header. You could set a CSS class that uses the <header> tag or you could give your <header> tag in each page a specific ID. The result would be that the browser would apply the style to the ID for each of your pages. Just a reminder, make sure only one tag has the ID or you could run into bugs in your code.

The following CSS defines a class specifically for an HTML tag with the ID of "headersection."

#headersection {
color: red;

font-weight: bold;
}

Now, you apply the above CSS class to your HTML 5 code. If you recall, the <header> tag is an HTML 5 only tag.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<header id="headersection"> This paragraph will show a red font in bold. </header>

</body>

</html>

Inheritance and calling specific ID selectors are a major part of CSS coding. This section only used a few HTML tags, but you will use several CSS class declarations for several different HTML tags. Once you get the hang of inheritance, you'll find that it saves a lot of time and effort when you code long pages of CSS. With inheritance, you write one class and let the inherited classes pull styles from parent classes without the need to recode each of your CSS styles.