Where Do Cascading Style Sheets Belong ?

CSS elements can be located in three different areas. The first of these is within the headers of your html document. If you place CSS tags within your headers you must include the tags that tell your visitors computers what type of instructions it is reading. The mark-up would look like that in the textarea below:

The above style sheet, placed within the header tags of a document would red a website with a background colored black, maroon text, the font called Creepy (if your visitors' computers had it), and with text aligned to the left of the screen. The blank line between the opening style tag and the first line of CSS is optional.

Styles can be applied to specific HTML elements as well. For example, if I wanted a paragraph to have a black background, with red text, I could apply CSS to the paragraph tag. Let's take a look at the code for this in the textarea below.

The final, and most popularly used placement of CSS is within a seperate document, a style sheet. This sheet contains all of the styles for your site. Each page of the site calls up the style sheet and applies the element to the page. This makes it easy to change the font of your entire site. You make just one change in your site sheet and you're finished. Every site page will call on the sheet and the change will be created.

External CSS sheets are formatted with just style elements. Any HTML or other elements will be ignored. Format is the same as for a style sheet within the headers of a page. Create a new file. Enter your styles in the form shown in the textarea below:

You may add as many elements as you wish, one after the other. Once you've added everything, save the file as name.css or whatever you'd like. .css is the most accepted file extension for style sheets. Upload this file to the same directory as your site.

Now your style sheet is completed and you need to call it into your site. Within the headers of every page, include the following line.

Change styles.css to whatever you've named your style sheet. That's all there is to it. Every page containing this code will use the information from your style sheet.

Subsequent tutorials will focus on the various elements of CSS and their variables. Next up we'll show you the various body (or default) formats you can use CSS to affect.