Coders' Guidebook
Tutorials Dictionary

How to create (and use) a CSS stylesheet on your website

Stylesheets govern the appearance of a webpage. They contain instructions on the colours that should be used, what size different components should be, how components should position themselves on the webpage and more.

To incorporate a stylesheet into a webpage, you must include a link to the stylesheet in the head element of the HTML document. A single HTML document can incorporate multiple stylesheets, and a single stylesheet can serve multiple HTML documents. The code used to import a stylesheet will look like this:

<link rel="stylesheet" type="text/css" href="main.css">

In this code, 'href' defines the location of the stylesheet. As it stands, the 'main.css' stylesheet file does not yet exist. Let's fix that.

Creating the CSS stylesheet

Create a new file in your code editor and save it in the same folder as the 'index.html' file. Set the file name to 'main' and save it as a Cascade Style Sheets (.css) file. The complete file name should be 'main.css'.

A single CSS file can serve as a stylesheet for an infinite number of HTML files. This is useful because it enables you to change the style and layout of multiple webpages simultaneously. It is also worth noting that one HTML file can use multiple stylesheets. For instance, you may find online stylesheets that you also wish to use. You can link to additional stylesheets by creating new entries in the HTML head element below any previous stylesheet declarations. Most parts of the declaration will remain the same. You simply change the destination defined in the href attribute to reflect the location of the new stylesheet:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

For now, we will just use the 'main.css' stylesheet. To incorporate the infromation from the stylesheet into the index.html file you should format the document's head element so it reads as follows:

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

</body>
</html>

Your first CSS code: styling the body element

Once the 'main.css' stylesheet is linked to your HTML page, you can begin to add some styling information. In this example, we will style the body element of the HTML document. As you progress through these tutorials we will explore CSS in greater depth and style other parts of the website.

Begin by opening the 'main.css' file in your code editor. CSS code generally follows the same format: you use a selector to identify a given element/class/id then list the properties you wish to style inside curly brackets {}. For example, the body element of the webpage can be styled by writing the following code:

body {
    margin: 0;
    text-align: center;
    background-color: Snow;
}

Notice how the element that is being styled (body) is declared and its properties are defined one-by-one. You may want to consider the following information when styling the above properties:

<<< Previous

Next >>>