A Guide To Css And Creating A Stylesheet

[beeseven 0]

Table of Contents:

I. Introduction

II. Starting your stylesheet

--A. Starting syntax with font-family

--B. Defining classes

--C. Using classes

III. The STYLE tag

IV. Comments in CSS

V. The "a" tag

VI. A quick list of common attributes

VII. Notes

--A. Universal classes

--B. Grouping

--C. Multiple instances

VIII. Finding other attributes

IX. Closing

 

I. Introduction

Firstly, to begin using a stylesheet, you must have one. Open up your text editor and save as (something).css. I know NotePad doesn't need quotes for a stylesheet, but I'm not sure about other programs.

 

Now what good is a stylesheet if you don't know how to use it? to include a CSS document in an HTML page, simply put this in the head:

<link rel="stylesheet" type="text/css" href="(location)">

Where (location) is, you guessed it, the location of the file. If it's in the very top directory you can use "/stylesheet.css" or you can make it relative like "../stylesheet.css" or whatever (for those who don't know "." is current directory and ".." is up one level).

 

II. Starting your stylesheet

 

II. A. Starting syntax with font-family

Now for the actual CSS:

To change the style that something appears in, you put the tag followed by a bracket, then the styles, then a closing bracket. For example, you specify a font with the font-family attribute, and if you wanted your entire page in Wingdings (and who wouldn't?) you could put:

html {        font-family: Wingdings;}

Now, you don't have to have it spaced like that, it'll still work fine if you don't, but it's sort of the convention. You always end an attribute with a semicolon. But suppose not everyone that visits your site has Wingdings installed on their computer. Since it's the font family, you can specify multiple fonts in order of preference, separated with commas:

html {        font-family: Wingdings, Webdings, Symbol, Times New Roman, Sans-Serif;}

I added Sans-Serif in there because the W3C likes it when you end with a really really general family. There are a lot of different attributes that deal with font, but I'll get to those later.

 

II. B. Defining classes

You can change attributes for pretty much any tag, p, i, h1-6, div, td, form, hr, just to name a few. You can't make your own tags, though. But what happens if you run out of tags? You can assign classes to most tags, but if you're not basing the attributes on anything, P or DIV is best. To assign a class, you just put the tag followed by a period followed by the class.

div.error {        font-style: italic;        color: rgb(255,0,0);        font-size: 8pt;        font-family: Arial, Verdana, Sans-Serif;}

Here I've stated that when I use a div tag with the class "error," the text will be Arial, red, italic, and 12 pt. Color is font color, and you can also use hex values with it.

 

II. C. Using classes

So how do you use this? When you want to display an error, just put this:

<div class="error">An error has occured (or your text)</div>

It will appear like this:

An error has occured (or your text)

(or as close as I can get, having only the numbers 1-7 at my disposal for size). Your class can be any name you want. Also, if you base it off another tag, like <h2 class="announcement">, then it will have all the properties of h2 and also the ones you specify. You also probably shouldn't change properties of a tag drastically that will appear a lot (I once made "i" red for errors, then turned some text red with i inadvertantly).

 

III. The STYLE tag

Now if you don't want something to appear in the stylesheet but you need it for one page, you can put this in the head:

<STYLE type="text/css">html {        font-family: Wingdings, Sans-Serif;}</STYLE>

You can do all the same things in the STYLE tag that you can in a stylesheet.

 

IV. Comments in CSS

Comments, like in programming and HTML, are stuff that is ignored when the thing is actually run. I only know of one way to comment in CSS that won't make the W3C validator mad at you, and that's /* and */. You can place one line or multiple line comments between /* and */. I thought that you had to start each non /* or */ line with a *, but after another W3C validator check it seems not to be the case.

 

V. The "a" tag

The a tag has a few different things you can do with it, because it has different states. There's normal, hover, visited, and active. To change the attributes of normal you just do "a," for hover you do "a:hover," visited is "a:visited," and active is "a:active." You can change the attributes of each independently of one another. Say, for example, you want a link to be blue and have no underline, but on hover you want it to turn yellow, have an underline, and be bold. Then you want a visited link to look like the normal but be grey, you could do this:

a {        text-decoration: none;        color: blue;}a:hover {        text-decoration: underline;        color: rgb(255,255,0);        font-weight: bold;}a:visited {        text-decoration: none;        color: #C6C6C6;}

VI. A quick list of common attributes

Some attributes you might need:

 

font-family - set fonts in order of preference

font-weight - normal, bold, or a number 100-900 (normal is 400 and bold is 700)

font-style - normal, italic, oblique (don't know what oblique is)

text-decoration - none, underline, overline, line-through, blink

text-transform - none, uppercase, lowercase, capitalize

text-align - left, center, right, justify

color - font color in rgb ("rgb(x,y,z)"), hex ("#UVWXYZ") or color name

text-indent - sets indent in pixels (px) or % of page

line-height - "normal," relative to font (#em), length, or % of font size (double spacing would be "2em"

background-color - sets background color in rgb, hex, or color name

background-image: usually defined under BODY, usage is " url("YOURURLHERE") "

width - auto (browser calculates), % of page, or length (px, cm etc.)

 

But that's just a few simple ones, there are many more.

 

VII. Notes

 

VII. A. Universal classes

If you want to have a few common things between tags, you may omit the tag for a class, and only put the tag name. For example, if you want to have several things centered but do not want to make a new class for each, you can just put this:

.center {        text-align: center;}

Since you didn't specify a tag, you can now use class="center" on any tag and it will be centered.

 

VII. B. Grouping

If you don't want to type the same attributes over and over again for multiple tags or classes, you can group them together. Let's say you want all your headings to be centered, no matter what. You could make a class for each or make a universal class to save some typing, but you could save even more by grouping them together:

h1, h2, h3, h4, h5, h6 {        text-align: center;}

That way, you don't have to type class="center" for every one.

 

VII. C. Multiple instances

If you want to make it so that something doesn't happen the first time but happens every other time, you could use, for example, "p+p." If you were going to write a long essay or something, you don't have to indent the first paragraph because of some weird convention, so you could do this:

p+p {        text-indent: 20px;}

This makes it so every "p" tag with a "p" tag right before it is indented. The first paragraph won't be, because there isn't a "p" proceding it.

 

VIII. Finding other attributes

I have almost certainly not covered all the attributes that you will use with CSS. When I need to find a new one or look up how to use it correctly, all I do is go to Google and type "CSS (attribute I need to find) site:w3schools.com" (without the quotes). This returns everything containing the attribute I need from the w3schools CSS tutorial. W3schools has really good documentation of the attributes and how to use them.

 

IX. Closing

So why use CSS? Because the w3c tells us to, of course! But seriously, it will work better in most browsers and it is a LOT more customizable than just HTML. Sometimes I actually do my homework in CSS, because it doesn't try to autoformat all my stuff like Word does. I hope that this tutorial helped whoever read this far, and I'll answer any questions about it that I can.

[Joshthegreat 0]

Nice tutorial there. If i didn't know CSS already I would have found that very helpful. That's some good work right there.

[fsastraps 0]

Very helpfull tutorial, too bad i just learned all that tool. lol But i bet is definately going to help a lot of people

[HmmZ 0]

Very nice tutorial,Easy to follow,Good to apply, you motivated me :DJust a question, i used a stylesheet, in that stylesheet I included some "absolute" positions for my website tables (main menu, stats, shoutbox, etc..) and it shows fine in Firefox, but in IE it looks like crap, the tables are overlapping each other (main menu and stats) so what do i need to do?

[beeseven 0]

Short answer: don't use IEI guess you could try to replicate the absolute lengths with percentages, but absolute lengths are weird and don't go across different browsers well.

[HmmZ 0]

I think it would be hard editing them with percentages instead of px positoning, what about relative positioning instead of absolute? (wait, relative=%? )anywayz...I seem to have fixed, it's showing correctly now , but the question stays whats best to use, it seems absolute positioning works good enough?

[doom145 0]

Huge un-needed quote deleted

 

thanks....this is very "interesting" lol.....CSS isnt used very much these days exept for like basic websites.....But i still like css as u have the right to choose which colour and so forth......the only problem about it is that it can only do a certain thing.....u cant go beyond that point which is anoying because if css has more syntax involved then it would be better and you could make it look more professional and make a site that people would like....but overall i gave this tutorial a 9/10

Edited March 11, 2005 by NilsC (see edit history)

[beeseven 0]

Really? I'd think it's used a lot more than it used to be. It also helps with browsers that don't know HTML *coughIEcough* You can do a lot more than I put there, there's a huge number of attributes.

[Hamtaro 0]

Actually, from what I've seen, CSS is used with MOST professional sites. I can't really recall a site that I've ever been to (Except my site when I first started it) that doesn't have CSS in it.I'm still learning new CSS stuff. I've been doing CSS (At least half-way decently) for a little over a year now, and I continue to find new things.I prefer percentage positioning to pixel positioning. That way, the layout of the site can be relatively the same in each browser. (My site's positioning works the same in Firefox and IE.)Oh, this may be a little late, but nice tutorial. I learned some things in it that I didn't know about CSS.

[nickmealey 0]

CSS is very well used today. I use it all the time

[Benz1435 0]

VERY VERY VERY VERY Good tutorial I have NO clue at all how to do CSS this will help me a WHOLE lot. I know almost all the other things except CSS now i will know the basics to CSS finally!!

[maddog39 0]

Great tutorial. I am going to use this very much. I also posts the link in a tutorials mod on this websites forums.

[mzwebfreak 0]

One of the best things I've found for working with css stylesheets is that you need to have a page, i.e. test.html, where you have the different categories all listed on this one page so you can check by trial and error to make sure all the styles work together with the layout correctly. And, if you're viewing it in ie or firefox, you can just edit the color scheme as needed, save the css file, and then F5 the page to make sure everything still works together.

[moonwitch 0]

CSS can be a huge help for the bigger projects to have a uniform look. Also it keep "looks" and content more seperated. As far as the need for a "test" page with all categories on it to test the css... I just keep my CSS file open (I always use external css files ) and add to it as I go along. To keep a style sheet from getting cluttered I prefer to keep the main tags on top and then classes. I also am a big fan of comments in my pages (be it HTML, be it CSS) this will make it easier when you do decide to work on a site in team.

 

The biggest disadvantage in CSS (to me personally) is that IE doesn't support all CSS (even though M$ insists that IE does support CSS2). For example a hover effect in CSS with nested lists, which creates awesome looking menus, will NOT display as such in IE. The best example of this can be found on Eric Meyer's Web

 

The nested lists menu can be found here, I suggest looking at it with IE and Netscape/Mozilla/FireFox (Konqueror should support this too, I believe Opera does as well, but I am not sure)

[Teragonto 0]

Very nice tutorial beeseven. I liked how you thoroughly explained it since the CSS tutorials one WCSchools makes my head hurt with all the formatting. This one has hardly any format.