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.
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.
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.
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.
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.
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.
