Web Design/External CSS

< Web Design

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:

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:

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.

This article is issued from Wikiversity - version of the Sunday, July 27, 2008. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.