Web Design/External CSS

If you want to use the same CSS for several Web pages it is worth considering using a separate style sheet which you then link from each page. You can do this as follows:

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

The link tag should be placed within the <head> & </head> element. Here is an HTML file with a link to an external style sheet:

The link element's rel attribute must be set to the value stylesheet to allow the browser to recognize that the href attribute gives the Web address (URL) for your style sheet.

Exercise 1 - Creating a HTML page with an external CSS

In this example we will create:

a file called externalcss.html (which is the HTML web page); and
a file called external.css (which holds all the style information);

Both files should be located in the same directory.

externalcss.html will obtain style information from external.css

Part 1 - Creating externalcss.html

Type the code below into your code editor and save the file as externalcss.html (this page is a HTML webpage)

<html>
<head>
<title>My CSS Webpage</title>
<link type="text/css" rel="stylesheet" href="external.css">
</head>
<body>

<h1>Some heading</h1>
<p>This is a webpage that uses an external stylesheet. The style is controlled from the file <b>style.css</b>.</p>
<p>This is an advantage because you can call this same CSS Style on many pages. When you want to edit the style for the whole website you just have to change code within the <b>external.css</b> file.</p>

</body>
</html>

Part 2 - Create a page called external.css

The CSS code below should make the:

Left and right margin indent by 10%
Text color appear as white
Background color appear as Black

Type the code below into your code editor and save the file as external.css

/* style.css - a simple style sheet */
body {
  margin-left: 10%; margin-right: 10%;
  color: white; background: black;
}

View externalcss.html in your internet browser and you will notice that the css code from external.css is formatting the webpage.