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:
CODE
<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:
CODE
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:font-family: Wingdings;
}
CODE
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.font-family: Wingdings, Webdings, Symbol, Times New Roman, Sans-Serif;
}
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.
CODE
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.font-style: italic;
color: rgb(255,0,0);
font-size: 8pt;
font-family: Arial, Verdana, Sans-Serif;
}
II. C. Using classes
So how do you use this? When you want to display an error, just put this:
CODE
<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:
CODE
<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.html {
font-family: Wingdings, Sans-Serif;
}
</STYLE>
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:
CODE
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;
}
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:
CODE
.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.text-align: center;
}
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:
CODE
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
That way, you don't have to type class="center" for every one.text-align: center;
}
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:
CODE
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.text-indent: 20px;
}
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.
)
