CSS Properties

CSS, or Cascading Styles Sheets, is a way to make your HTML look more exciting. Remember that HTML sets the structure and contains the content for your web site and the style sheet creates the presentation of that document.

CSS is completely different from HTML. They have a format of:

selector: is the tag that the property is going to apply to.

property: could be for example "background-color:"

value: the value of the background-color could be grey (#cccccc)

and most properties can be applied to most HTML tags.

Hopefully it will help to think of the 2 documents as working side-by-side.

Your HTML document is on the right hand side of the image above. Your CSS document is on the left hand side of the document. In the CSS. The selector in the CSS file looks to find the tag in the HTML file. When it finds a matching tag, the value of the property is applied.

Before we can apply properties, the CSS file has to be linked. This happens in the head section of the HTML files associated.

Applying CSS

In order for HTML to be styled, the HTML file must be linked to the appropriate stylesheet.

In the <head> section of each HTML file, (the line after the <title> tag) you must type the following:

link: link the files together

rel: what is it -- a stylesheet

type: what's in the file -- text written as CSS

href: what's the name of the file -- style.css

Creating a CSS File

Dreamweaver will create a CSS file for you as well.

Choose File >> New >> Basic >> CSS

Click Create

Saving a CSS File

Choose File >> Save as

Type: style.css

Spelling counts. If your file name is spelled incorrectly the CSS will not be applied. As well, it must be saved in the same folder as your pages, not the images folder.

Starting Your File

The amount of properties that can be applied are endless. What you are going to do is change certain properties, save changes and reload (F12) to see what effect it had on your page.

All changes you are making should be completed in your CSS file.

Go to My Computer

Copy the following file found at J:\!BTT1O\Unit3\Dreamweaver\bg.png into your images folder in your website.

Enter in th following information to your CSS file.