Setting Up An External Style Sheet
Anytime you have more than a few pages in your website it's smart to control all styles from one external file, an "external style sheet". This means you can change things like font size, color, padding, margin and hundreds of other presentation elements throughout your website by simply making changes in ONE FILE. Here's how it works.
Start With Basic HTML Template
We'll start with our basic template..
<html>
<head>
<title>title of your page</title>
</head>
<body>
content area:this is where your content goes....
</body>
</html>
Add Link Reference to External Style Sheet
Between the head tags, place this line of code:
<link href="style.css" rel="stylesheet" type="text/css"/>
Or like this...
<html>
<head>
<title>title of your page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
content area:this is where your content goes....
</body>
</html>
All we did was set up a link to point at " style.css". This "link reference" is simply included in all the pages you wish to reference your style sheet, probably each page you create you should include this line of code. Next we'll create "style.css".
Create External Style Sheet
Open note pad and paste this basic style into the file, save as "style.css"
body {
text-align:center;
font-family:verdana;
font-size:12px;
padding:0 0 0 0;
color:#333;
background:#fff;
}
Summary
This is a pretty simple example of course - all we did was set up a basic style for the "body" of our web page. Still you can see that by making changes to the body selector, you can change the entire look of the page. Review, CSS Selectors.
Review the web building process: build web site free
Was this helpful? Leave a comment...
Please leave your comment...name or email is not required. If you leave your email we WILL respect your privacy and not spam you. We may update you occasionally with value added info related to web building, web design, CSS, HTML. Thanks!