Add Style Sheets to Your Website

CSS or Cascading Style Sheets are the best invention since sliced bread as far as web pages are concerned.

You can control the entire appearance of a web page using CSS.

There are three ways that you can add style sheets or style settings to your code.

You can use embedded sheets which are placed in the head section of the document.

You can use inline style sheets which are placed in the tags of the page.

You can use linked style sheets which are created on a separate page and attached using a statement in the head section of the document.

You can also use all 3 types on the same page.

We're going to develop this site using a linked style sheet.

Style sheets can be created using a simple text editor.
Open your text editor and paste this block of code into a blank page.
* {
margin: 0 0 0 0;
padding: 0 0 0 0 }

body {
color: #80FF80;
background-color: #000000 }

Save the page in your htdocs folder as stylesheet.css. The .css extension is critical.

Now open your web page, firstpage.html and paste this code between the open and close head tags:
<link rel="stylesheet" href="stylesheet.css" type="text/css">

Save the changes and look at your page in a browser.

Note: If you didn't close the browser, right click on the web page and click Reload or Refresh.

Your web page code without the Doctype now looks like this:
<html>
<head><link rel="stylesheet" href="stylesheet.css" type="text/css"></head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

Now you should have a blank black web page.

If you don't have a black screen, check your css file and make sure you saved it with a css extension in the htdocs folder. You'll need to use the 'All Files' filter on the text editor to see the file in the folder.

Also be sure you spelled the name right. Did you skip a step?

If you still see a white screen one or both of the pages may not have been saved in the htdocs folder. Web pages and style sheets must be located in the same folder or a proper path to the style sheet must be added to the linking code.

Look at the style sheet code. We'll being adding more settings as we go along. The entries will be in the same format. Name the element or HTML tag and then place the settings between a set of curly brackets.
In this case we provided settings for the body tag:
body {settings go in here separated by semi-colons }

Each individual setting is followed by a semi-colon. We added settings for margin , padding and the default colors of our web page.

Tip: When you add the next entry to the style sheet, create a little space between the entries using the Enter or Return key. It will make it much easier to read when you start making changes to it.


Formatting the Columns

Copy and paste the following code into the style sheet below the existing entries.

#main {
width: 1000px;
height: 400px;
margin: 0 auto 0 auto;
background-color: #006600 }

#left {
width: 400px;
height: 400px;
float: left;
background-color: #006600 }

#right {
width: 600px;
height: 400px;
float: right;
background-color: #006600 }

These 3 style settings will define the width and background color of our columns and center them on the page.

We are purposely not adding any borders, margins or padding to the divisions at this time.

The one margin definition on the main division margin: 0 auto 0 auto is used for centering the columns.

Notice that the sum of the width of the left and right divisions is equal to the width of the main division.

We have set the height of all divisions to 400 pixels. In more advanced tutorials, you will learn how to create adjacent columns of equal length that adjust to the content they contain.

The float: left float: right definitions are crucial when using this method to center your adjacent divisions.

Save the changes to the style sheet.


If you've looked at the page in a browser and you have a green rectangle on a black screen, you're ready to learn more about Color


Take a short quiz on the information you just learned.