Where to put CSS style rules

There are three different places you can place your style rules:

In a separate file (a stylesheet) -- One set of style rules can affect a whole website.
In the <head> section of a web page -- style rules can affect all tags on that page, and
Local or "in line" -- they only affect one portion of a page or even just a snippet of text,

In a separate file

A stylesheet is just a text file containing CSS style declarations. The standard convention is to give stylesheets the .css extension.

Somewhere in the <head> section of your page, create this <link ... /> :

<head>
<title>How to link stylesheets</title>
 
 
<link rel="stylesheet"
      href="mystyle.css"
      type="text/css" />
 
</head>

The href attribute obeys all the conventions about absolute and relative URLs that the <a href="..."> does.

The 'stylesheet' at mystyle.css is a text file which contains just style rules (no comments are necessary to hide it from older browsers.), for example:

body {
  background-color: #bbbbbb;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}
 
/* Here's how to make a comment in a style file */

Google "@import CSS" for another way of linking to external stylesheets, that only newer browsers support.

In Dreamweaver

When you create a new style, DW will ask if you want to create it in an external stylesheet.

You can "File | Open" your stylesheet (.css file) and edit it as you would with a text editor.

In the <head> section

Style rules in the <head> section affect only one page at a time. It is common to format them with comments so as to hide them from older, CSS-unaware browsers:

<head>
<title>Style Example</title>
<style type="text/css">
<!--
p,ul {
  font-size: 1.5em;
  line-height: 2.3em;
}
-->
</style>
</head>

Local or in-line styles

Local styles let you apply CSS rules at just one place in one page.

This is usually a bad idea:

You can't change local styles from one central stylesheet.
Much harder to maintain consistency of other parts of your page/site.

Before you use a local style for anything but first-time experimenting, you should ask yourself first:

Could I be using some standard HTML tag and styling it with my style sheet instead?
Why not create a CSS class and set the rules in my style sheet instead?

But, it sure is a useful trouble-shooting technique to style stuff locally.

You can use the style attribute in just about any HTML tag, for example:

<p style="text-indent: 2em; color: red;">This paragraph should have the
first line indented, and all the text should be red.</p>

Or to apply the same styles to more than one tag, try:

<div style="margin-left: 5em">
<p> A division "tabbed" over to the right...</p>
<ul>
  <li>Will affect <b>all</b> the tags within the division,</li>
  <li>More...</li>
</ul>
 
 
</div>

A division is always a square box. If you want to affect just some text, you can use the <span> tag instead.:

<p>I'd like <span style="color: green">just some
of this text to be green</span>, not all of it.</p>

Where to put CSS style rules

In a separate file

In Dreamweaver

In the <head> section

Local or in-line styles

See also: