CSS (Cascading Style Sheets) is a way to style HTML content. CSS provides a method for separating the content of a web page from the instructions used to determine layout and design. When creating websites, as a rule of thumb, you want to separate the content from the design of the site so that as you make changes to the site over time you are able to effectively apply those changes across the site with minimal effort.
For example, if you have a 300 page website and decide you want to change the font color on the site it could be either a simple change or a change that could take all day depending on whether or not you implemented a cascading style sheet. If you did implement a cascading style sheet you would simply need to change a line of code. If you didn’t you would need to go in and change the font tag across 300 pages.
So how does CSS work?
As you know, HTML tags have elements, attributes, and values. So an HTML page with simple paragraph might look something like this:
<html>
<head>
</head>
<body>
<p class="CSS_01" >A tutorial on CSS (cascading style sheets)</p>
</body>
</html>
In this example you have a paragraph element with an “class” attribute. That attribute has a value of “CSS_01″. Assigning a “class” attribute is like giving the paragraph a name. As we create our CSS we will be able to refer to the “class” and provide instructions for how to style elements with class value of “CSS_01″. As I stated earlier, style instructions should be kept separate from page content. In order to do that we need to create a style sheet as a separate file from our HTML page. To do this, open a new file in a plain text editor and save it as css_01_sheet.css. You’ll also want to create and save your HTML file if you haven’t done so already. Save them in the same folder on your desktop or wherever you like.
CSS code is similar to HTML in that it is plain text. There is nothing fancy about it and with any text editor you can read it. It is important to note that when you create a style sheet you need to save it with the extension .css rather than .txt.
Now that you have created a blank cascading style sheet the first thing to do is link the style sheet to the html page. To do this we add a line of code to our HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css_01_sheet.css" />
</head>
<body>
<p class="CSS_01">A tutorial on CSS (cascading style sheets)</p>
</body>
</html>
The line that we have added is a “link” element. The link element is what we use to link the CSS style sheet to the html page. What it does is say to the browser “hey, there is a style sheet for this page in this location that you need to look at”. The “rel” attribute tells the browser what it is. The “type” attribute tells the browser how the code is going to be written. In this case text/css. And the “href” attribute tells the browser were to look. Since we placed the files in the same directory all we need is the file name.
Next we need to create a style rule in our CSS style sheet. In CSS, style rules are made up of what are called Selectors, Properties, and Values. This is similar to Elements, Attributes, and Values in HTML. Here is a quick look at the syntax:
selector {property:value; property:value;}
Here’s how it works, for each Selector there is a Property/Value pair. Selectors, “select” elements on an HTML page and use Property/Value pairs to style the content. Let’s go to our style sheet and create a selector. To begin we add the following code to our style sheet:
p.CSS_01 {}
Looking at the code notice the format used. What we have done is select the paragraph tag by typing the letter “p”. We then clarified that we want to select only paragraph tags with a specific class. That class is specified by typing .CSS_01 right after “p”. Remember in our HTML code that we gave the paragraph a class attribute with the value of CSS_01. This is how we know which element we are applying the style rule to. The last bit of code is the two curly brackets “{}”. These brackets will contain our Property/Value pairs. There several property value pairs that we could apply. For our purposes here we’ll choose a font, and a background color:
p.CSS_01 {
background-color: yellow;
font-family: "verdana", "arial";
}
Notice how property value pairs work. First you identify the property in this case “background-color” and “font-family”. Then you assign values. It is important to note that some properties can have multiple values such as “font-family”. We’ll go into more detail in latter tutorials.
Now, save all of your documents and open up your HTML page in a browser. You should see something like this:
Congratulations. You have just created your first CSS style sheet, linked it to your HTML page, built a style rule, and styled your content. You are well on your way to becoming a CSS master. Keep an eye out for the next tutorial!
Loading ...
If you are interested in creating a personalized MySpace I wrote a little how-to book that will get you there. If you are just looking for template files that I used in the book so that you can use to design a customized mySpace without all the how-to stuff, you can download the files here:
