CSS Home

Adding CSS to Your Page

There are different ways you can incorporate CSS into your website. You can link to an external CSS file, you can write CSS directly in the head of your page by using style tags, or you can write CSS as an attribute of an element (using the style attribute). We will focus on creating our CSS in a separate CSS file (the cleanest, best option for multi-page sites).

To link to a separate css file you fould first create a new file and save it in your website folder. You will need to save this file as a .css filetype. For example, "style.css".

Then, in your HTML, include a link to this file in between your <head> tags. If the css file is in the same folder as your index page, the link should be written as follows: <link href="style.css" type="text/css" rel="stylesheet">

Let's break down the attributes in this new link element used to incorporate style in our sites:

  1. href - specifies the path to the CSS file.
  2. type - specifies the type of document being linked to. The value should be text/css.
  3. rel - specifies the relationship between the HTML page and the file it is linked to. The value should be stylesheet when linking to a CSS file.

in HTML: 

<html>
	<head>
		<title>Introduction to CSS</title>
		<link href="style.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
	</body>
</html>

Next: CSS Selectors
Previous: CSS Syntax