4. Creating the Style Sheet

Before we create our first rule, which will set up the background of the pages at our site, we need to create the style sheet.

Creating the Style Sheet

We already know that the style sheet is just a text file.

If you are using a text editor

1. run whatever text editing tool you have at your disposal, and create a new document
2. open a new document (usually running an application will open a new document automatically)

If you are using a WYSIWYG tool, like Style Master

1. run the application
2. open a new style sheet window (usually a new window opens when you run the application)

Saving the Style Sheet

I hope that you follow the practice of creating your entire site within a root directory (folder). Any page, image, or other object within your site should be saved inside this folder. Then, when you upload your site, you just upload this root directory, and all of your site is uploaded, links, images etc. intact.

Because, as we will later learn in detail, style sheets are linked to pages, we need to make sure that any style sheets in our site also live inside the root directory of the site.

As with images, you can put them anywhere within this directory structure, but as we are going to be developing a core style sheet, applicable to the whole site, it perhaps belongs directly inside the root directory.

1. call the style sheet core-style.css, and save it inside the root directory of your site

Even though it doesn't contain anything yet, you've created your first style sheet. Well done. Unlike HTML documents, style sheets don't have fancy header information, or special code to tell a browser what they are.

Create a Web Page

The last thing you should do for now is create a web page and save it in the site folder. We will use this for previewing our style sheet as we go.
Here is one that you might like to use. It features all of the HTML we will need to do these tutorials.

You might have noticed the line in the HEAD that reads

We will learn about linking to style sheets in a later lesson, but for now, this web page is linked to a style sheet named core-styles.css in the same folder as the HTML file. Make sure that your style sheet is called core-style.css, and that both it and the HTML file (doesn't matter what you call that) are in the same folder.

Next

Now we've created our style sheet, it's time to create some rules. We will begin by setting up the background of our document.