HTML Styles

CSS allows you to specify how each HTML element is presented to the user.

HTML is quite limited when it comes to the appearance of its elements. This is not so good if you're trying to give a website a unique look and feel, or you're trying to adhere to a corporate identity.

But it's not the purpose of HTML to do such things. That's the job of CSS.

What is CSS?

CSS stands for Cascading Style Sheets, and its purpose is to enable web authors/designers to apply styles across their websites.

With CSS, you can specify many style properties for any given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).

Like this:

It's fine to have spaces in between:

And you can even have each declaration on its own line:

Types of Style Sheet

There are different ways to implement styles into an HTML document. Generally, these come down to using an inline style sheet, embedded style sheet, and external style sheet.

You're not limited to just one method of applying styles to a document. You can combine all three methods if required.

Most modern websites use external styles for most (if not all) of their styles.

However, there are many valid reasons why they might also need to use one or both of the other methods.

Selectors

Embedded style sheets and external style sheets use selectors to specify which element to apply a style to. For example, body is a selector for the <body> element.

Here's the style sheet that I used for the above examples.

The first two selectors are body and h1. They select the HTML elements of the same name, and the styles are applied to those elements.

The next selector is #intro. This is an ID selector. It selects the element on the page that has an id attribute set to a value of intro. In other words, id="intro".

The next selector is .colorful. This is a class selector. It selects all elements in the HTML document that have a class attribute with a value of colorful. In other words, class="colorful"

There are many other types of selectors that you can use to style your HTML elements.

Here are some of the things you can do with CSS selectors:

Of course, as long as you can select it, you can style it. So you can get very specific when selecting which elements to style.

Here's a full list of CSS selectors that you can use for reference.