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.
-
Inline Styles
The above code is an example of inline styles. It is called inline because we declared the styles within the HTML tag itself.
While inline styles can be a quick and convenient way to add styles to an HTML document, this method should be used sparingly.
Adding inline styles all over a website can make it much more difficult to maintain. A small change can become a major undertaking if the style has been applied to many pages across the site.
-
Embedded Styles
A step up from inline styles (when it comes to maintainability) is embedded styles.
Embedded styles are added to the
<head>element of the document (or a<noscript>element that's nested within a<head>element), and can contain all (or at least, most) of the styles for the document. This can make the document a bit easier to maintain, especially if it contains many styles.To add embedded styles to a web page, enclose the styles between
<style>tags. -
External Styles
Taking it a step further, you can put all your styles into an external style sheet.
External styles refers to creating a separate file that contains all style information. This file is then linked to from as many HTML pages as you like — even the whole site.
To add an external stylesheet to a web page, use the
<link>tag, providing the URL of the style sheet in thehrefattribute, as well asrel="stylesheet".For the following example, I've taken the styles from the above (embedded) example, moved them to an external style sheet, then linked to that file.
So, you can see that the HTML file no longer contains any actual CSS code. The CSS code is located in the external file.
The
@importRuleYou can also use the CSS
@importrule to import an external style sheet.To do this, use the
<style>tag.Note that this method can affect performance and it's often more efficient to use the first method (i.e. with the
<link>tag).However, the
@importrule can also be used from within the external style sheet itself (in order to import another style sheet into that one) without incuring the same performance issues.
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:
- Select only those elements that have a certain attribute.
- Select a certain element that has a certain attribute with a certain value.
- Select a specific element, but only when it's inside another, specific element.
- Select only the first child of a specific element.
- Select only the last child of a specific element.
- You can even specify which child (eg, the 3rd child, or the 4th, the 5th... etc).
- Select an element only when it's being hovered over.
- Much more.
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.