a1BEGINNING CSS 
Beginning Cascading Style Sheet

 

Style Sheets (also known as Cascading Style Sheets, CSS or styles) are html elements that you can define to format different parts of your documents including color, typography, type treatment, layout and placement.

The word cascading implies that you can use multiple style sheets at once and you can. Style sheets are a very powerful part of the html spec, they will allow you to have more control of how you present your content. Style sheets supports includes things like leading (space between lines of text), and letter spacing (the space between letters in a word).

Style sheets can also allow you to streamline your code. Most of us know abbreviations for the states in the US. We know WA stands for Washington. In addition to giving us much greater control of our web sites, styles can allow us to define one tag to make text bold, a particular size and font and by using that one tag over and over we can make many blocks of text take on those same properties.

If you go to the W3 Consortium (always a great source for the latest HTML news and you should visit regularly), you can see that a good deal of the formatting tags that you are starting to know and love are being deprecated in favor of stylesheets in the next version of HTML.

What this means practically, is that as newer versions of the browsers are released, things like the H1 tag and font tags will no longer be supported and instead, style sheets will be.

Although support for stylesheets is a bit sketchy, basic text formatting is fairly consistent cross-browser and much more efficient code-wise.

Style Advantages

Not too long ago you probably learned formatting in a different way. You are happy, comfortable and confident with the font tag and H1 tags, finally. Why would you want to use stylesheets? Many, many reasons, I'll identify the most important first.

Saves Code (and therefore time and bandwidth): Using style sheets means you only have to refer to long snippets of code once and reference it by a shorter string every time you use it. Think about style sheets like carrying an army knife. Its only one tool but can be used over and over again for many uses. Stylesheets are the Swiss army knife of the web.

Makes changing styles globally on large site easier: With style sheets you can make radical look & feel changes on just the style document and have it affect an entire site. No more having to open 100+ html files and change a body tag, you wouldn't even have to perform find and change on 100 documents. With style sheets, you can change your entire site by updating one document.

Greater control over layout: You can effect things like leading and space between words without using clunky workarounds like 1 x 1 invisible gifs.

Degrades gracefully: If you set it up well, stylesheets can also work on well on browsers that are not supporting style sheets. While you might not be seeing green, 20 pt arial text,you would maintain your initial hierarchy of text.

The Challenge of Styles

We talked about the advantages of using styles, and you are doing yourself a disservice if don't start using and incorporating them now but...there are still problems. They are non-compliant and work poorly across multiple browsers. This is why it is important to write styles so they do degrade well, in case a browser does not recognize the style properties you have assigned it.

Different Types of Style Sheets

There are three different types of style sheets and each has slightly different implementation syntax but all work in a similar and even work together, with different levels of importance. The three types of style sheets are linked, embedded and inline.

Linked style sheets
A linked style sheet sit inside a separate text document and can be linked to from multiple (as many as you want) HTML files. The HTML file calls the linked style sheet and then the linked style sheet properties are applied across the entire html document and likely across multiple html documents. There is a lot of power in linked sheets. If you managed a web site that consisted of 100 html files and you used a linked style sheet to format all you text, you could change the entire schema on your web site by updating just the css file. To accomplish this type of style you need a minimum of two documents. One is usually called something.css and the other is an HTML document.

Embedded
In an embedded style sheet the style sheet code is embedded inside the head of the html document. The html document that the style sheet sits inside is the only file that can use the style sheet declarations. This method is not as powerful or as global as the linked style sheet but works well if you are working with only one document or if you want to change a linked style sheet for just one file.

Inline
Inline styles are actually declared in the body of an html document and are added to a standard tag. These are useful if you want to alter a style sheet in just one place. Inline styles are also used frequently for positioning elements on a page.

Working with all the Style Types: The Cascading Part of CSS
I mentioned above the three style types do work together. If you define conflicting styles for the same HTML element, the style that is closest to the tag will override the others. In other words, inline styles override embedded and embedded override linked. If the styles are not in conflict with each other, using all three types of style sheets will allow you to add properties to the original tag.

The Anatomy of Style Sheets

Style sheets are usually made up of a series of style rules like the one below. Each rule consists of a selector and a declaration. (In the example below, H1 is the selector. It's the HTML tag that the style is being attached to). The declaration (everything in between and included the braces,{} ) defines what the style actually is, and it also consists of two parts: the property (in this case, color) and the value (green). The entire line of code starting with the selector and including the declaration is refereed to as a style rule. Notice in the code below there are no <> signs within the style, there are no = signs within the style and there are no quotes. Below the line of code is another line that uses the vocabulary above instead of an actual style rule.

h1 {color:green ; font-size:37px; font-family:verdana;}

selector
{property:value; property:value; property:value;}

 

Implementing Style Sheets

Using Embedded Styles

Let's examine the syntax of an embedded style sheet. First, the style sheet goes into the head of the html doc, which means that you don't ever see it in the browser.

The HTML might look something like this.

<head>
<title>My First Style</title>

<style type="text/css">
<!--

h1 {
color:green ;
font-size:37px;
font-family:verdana;
}

p {
background:yellow;
font-size:14px;
font-family:courier;
}


-->
</style>

</head>

Reviewing the format here, there are a few important things to note, immediately. All embedded style rules belong in head of the document. To "open" or start the style sheet you need <style type="text/css"> . Then the style sheet is embedded in comment tags.

Using the above code as an example, if a developer references <h1> in the body tag, the text will be green, 37 px, and verdana. Every time the code uses a <p> tag it will have yellow background color behind it, a font size of 14 and a font of courier. To see what this looks like take a look at this link and make sure to view source. Be sure to look at this sample in two browsers and note the differences in support.

The above link is an example embedded stylesheet. Embedded style sheets are used by the browser for the length of the html document, they do NOT, by default, work for entire sites or more than one document.

 

Linked Style sheets

Using linked style sheets really begins to take advantage of the power of stylesheets. You can use a linked stylesheet file to format an entire website, thereby saving code and enabling you to make global changes later. With a linked style sheet you have all of your style properties in a separate documents (usually called something.css) and you reference the css document inside each HTML file that you want to read the css file. Remember you need a minimum of two documents to use a linked style sheet, one test document that has all the style rules and your html document that calls the css file. The HTML part of a linked style sheet looks like this:

<html>
<head>
<title> Linked Style Example</title>
<link rel="styleshee"t href="firststyle.css" type="text/css" />
</head>

<body>
<h1>My Style</h1>
<p>Feel the power</p>
</body>
</html>

In a separate file called "firststyle.css" you want your stylesheet declarations. You can copy and paste from your work above.

First, the document firststyle.css is just a text document, NOT an HTML document. In this text document, you need only the style rules. You do not need any traditional html tags like the head, title or even open HTML tags. Your firststyle.css file will look something like the text below.

h1 {
color: green;
font-family: verdana;
}

p {
background: yellow;
color: black;
font-family: courier;
}

Remember these files have to be relative to each other and should be uploaded to the server to work properly. Try it out for yourself. Again make sure though, that your .css file does not have anything in it except style rules.

 

Inline Style Sheet

An inline stylesheet is embedded around the code in HTML, this option can be useful for working with positioning. Here is a syntax sample of working with inline styles. Note this is the only style usage where the style sheet is in the body of the HTML document. We will get back to this type of style sheet usage later, when it will really come in handy.

<body>
<h1 style="color:green; font-family:impact;">A Headline for Inline Styles </h1>
<p style="color: blue; background:yellow; font-family:courier;">Body for inline styles</p>
</body>

Conclusion

You've now been introduced to three different ways of incorporating style sheets and hopefully you are starting get a feel for how and why to to use them. What we have not discussed are the details of the property value pairs.

:: Back To Top ::