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.
body {
margin: 0px;
padding: 4px;
color: #80FF80;
background-color: #006600 }

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>
<table>
<tr>
<td id="left"></td><td id="right"></td>
</tr>
</table>
</body>
</html>

Now you should have a blank green web page.

If you don't have a green 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.

Take a short quiz on the information you just learned.

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


Free Business Web Hosting

If you are building a website for a business or organization, you can put it online for free at Microsoft® Office Live Small Business. You can create your website with HTML and upload it or use their tools and build it online. Take your business online with Microsoft® Office Live Small Business. Get started for FREE! Take the TOUR!

Create Web Sites without Learning Code

Create web sites online without learning any code using Yahoo's simple but powerful Site Solution builder.
Try the Site Solution Demo

Sitebuilder 2.6 is even better than previous versions of Yahoo's downloadable builder. Download it to your PC and create a web site with all the bells and whistles.

Start today and SAVE 25% on your first 3 months.

Get everything you need for a great web site with Yahoo! Web Hosting - 25% off





Creating Columns on a Web Page with HTML

Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset KY 42502
Last Modified: September 17, 2008

 Adding Color to a Web page with HTML

Home

HTML Tutor
Beginner
HTML Basics
Add a Heading
Add a Paragraph

Intermediate
Phase I
Getting Started
Basic HTML Page
Creating Columns
CSS
Color
Headings
Images
Paragraphs
Site Heading
Linking

Advanced
Phase II
Start Phase II
Editing Pages
Change Appearance
Summary

Helps
Tag Glossary
Finished Code
Image Download
Color Tool
Hex Code Chart
Free Web Templates
Free Heading Graphic
Free Backgrounds
Put It on the Web
Quizzes
Your Questions

HTML Editors
Overview
NoteTab Light
Webbuilder

Online Builder Tutorials
Soholaunch
SiteReptile
SiteSTUDIO

Other Helps
Flash Web Sites