Using a list is a great way to deliver easy-to-understand information on a website. Using a CSS list to enhance that process can enhance that ability even further. In this brief guide, you will see how you can use CSS to alter the HTML list style for your own work.
Sample code and output images are provided to help guide you along the way. If you are just getting started in the world of web design, please take a look at the beginner’s guides here on Udacity. The posts HTML for Dummies and CSS Basics for Beginners will get you started with a solid foundation to work with.
CSS List: Creating the HTML List
Before you can alter the HTML list style, you need to have a list on the page to work with. Creating a list within the HTML document is made easy with the use of the “unordered” and “ordered” list element tags.
An unordered list is a list of items with no sense of implied precedent or steps. The ordered list instead applies numbering to enforce that aspect so the reader knows explicitly what comes before and after each point on the list.
To create an unordered list you need to use the “ul” tag. The contents of the list are nested within the ul tag using the “li” tag. The li tag represents a list item. Creating an ordered list is quite similar. However, you use the “ol” tag to hold the list elements instead.
In the HTML document example below, both types of lists have been created. Note how the list elements are nested with the opening and closing tags of each list respectively.
Using the above code, with no CSS list styling applied, the page will render as shown below.
Just like that, you have two lists ready to go on the HTML page. With the lists created, you can now move on to styling them using CSS.
CSS List: Setting the HTML List Style
Both the unordered and ordered list types can have their respective styles manipulated through the use of CSS. The first change to look into is changing the style of the list presentation. This can be achieved by using the “list-style-type” CSS property.
The values you will want to use for this property will depend on the type of list you are using. For an unordered list, you can use the following values.
- Disc: The default value for a list item in an unordered list.
- Circle: This value changes the bullet to an unfilled circle.
- Square: Using this value transforms the bullet into a square.
For an ordered list, you can utilize the following values.
- Decimal: The default numbering value used.
- Lower-roman: Numbering using lowercase roman numerals.
- Upper-roman: Numbering using uppercase roman numerals.
- Lower-greek: Changes the number values to lowercase greek characters.
- Lower-latin: Uses lowercase latin letters.
- Upper-latin: Uses uppercase latin letters.
In the CSS example below, you can see the list-style-type property in use for both list types. The unordered list is set to use the square bullets replacing the default disc value. The ordered list has been provided the value of “lower-roman” for it’s numbering style.
With that CSS list styling in place, the page will render each list as shown below.
Note that you can also set the value of list-style-type to be “none” instead. This of course will remove the bullet or numbering style from the list.
CSS List: Using Images as Bullets
You also have the option of using an image for the list as well. Through the use of the “list-style-image” CSS property, the bullets in a list can be replaced with an image of your choosing.
In the CSS example below, the list-style-image property has been set with a local image value. Be mindful of the image size you choose to use as well, as it will be displayed in an unaltered form unless you specify differently.
In the next image, you can see how the images have replaced the normal bullets.
CSS List: Changing the Font Style
The text of the list can be manipulated through CSS just like the bullets. In the following CSS example, the unordered list has been provided with a font color of red. The font size and weight properties have also been called up to further style the font in the list.
With the CSS applied to the unordered list element, the HTML page will render as displayed below.
CSS List: Adding a Background
Another neat option you can have on your list is a background. You can use a solid color, a gradient, or even an image if you feel it’s appropriate for the design. It’s just another way CSS gives you great options to work with.
Adding the background is done with the “background-color” property. For the CSS example below, this property has been given the value of red. Also, take note of the width property as well. It has been so as not to extend across the entire block’s width. Finally, a “line-height” property value was set to provide vertical spacing between the list elements.
With that CSS code saved in place, you can see the effects on the HTML page.
A gradient background can also be applied with the “background: linear-gradient” property. In the CSS example below a set of two colors have been set for the value with the direction to have them meld to the right.
This bit of CSS work will render as shown below on the page.
Lasty, using an image for your list background is a snap as well. For this effect, you will call on the “background-image” property. The value will be the location of the desired image. For the CSS example used below, the image is locally sourced. A bit of stroke was added to the font as well to allow for easier visibility.
The image will now render behind the list as displayed in the example below.
Where to Go From Here?
Two other great design points are the posts The Easy Guide to Building A CSS Image Gallery and How to Build Your Own CSS Grid Container. These can give you some ideas on presentation as well as containment for your work. Lastly, also take a read on The CSS Box Model: Explained for Beginners to get a great overview of how your HTML elements interact on the page. This can give you some great insight to how your list might be placed.
However, why stop at just web design? The creative ability in higher programming is allowing people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey. Embrace the better you now.
