The Basics - Learning CSS - Where Styles Go

CSS - Cascading Style Sheets - it's what you use these days to 'style' your Web pages. CSS is used to change font colors, and backgrounds, borders, format lists, links, etc. It is also used to arrange elements on the page and form certain page layouts.

It use to be that Tables or Frames were used when making a layout for a Web page, but now CSS is the way to go. Tables really are no longer the accepted way to create web layouts. Every thing can be done with CSS and with cleaner and less code. Plus, CSS makes it very easy to format all the pages in your site. Actually, that's the main purpose of CSS.

Where Does CSS Go

There are three ways to add CSS to your Web page.

CSS can be put into a separate, or external .css file, and be linked to via a statement in the head section of your HTML page

<html>
<head>
<title>Learning CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
...

You can also have an embedded, or internal, style sheet which is put right into the head section of the HTML page

<html>
<head>
<title>Learning CSS</title>
<style type="text/css">
your styles go here
</style>
</head>
<body>
...

Or you can use inline styles. These are used inside the body of HTML to style a single element.

<html>
<head>
<title>Learning CSS</title>
</head>
<body>
<p style="color:#999999; border: 1px solid #000000;">
Some paragraph text
</p>
</body>
</html>

We will learn what color and border do later.

You can actually use all three of these methods in a single page. Sometimes you will have elements on a page that you want to be styled differently than all the other pages. That's where the embedded and inline styles can come into play. If you are using all three, you have to pay attention to the order you set things up. So, usually you put in your external style sheet link first. Then you do your embedded style sheet. Finally, you can add inline styles to elements. Basically, the inline style will have the highest priority - or it will override anything in the external or embedded style sheet. The embedded style sheet will have priority over the external style sheet as long as it is after the link to the external style sheet.

So, now we know where the styles go - next time we will learn about the syntax of CSS.

Popularity: 6% [?]