Learn Web Design

So, what is CSS? It can control the design of your entire web site. Yeah, it can. If you know how to use it. And you should! Because it's so much easier to change the color of your background one single time, instead of one time for every page in your web site.

Since this is only a quick introduction to CSS I will only explain the basics of how to set the properties of different tags, styles and so on.

It's important to know the prefixes of the different things you can control in a sheet.

With standard HTML tags like html, body, p, h1 etc. you just type the name of the tag as shown in the image below. Styles you have created yourself always start with a dot( . ). And finally, id or names of div tags etc start with a #.

After the name of the tag or style is where you set the properties. Like font size, color and so on. But remember! These properties have to be placed inside two curly braces. First an opening curly brace, then a closing one.

To set a property, find the name of the property you want to set (ex: font style). Then type "font-family" on a new line as shown below and follow with a colon ( : ). Then set the font you want to use. Ex: "Arial, Helvetica, sans-serif". Then follow with a semicolon ( ; ). If you want to add a new property, just repeat the process on a new line.

Take a look at the examples:

So how do you use it? Create a new html file in Dreamweaver 8 (CTRL+N). In the "Properties" tab, in the "Style" drop down menu, select "Attach Style Sheet". Then find your css file and select "Add as: Link" and then "Ok".

Write a few words in your html document and highlight them. In the "Properties" tab, in the "Style" drop down menu, select the style you just created.

And that's basically it. If you want to learn more, please visit the forums and ask around.