Using External CSS

Linking to an External Style Sheet

Using external style sheets allows you to get the full flexibility of using CSS to style and design your html pages. Defining all your styles and linking to it with your html files allows you to control the look and feel of your entire site from one file, saving you immeasurable amounts of time in editing and creating styles for your site.

Make sure you know how to apply css styles to html elements with the appropriate css selectors.

To use an external style sheet you have to link to it with the "link" element in the "head" section of the web page you want to use it on.

Create a folder named "css" in the same folder(root folder) that you will be saving your html files. Now copy and past the following css in it.

CSS Code:

body {
  background-color : #ccd;
  padding : 0;
  margin : 0;
}
#main_container {
  width : 900px;
  margin : 0 auto;
  border : 1px solid #f00;
  padding : 5px;
}

Save the file as "styles.css" in the folder you just made. There should be no html at all in this css file. Copy and paste the following code into a new file.

Html Code


<html>
<head>
  <title>CSS Practice</title>
  <link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
	<div id="main_container">
		<p>This is some holder text for now</p>
	</div>
</body>
</html>

Save the file as "home.html" and open it in a browser. You have just created your first web page that uses an external css style sheet to control its display. Now as you add elements to your html file you can add styles to this page to control the display of those elements.

Now that you know the basics of how to use css in your web pages, read some more css tutorials on how to get the most out of css.

CSS Tutorials