Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

Cascading Style Sheets (CSS) is a document type and the associated scripting language that describes the presentation of HTML documents. Using the CSS language, you can control the look and feel of web pages by defining layout, text, and image properties to be applied in a wide array of contexts.

This course is a comprehensive introduction to both writing and implementing CSS. Using the document hierarchy model, you’ll learn how to tailor web styles to specific areas. With your hierarchy defined, you’ll dive deep into CSS fundamentals, adding colors, text styles, and backgrounds to your web page. After you’ve defined these elements, you’ll use CSS to define layouts around pictures and text flow and completely control your web page’s look. You’ll wrap up by exploring the essential animation functions of CSS.

By the end of this course, you’ll have functional mastery of Cascading Style Sheets and the CSS scripting language. You’ll be prepared to build professional web pages with your code.

Luka

Highly recommended! Tim covers everything & gets right to the important stuff!

Frontend dev

The Complete Beginner’s Guide to CSS

# Types of lists

In HTML, there are two list types:
**Unordered lists** (`<ul>`) are list items that use bullet points:

- Coffee
- Tea
- Biscuits

**Ordered lists** `<ol>` are list items that are numbered (or use i., ii., and iii.):


<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Biscuits</li>
</ol>

Each item is given the `<li>` tag, like in the example below:

```css
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Biscuits</li>
</ol>
```

We use lists all the time when building on the web. Most navigation menus are HTML lists, which have been styled using CSS.

# How to style lists with CSS

CSS has several properties that we can use for styling. We can set different list item markers, use images as markers, and add colors and background colors.

## The `list-style-type` property

We use `list-style-type` to set a marker for our list:

```css
li {
  list-style-type: square;
}
```

There are many possible values, such as `circle`, `square`, `decimal`, `upper-roman` and `none`. 

> **Note:** If you don’t set the color of the list marker, it’ll default to whatever the element color is.

We can also set the `list-style-type` property to `none` to delete these markers.

## The `list-style-position` property

With the `list-style-position` property,  we can move the marker to be `outside` or `inside` the list content:

```css
li {
  list-style-position: outside;
}

li {
  list-style-position: inside;
}
```

For example, when using `inside` with lists of text, each marker is contained within the text box, indenting the first line of text for each list item.



Introduction to CSS

CSS Selectors

CSS Core Concepts

CSS Units

CSS Fundamentals

Backgrounds & Colors

CSS Layout

Animating Your CSS

CSS Architecture

Conclusion

Styling Lists

Types of lists