How to Build Websites With CSS
Integrating cascading stylesheets (CSS) into your website gives you the ability to control the look and feel of your site---everything from fonts used, text sizes and colors to lists, images and other content elements. After you've learned hypertext markup language (HTML) to create websites, your next step is to add CSS to your repertoire. While the content---the text and images---will reside on HTML pages, you'll use CSS to define the style of those content elements.
Other People Are Reading
Instructions
-
Create and reference your stylesheet
-
1
Start a new CSS file. In most web design programs, type CTRL+N (CMD+N on a Mac) to start a new document, and the software will ask what type of file you want. Select Cascading Stylesheet (CSS), and save the file with a dot-css extension.
-
2
Set your primary page design attributes. The start of your stylesheet (assuming you're only using one--if using more than one, this will be the stylesheet that handles the basic look of your website) should include elements like the width of your page, background colors and images, the font you will use, the text sizes and colors for links, headings and body text, and other over-arching attributes.
-
-
3
Define your IDs and classes. This is where you drill down and define what the other various elements of your website will look like. The syntax looks something like this:
#ID { attribute1:description; attribute2:description; }
or
.class element { attribute1:description; attribute 2:description; attribute3:description; }
If you're unsure of the vocabulary to use for attributes and descriptions, most major bookstores will carry CSS guides, or use one of the references listed below. Dreamweaver will assist you with a pop-up menu, if that is the software you use.
-
4
Reference your stylesheet on every page of your website that relies on it. To do that, insert the following line of code between the <head> and </head> tags:
<link type="text/css" rel="stylesheet" href="LocationAndNameOfYourStylesheet.css">
-
1
Tips & Warnings
Using an external stylesheet rather than including your style in the HTML pages will help your site do better in search engine rankings because it thins out the amount of code on your pages, allowing those search engines to find your content more easily.
