Introduction
In the HTML units we covered what HTML is, and how it is used to mark up documents. These documents will be readable in a web browser. Headings will look larger than regular text, paragraphs break onto a new line and have space between them. Links are colored and underlined to distinguish them from the rest of the text. What you are seeing is the browser’s default styles (very basic styles that the browser applies to HTML to make sure it will be basically readable even if no explicit styling is specified by the author of the page). However, the web would be a boring place if all websites looked like that. Using CSS you can control exactly how HTML elements look in the browser, presenting your markup using whatever design you like.
What is CSS for?
As we have mentioned before, CSS is a language for specifying how documents are presented to users (how they are styled, laid out, etc).
A document is usually a text file structured using a markup language (HTML is the most common markup language).
Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer screen, projector or printer.
CSS can be used for very basic document text styling (for example changing the color and size of headings and links). It can also be used to create layout (for example turning a single column of text into a layout with a main content area and a sidebar for related information). It can even be used for effects such as animation.
CSS syntax
CSS is a rule-based language: you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page. For example “I want the main heading on my page to be shown as large blue text.”
The following code shows a very simple CSS rule that would achieve the styling described above:
h1 {
color: blue;
}
The rule opens with a selector . This selects the HTML element that we are going to style. In this case we are styling level one headings (<h1>).
We then have a set of curly braces { }. Inside those will be one or more declarations, which take the form of property and value pairs. Each pair specifies a property of the element(s) we are selecting, then a value that we’d like to give the property.
Before the colon, we have the property, and after the colon, the value. CSS properties have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We may also have some other properties inside the braces, such as the font-size property to change the size of the text (this property can take various size units as a value).
A CSS stylesheet may also contain many such rules, written one after the other:
h1 {
color: blue;
}
p {
color: green;
}
You will find that you can quickly learn some values, whereas others you will need to look up. The individual property pages on MDN (CSS reference) give you a quick way to look up properties and their values when you forget, or want to know what else you can use as a value.
Adding CSS to our document
The very first thing we need to do is to tell the HTML document that we have some CSS rules we want to use. There are three different ways to apply CSS to an HTML document that you’ll commonly come across, however, for now, we will look at the most usual and useful way of doing so: linking CSS from the head of your document.
For example, to link and use the file styles.css, you just have to add the following line somewhere inside the <head> section of the HTML document (the .css extension shows that it is a CSS file):
<link rel="stylesheet" href="styles.css">
This <link> element tells the browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute. You can test that the CSS works by adding some rules to styles.css. For example, using your code editor you may add the following code to your CSS file:
h1 {
color: blue;
}
If you save your HTML and CSS files and reload the page in a web browser, the <h1> headers should now be blue. If that happens, congratulations (you have successfully applied some CSS to an HTML document). If that doesn’t happen, carefully check that you’ve typed everything correctly.
Proposed exercise: Linking files and adding styles
Our starting point in this unit is an HTML document. Copy the code below and save it into a new HTML file to work on your own computer. After that, create a new CSS file to set all
Remember that the most important part in this exercise is that you link your CSS file by putting a single line inside your<h1>titles to red color and save it asstyles.cssin the same folder as the HTML document. Finally check the results using your browser and do not forget to validate the code.<head>section; after that, insidestyles.cssyou will only need to insert three lines:
- HTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Getting started with CSS</title>
<!-- We will use the styles which are inside 'styles.css' -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I am a level one heading</h1>
<p>This is a paragraph of text.</p>
<p>This is a paragraph and also a link to <a href="https://google.com">Google</a>.</p>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</body>
</html>
- CSS file (
styles.css):
h1 {
...
}
Proposed exercise: Styling headers
Using the HTML and CSS files of the previous exercise, add some <h2> headers and change their colors. You can try several colors and choose anyone you like (red, green, blue, gray, purple, olive, navy, etc). As usual, check the results using your browser and do not forget to validate the code.
You may find the keywords to set many colors at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Styling HTML elements
By making our heading blue or red, we have already demonstrated that we can target and style an HTML element. We do this by targeting an element selector (this is a selector that directly matches an HTML element name). To target all paragraphs in the document you would use the selector p. For example, to turn all paragraphs green you would use:
p {
color: green;
}
You can target multiple selectors at once, by separating the selectors with a comma. For example, if you want all paragraphs and all list items to be green, your rule will look like this:
p, li {
color: green;
}
Proposed exercise: Change color of several elements
Using the HTML and CSS files of the previous exercise, change the color of the paragraphs and items in the list. You can try several colors and choose anyone you like (red, green, blue, gray, purple, olive, navy, etc). As usual, check the results using your browser and do not forget to validate the code.
Remember you may find the keywords to set many colors at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Styling things based on state
Another type of styling we shall take a look at in this unit is the ability to style things based on their state. A straightforward example of this is when styling links. When we style a link we need to target the <a> (anchor) element. This has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being clicked (activated). You can use CSS to target these different states. For example, the CSS below styles unvisited links pink and visited links green:
a:link {
color: pink;
}
a:visited {
color: green;
}
You can also change the way the link looks when the user hovers over it, for example removing the underline, which is achieved by the next rule:
a:hover {
text-decoration: none;
}
In the above example, we have removed the underline on our link on hover. You could remove the underline from all states of a link. It is worth remembering however that in a real site, you want to ensure that visitors know that a link is a link. Leaving the underline in place, can be an important clue for people to realize that some text inside a paragraph can be clicked on (this is the behavior they are used to). As with everything in CSS, there is the potential to make the document less accessible with your changes. We will aim to highlight potential pitfalls in appropriate places.
Proposed exercise: Styling links
Using the HTML and CSS files of the previous exercise, insert several paragraphs with some other links to your preferred pages, and change the color of all the links. You must also use different colours when the link has been visited, and when the mouse is over the link. You can try several colors and choose anyone you like (red, green, blue, gray, purple, olive, navy, etc). As usual, check the results using your browser and do not forget to validate the code.
Remember you may find the keywords to set many colors at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Changing the default behavior of elements
When we look at a well-marked up HTML document, even something as simple as our example, we can see how the browser is making the HTML readable by adding some default styling. Headings are large and bold and our list has bullets. As we said before, this happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch. All modern browsers display HTML content by default in pretty much the same way.
However, you will often want something other than the choice the browser has made. This can be done by simply choosing the HTML element that you want to change, and using a CSS rule to change the way it looks. A good example is our <ul>, an unordered list. It has list bullets, and if I decide I don’t want those bullets I can remove them like so:
ul {
list-style-type: none;
}
The list-style-type property is a good property to look at on MDN to see which values are supported. Take a look at the page for list-style-type and you will find an interactive example at the top of the page to try some different values in, then all allowable values are detailed further down the page. Looking at that page you will discover that in addition to removing the list bullets you can change them.
Proposed exercise: Changing list bullets
Using the HTML and CSS files of the previous exercise, try to set the
You should get something like this:list-style-typetosquare. As usual, check the results using your browser and do not forget to validate the code.
Proposed exercise: Changing list numbers
Using the HTML and CSS files of the previous exercise, add an ordered list (<ol>) and set the
You should get something like this:list-style-typetoupper-roman. As usual, check the results using your browser and do not forget to validate the code.
Adding classes
So far we have styled elements based on their HTML element names. This works as long as you want all of the elements of that type in your document to look the same. Most of the time that isn’t the case and so you will need to find a way to select a subset of the elements without changing the others. The most common way to do this is to add a class to your HTML element and target that class.
In your HTML document, you can add a class attribute to any element. For example, your list may look like this when using the class attribute:
<ul class="square-red-list"> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul> <ul class="circle-blue-list"> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul>
After that, in the CSS you can target the classes of square-red-list and circle-blue-list by creating specific selectors that start with a full stop character. For example:
.square-red-list {
list-style-type: square;
color: red;
}
.circle-blue-list {
list-style-type: circle;
color: blue;
}
To see what the result is, you only need to save and refresh.
Proposed exercise: Different styles for each list
Using the HTML and CSS files of the previous exercise, add several lists to get something similar to the result below. As usual, check the results using your browser and do not forget to validate the code:
Regarding the unordered lists (<ul>) you have to create 4 different classes, each one using a different value for thelist-style-typeproperty (none,disc,circle,square). For the ordered lists (<ol>) you have to create another classes, each one also using a different value for thelist-style-typeproperty (upper-roman,lower-greek,lower-alpha,upper-alpha).
Proposed exercise: Using CSS to style headers, paragraphs and general text
Change the color of any elements you like from your previous HTML exercises about headers, paragraphs and text formatting in units 1 and 2 (https://fernandoruizrico.com/html-unit-1/ and https://fernandoruizrico.com/html-unit-2/). Do not forget to validate your code again.
Remember you may find the keywords to set many colors at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
Proposed exercise: Using CSS to style hyperlinks
Change the color of any elements you like from your previous HTML exercises about links in unit 3 (https://fernandoruizrico.com/html-unit-3/). Do not forget to validate your code again.
Proposed exercise: Using CSS to style lists
Change the color, bullets and numbering of any lists you like from your previous HTML exercises about lists in unit 4 (https://fernandoruizrico.com/html-unit-4/).
Quiz
Test your skills with this quiz about basic concepts, and this one about colors and simple selectors.