Coders' Guidebook
Tutorials
Web development
Android apps
Search

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. Right now, the file 'main.css' (the stylesheet) 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 stylesheets online that you wish to use in addition to your own. 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 be styling 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 its properties you wish to style inside curly brackets {}. For example, the body element of the webpage could be styled by typing the following:

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. This is what you may want to consider when styling the above properties:

  • margin - Margin is the space that surrounds an element. By default, most browsers will assign the body an 8-pixel margin. This introduces space between the webpage's content and the edge of the browser window. If you want your content to fill the entire webpage then set the margin to zero instead.
  • text-align - The text-align property helps position text on the webpage. In setting the text-align property for the body element to 'center', all text will position itself down the center of the webpage (unless directed otherwise). Alternative text-align values include 'left' and 'right'.
  • background-color - This property determines what colour the background of the webpage will be. You can find other colours to add to your website in our colour picker and table.

<<< Previous

Next >>>