Let's say that you have a large website with 50-100 web pages and you decide that you want to change the font from Times New Roman to Arial. At the time that you created it, you used the old style tag of < font > throughout your entire site. You would probably have to go and change every occurance of that tag in your website. Eck!
However, if you had used a cascading style sheet (CSS), you could change one file, upload it, and you'd be done. Impressive, huh?
That's not to mention your pages will load faster because there's less data to transfer...instead of a web brower downloading all of your formatted code in each of your pages, it downloads your CSS, caches it, and is there to use for every page. CSS also keeps your website looking consistent with all of your fonts the same on all of the pages.
This will be a little work at the beginning to rewrite what you have, but it will pay off in the long run. If you haven't started yet, you're in a great position to do it right at the beginning.
MYSPACE USERS! Understanding CSS is understanding MySpace. All that code that you put in the "About Me" section is just a CSS that overrides the standard default MySpace CSS. Pretty cool, huh?!
Let's get started...
Basics of using CSS
To start off our understanding of cascading style sheets, we're going to use a special line of CSS code that does something HTML alone could never do right… we're going to indent every paragraph automatically.
Here's the CSS code:
p { text-indent: 3em; }
As you can imagine, in its current form, the code does not but display p { text-indent: 3em; } on the screen instead of changing the way the paragraph tag behaves. We have several choices to implement this as an actual style, all of which are covered in this chapter:
Write it inline inside each and every tag
Place a < style>< /style> at the beginning of the web page
Dedicate and link a CSS file and write it inside that file
Use @import to include it as portion of a page's CSS
Writing inline style inside each tag is one of the worst ways to design a CSS page, although there are a few rare circumstances where it may be appropriate. But to know CSS, you need to know how to do it, and it will also help you understand how the CSS system works.
In our example, p is the selector, that is, what is selected to follow your chosen style. What the web browser understands is that when it sees the tag p, before writing any content, it needs to indent the text 3em. (1 em is a size for laying out glyphs in print... the important thing to understand about 3em is that 3em is about 5 spaces, the typical indentation choice). text-indent is a property, and 3em is the value of that property.
All definitions in CSS follow this format:
selector { property: value; }>
You can also include multiple properties and values for a single selector, merely separate them with a ; . If we wanted the paragraph text to be green, we could add color: green; after the text-indent: 3em;.
To write inline, we can start with < p> < /p> , the normal surroundings of a paragraph. Then, in the opening < p> tag, we'll add special code to say we want a style, merely < p style=""> . Then, inside the quotes, we'll add all the properties and values we want this specific paragraph tag to have. So we'll make ours < p style="text-indent: 3em;"> < /p>
This works just fine, as you can see below, however, we certainly do not want to write that for every paragraph we want to indent!
This paragraph is indented at
the very beginning by using an inline style.
The Next Step
So we'll make it a little bit easier now, and we'll place a <style> </style> at the beginning of the web page. This should go right before the </head> tag. The format is just like this:
<head>
<title>My first CSS page</title>
<style type="text/css">
<!--
p { text-indent: 3em; }
--></style>
</head>
With that style sheet at the beginning of the page, every <p> </p> will start with 3em (5 space) indent. So if you have 5 paragraphs that need to be indented, all you need to do is start each with a <p>, and the indent is automatic!
Now, imagine you have 10 pages, and you want to make every single paragraph indented.
You could include the <style> </style> at the top of each page, but it's much easier to create a single .css file, and link all 10 pages to it. Inside the .css file (we'll call ours main.css) all you do is type:
p { text-indent: 3em; }
Then, right before your </head> tag in each page add a line similar to this:
This will link a new style sheet, location main.css, to each page. The title field is optional.
With such a short and sweet example, it seems a bit silly to use the link method. But once your style sheet becomes larger, which it will very soon, you'll see the benefit of the write once link many method. That's just one CSS to edit whenever you want to change the look and feel of your site!
Bringing in Color
@import can be used in conjunction with the other methods. Imagine you want 2 pages out of your initial 10 pages to have, in addition to the normal indent, each and every paragraph in blue text. You could write a second style sheet, we'll call it coolblue.css, and inside that sheet you have:
p { color: blue; }
Then, in those 2 special pages, you place the normal CSS link, but you'll add special code, @import, to add the extra color.
With the import code, you can mix additional styles with a regular style sheet, without affecting the other sheets. So 2 pages now have blue paragraph text, while the remaining 8 pages do not.
Those are the basics. Let's review the ways you can include a style sheet:
Write it inline inside each and every tag
Place a at the beginning of the web page
Dedicate and link a CSS file and write it inside that file
use @import to include it as portion of a page's CSS
Selectors
Remember that p is the selector, text-indent is a property, and 3em is a value.
You are certainly not limited to only using style sheets with the HTML element p (paragraph). Remember our old friends H1 through H6? You can also use it with them.
If you want to make all H1, H2, and H3 red, and all H4, H5, H6 yellow, your style could look like this:
You can use the comma to say you want to define a style for multiple selectors at the same time.
You can set a style for nearly all HTML elements.
So why don't they just call the value before the { } an element? Well, that's because it's not always an element. You can also choose to make a selector a class of a current element, an element-less class, an id selector, or a pseudo-element. We'll show each of the four in this chapter.
Let's make a selector a class of a current element. Remember our paragraph example? Every paragraph is now indented. But what if you want a few paragraphs without an indent? We can define an extra selector. You can pick a name for these, I'm going to call mine noindent. Here's the original code with an added noindent selector:
p { text-indent: 3em; }
p.noindent { text-indent: 0em; }
This says that any p that are part of a class called noindent should use 0em indentation. To call that in code, we use class.
A normal paragraph looks like this:
I'm using a style with an indent.
I'm using a style with an indent.
A paragraph with the noindent looks like this:
I'm using a style without an indent.
I'm using a style without an indent.
If you are going to only indent some paragraphs, but you probably won't indent most, you can just define a special paragraph called indent.
p.indent { text-indent: 3em; }
If that's our only style, regular
will have no indent, while
will have a 3em indentation.
More Selectors
Why stop at the p tag? Indenting is kind of useful all around. You can make up an element-less selector name and just forgo the element. All you place is a period . and then your class name. Here's a generic example for indent:
.indent { text-indent: 3em; }
Now, we can use that class for all sorts of things. Here's a paragraph and a H1 both using the element-less .indent selector.
<p class="indent"> This is a paragraph with indent. </p>
This is a paragraph with indent.
<h1 class="indent">This div has an indent</h1>.
This h1 has an indent.
Imagine a selector .g, defined as { color: green; }. Every time you use class="g" in an element the text color would be shown in green.
ID selectors are used for special formatting of only a few elements. ID selectors use a # instead of a .. Imagine 3 paragraphs, we'll call them par1, par2, par3. We'll make one red, one orange, and one blue.
<p id="par1">I'm in red</p>
<p id="par2">I'm in orange</p>
<p id="par3">I'm in blue</p>
ID Selectors can also be element-less:
#par1 { color: red; }
...would apply to all tags that specify id="par1".
Pseudo-Elements
There are two important pseudo-elements that are built into CSS capable web browsers.
(There are also common pseudo-classes which you'll learn in the links chapter.)
These two elements are :first-letter and :first-line. Notice that pseudo-elements are defined with a : instead of a . or # (this is because they have special meanings to a web browser).
Here's a silly example for each: Imagine you want the first letter of each paragraph to be red, or the first-line of each paragraph to be green.
One of the interesting things about using CSS is that most things can have a background image, background color, and foreground color. The entire page's properties can be made using a body selector, while you can easily use other selectors such as p or table to define background and color properties.
You are probably familiar with the <body> tag. A typical <body> tag looks something like this:
body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000; }
Big deal right? But CSS adds some special features. One of the most important is the background-repeat property. It has these values: repeat, repeat-x, repeat-y, or no-repeat.
A regular web page has a default of background-repeat: repeat, which means the image is repeated both horizontally and vertically. With CSS, you can set the background to repeat horizontally (repeat-x), repeat vertically (repeat-y), or not repeat at all (no-repeat).
We can edit the style mentioned above to have the body's background never repeat by adding background-repeat: no-repeat:
If you want to include the repeat in your standard background tag (for example, if are not using CSS for the rest of your page), you can add style="background-repeat: no-repeat;", so it looks like this:
Remember that although over 90% of web browsers in use today support CSS, there are still some that do not. It may be helpful to use the standard <body> tag to define a text and bgcolor, and then use a style sheet to define everything else, using the same color and background-color values.
If you are using anything but repeat for a background-repeat, you should read the margin chapter of this guide to make sure your background doesn't make your text hard to read.
More Background Properties
There are two more important background properties: background-attachment and background-position.
background-attachment merely allows you to decide if you want the background to scroll or not. If you want it to scroll, use background-attachment: scroll. If you want it to not scroll, use background-attachment: fixed.
background-position allows you to position the background. It takes two values, the first is the the vertical position (in px [pixels], % [percent], or top, center, bottom) and the second value is the horizontal position (in px [pixels], % [percent], or left, center, right).
If you want a background to be at the top right, use: background-position: top right. If you want it to be at the bottom center, use background-position: bottom center. This is typically most useful used with background-repeat: no repeat.
As you can see, the coding for the background can get pretty long. CSS lets you combine it all into a single property statement, known as background.
