Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

style master css tutorial

My first style sheet

In this section you will learn

  • how to create and save CSS and HTML files
  • the syntax for comments in CSS
  • how to link a web page to a style sheet

Project goals

  • create and save the HTML document we are going to style
  • create and save a style sheet
  • write a comment in the style sheet so that we know what it is to be used for
  • link the web page to the style sheet

<< 3. tool checklist | 5. page appearance >>

Creating an HTML document

Before we move onto our actual style sheet let's create the HTML document that the style sheet will be applied to, as well as a directory in which the whole site (HTML document, CSS file and any images) will be saved. This page will be linked to our style sheet and used for previewing as we go.

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

Later you'll need to link to your style sheet from your HTML document so make sure you save everything inside the same root folder.

Exercise 1

Create a directory which will be the root directory for the site.

Copy and paste the following into a new empty HTML document - if you use a WYSIWYG editor make sure you do this in the "Source" view

Save this document at the top level of your site directory. It doesn't matter what you call it but I'm going to refer to it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>lorem ipsum inc</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<div id="header">

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

<div id="outer-image">

<div id="inner-image"></div>

</div>

<div id="content">

<div id="navbar">

<ul><li><a href="http://www.westciv.com/" >Lorem ipsum</a></li><li><a href="http://www.westciv.com/westciv/downloads.html">dolor</a></li><li><a href="http://www.westciv.com/style_master/house/good_oil/dao/index.html">consetetur</a></li><li><a href="http://blogs.westciv.com/standards/">sed diam</a></li><li><a href="http://www.westciv.com/style_master/house/tutorials/quick/index.html">diam voluptua</a></li><li><a href="http://www.westciv.com/style_master/academy/browser_support/index.html">nonumy eirmod</a></li><li><a href="http://www.westciv.com/style_master/academy/css_tutorial/index.html">tempor invidunt</a></li><li><a href="http://www.westciv.com/courses/index.html">ut labore</a></li><li><a href="http://www.westciv.com/style_master/house/good_oil/index.html">justo duo</a></li></ul>

</div>

<div id="main-text">

<h1>lorem ipsum dolor</h1>

<p>Lorem ipsum dolor <a href="https://order.kagi.com/?WC4">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <a href="http://www.westciv.com/style_master/index.html">sed diam nonumy</a> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<h2>ut wisi enim</h2>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<h2>duis autem</h2>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p class="footer"><a href="http://www.westciv.com/style_master/download/index.html">lorem</a> :: <a href="http://blogs.westciv.com/dog_or_higher/">ipsum</a> :: <a href="http://www.westciv.com/style_master/product_info/index.html">dolor</a></p>

</div>

</div>

</body>

</html>

There's something at the top of the document you might not have seen before.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This is called the Document Type Declaration, and you must use it, in exactly this form, and placed exactly like this, above everything else, for your document to be valid XHTML 1.0 Strict. This tutorial is about using style sheets, so I don't want to digress too far into how to create valid XHTML. Suffice to say that you should be trying your hardest to write valid XHTML if you're wanting to work with CSS, and to do this you need to use a Document Type Declaration, and validate your pages using a validator. To learn more about XHTML I can only strongly recommend that you take a look at our self paced course, HTML and XHTML for CSS.

You don't need to look too closely at this code for the purposes of this tutorial at all - in fact apart from making sure it links to your style sheet, which we'll do shortly, you can pretty much close it up and forget about it.

Note: if you do have a look at the code one thing might stand out to you. The code for the unordered list which makes up the navbar (<div id="navbar">) has no extra white space in it between the HTML elements. Obviously this is not the ideal, because it's much easier to edit later on if, for example, there are carriage returns so that each of the <li>s are on a separate line. However, if you insert any white space in there at all you'll find that this results in extra spacing between the items in the navbar when the page is viewed in Internet Explorer. Of course, this is totally buggy behaviour as extra white space in the code should have no effect at all on how a page is rendered. Let's just say that in this instance it does: just another example of how Internet Explorer can make your life hell. Now, there is a CSS based fix to this problem, but it's way beyond the brief of this tutorial to cover it. Once you've done this tutorial, and you want a more convenient way of solving this bug, check it out.

And one final note about the content of the web page. Just in case you haven't seen it before, the text on the page you've just created is a standard "dummy text" commonly used by designers while they are developing a site in an attempt to help clients from being distracted by the page content and focus instead on the appearance, architecture and layout during the design process.

Creating a style sheet

We've learned that a style sheet is a collection of rules, but before we write our first rule we need to create the style sheet document itself. We'll also create an HTML document that will be linked to this style sheet, so you'll be able to see the effects of your work right from the beginning.

Exercise 2

Create a new style sheet document.

Directly below this paragraph you'll see the first set of "Style Master Only" instructions. If you're going to do the tutorial without Style Master, just skip ahead whenever you see the orange indicator in the margin.

Have you launched Style Master? If not, do that now. You're going to create a brand new style sheet, so if you've already been working on something else it's probably best if you close everything up now and relaunch the application.

Now, the good news is you're about to race right ahead of those people who choose to do everything by hand because Style Master has a really neat feature that will automatically create a style sheet based on that HTML document you just created, save it, link to the style sheet from the HTML document and set it up as your preview document. Don't worry, I'm going to explain all the code along the way, so you won't miss anything, it's just that you won't have to do any of the grunt work, or risk making any mistakes.

To create a new style sheet based on an HTML document

1. Choose New From HTML Document... from the File menu.

2. Locate the HTML document and click Next. Leave the checkbox ticked and Style Master will automatically link to this new style sheet from the HTML document.

3. You'll see that Style Master has already found the right directory to save your style sheet in, but you'll need to give it a name. Again, you can use whatever you want, but I'll be referring to it as core-style.css.

4. Click OK.

Kick back and do a bit of reading, because as you can see, quite a bit of work has already been done for you. Style Master has gone ahead and created statements with selectors for all the elements, id's and classes that it found in that HTML document. Don't worry if you're not too familiar with what that means, we'll explain it all as we style these elements step by step in this project. For now just rest assured that you've already got the basic foundations down for this style sheet.

First up let's do something really straightforward and add a comment that explains what this style sheet is for. A comment is another type of style sheet statement. Remember we said before that rules are just one type of statement? Well, here's the other type you'll be learning about in this tutorial.

Comments

CSS comments take the form

/*Here is the actual text of the comment*/

Exercise 3

Type a comment which will remind you that this is the core style sheet of the site.

You will need to do this bit. Insert the cursor above all that code that's been automatically created, then create the comment. Don't worry about that other code, I'll be explaining that next.

To make a comment

1. choose New Comment... from the Statement menu

2. Enter a comment in the text field of the Edit Comment dialog - something like "This is the core style sheet of the site."

3. Click OK

You'll see a new comment at the top of the style sheet. To those of you familiar with HTML comments, yes, CSS comments have a different form, but they serve the same purpose and can be used in the same way.

This is almost too basic isn't it? But you have to start somewhere. Here's what the comment should look like.

/*This is the core style sheet of the site.*/

Exercise 4

Save the style sheet directly inside the root folder of your new site. You can name the style sheet whatever you want, but I'll be referring to it as core-style.css.

You don't have to worry about this because Style Master saved the style sheet for you, in the right place, when it was created. Of course though, you'll need to save as you go, so Style Master is just like any other application: choose Save... from the File menu.

So there you go, 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.

You might have noticed that as well as appearing in the style sheet text, you can also see your comment in the Statement List on the left side of the window. As you create more statements they will also appear here - so that it becomes a kind of summary view of the whole style sheet. You can use it to quickly find a part of the style sheet that you want to work on.

Linking your HTML document to your style sheet

There are two ways of making a style sheet actually affect the appearance of an HTML document: you can embed the style sheet in the <head> of the HTML document, or you can link to the style sheet from the <head> of the HTML document. We're going to use the second method here because it is the way to truly harness the efficiency of CSS. Think about it: you can link as many pages to a single style sheet as you want. Making changes to this single document can then change the appearance of all the web pages linked to it.

To link to a style sheet we place a <link> element with a couple of special attributes in the <head> of the HTML document. It will look something like this.

<link rel="stylesheet" type="text/css" href="main-westciv.css">

Let's look at each attribute.

rel="stylesheet" This says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.

type="text/css" Theoretically, style sheets might be written using any number of languages. The style sheets we're talking about here are Cascading Style Sheets (CSS). Extensible Style Language (XSL) is another that will likely become important. This attribute tells the browser what format it is going to receive the style sheet in.

href="main-westciv.css" This tells the browser where to locate the style sheet. The destination is specified in the same way as regular hypertext link destinations (a href="link destination"), with either a relative or absolute URL. As always, it's essential you get that relative pathname right, otherwise the browser won't find the style sheet. Using Style Master, you don't have to worry about this at all.

Exercise 5

Link index.html to core-style.css by pasting the line of code above into the <head> of the document and changing the href value to point to core-style.css.

Again, you don't need to do this because it's all been done for you when you created the style sheet. But, of course, you won't always create style sheets using this method, so for future reference here's how you link from an HTML document using Style Master.

To link a web page to a style sheet

1. choose Link Wizard... from the File menu

2. click Add Page

3. locate the page you want to link from then click Open

4. click Next for the following two options without making any changes (these are more advanced CSS features you don't need to worry about now), then OK to finish.

Style Master adds the necessary code to your web page.

When you're finished you should be able to see the following in the <head> of index.html.

...

<link rel="stylesheet" type="text/css" href="core-style.css" />

</head>

Next

Now we've created our style sheet and an HTML document that is linked to it. It's time to create some statements.

<< 3. tool checklist | 5. page appearance >>

Web Directions Conference