Coders' Guidebook
Tutorials
Web development
Android apps
Courses Search

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

Stylesheets govern the appearance of a webpage. They contain information on what colours should be used, what size your content should be, how it should position itself on the webpage and much more.

You can link your webpage to a stylesheet by referencing that stylesheet in the head element of the HTML file. A single HTML file can incorporate information from multiple stylesheets, and a single stylesheet can serve multiple HTML files. You can reference the stylesheet 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" (our 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 your '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 very 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 href="main.css" 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 we created and the head element of your HTML file should look like this:

<!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>

Our 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 our HTML page. 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 declare the name of a given element/class/id then list its properties inside curly brackets {}. For example, we could style the body element of our webpage by typing the following:

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

Notice how we declare the name of the element we are styling (body) then modify its properties one-by-one. This is what you may want to consider when styling the above properties:

  • margin - Margin is the space which surrounds an element. By default, most browsers will assign the body an 8-pixel margin. This introduces space between the webpage content and 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' we ensure all text is positioned centrally (unless directed otherwise). Alternative text-align values include 'left' and 'right'.
  • background-color - This property determines what colour the background of our webpage will be. You can find other colours to add to your website here.

<<< Previous

Next >>>