Upon the request of Sophia, I've decided to write a tutorial on cascading style sheets, shortly known as CSS or style sheets, based on all the CSS that I've figured out up to now. I'll call it CSS in this tutorial.
Introduction to CSS
So what is CSS? CSS works wonders in helping you control and manipulate the overall appearance of your webpages. It can be used to determine anything from body background colors to scrollbar colors in Internet Explorer to fonts and their colors to form elements colors to margins to links and hover links to table colors and dimensions. And the list goes on, but I'm not going to spill it all out right here right now.
Since this tutorial is about CSS, I thought that maybe I'd make it more visual by incorporating some of the code into the webpage. If it weren't for style sheets, I wouldn't be able to do display this text in font size 8pt (font size 8 in Microsoft Word). I wouldn't be able to make the text area below colored, and I wouldn't be able to display the scrollbars in color either.
How to Use It
So how do you use CSS? CSS is merely code, like HTML, so you don't need applets like Java or servers to depend on like CGI/Perl. You just include your CSS code in your head or body of the webpage like Javascript. And like Javascript, all the CSS code must be placed in a sandwich form. Your CSS related code must go in between <style> and </style>. If you don't, all your CSS content in between will show up on the page like a bunch of spilled, exposed guts, which won't be a pleasant sight literally and figuratively speaking. And if you do not close your < style > tags properly, your entire webpage will not show. It's a common mistake, or at least for people like me, so if you ever refresh your webpage after editing to see a mere blank page, check that you closed your tags.
As a side note, you can also insert all your CSS code (<style> tags and everything in between) into a text file and save it in a .css extention. Then you can insert the code between the <head> tags linking the webpage to the CSS file. It serves the same function as if the CSS code was internal (in the code of the webpage). But this is the external way. Hotmail uses this method at the moment. It's useful if you have hundreds of webpages that use the same font styles and color styles, in which case you could just make all the webpages load the external CSS code in its separate file. See the example below for the code for external CSS.
In case you're an impatient advanced user who feels like he or she can figure out CSS on his or her own at this point, I welcome and encourage that. That's how I did it. Below is an example of my CSS coding. This one is the coding used on this page. If you feel that you need to continue through the rest of the tutorial, glance through the example and continue reading.
Lesson 1: Links
Unvisited Link Color:
Visited Link Color:
Active Link Color:
One might ask why we wouldn't just use the simpler HTML to do this job if HTML can also do what CSS just did above. Well, CSS is more powerful than HTML. With CSS, you can determine whether links are underlined or which cursors are used over the links. And probably one of the most popular uses of CSS is to use hover links. With hover links, you can make a link change colors when you move the cursor (arrow) over the link. You can make the link change fonts or font sizes or become bold when you hover the cursor over the link. You can determine which cursors show up over the link, make the underline appear or disappear when you hover over the link, and a few other things.
Hover Links Examples:
You may also apply the cursor and font and color properties to visited, unvisited, and active link properties.
Oh, and let's say that you want to do color and text decoration properties. That's more than two properties between the {} signs. You connect them with semi-colons (;). See the example above. Spaces don't matter. You may put as many spaces as you want between, say, "color:" and "blue" or between "hover" and {. So the code a:hover{color:yellow;} would be the same as a:hover { color: yellow; }. In this tutorial, I'm not going to use any extra spaces at all.
Lesson 2: Link Cursors
cursor: auto (uses what is set by user)
Now remember, not everyone has the exact same cursors for each type of standard cursor. In other words, your hourglass cursor may be an animated hand tapping, but the visitor of your page may have a dancing bear as the hourglass cursor. So remember that the cursor look to your visitors may not be as predictable as you may think, just as a note.
Lesson 3: Assigning Styles to Specific Links or Groups of Links
One way is to include the styles in the links themselves. See the example below:
< a href="page1.html" style="color:green; text-decoration:none; cursor:wait; font-family:verdana,arial;" >
The code above will give you a green link that's not underlined and will show up in font Tahoma, or Verdana or Arial if that one's not available. And the cursor will become the hourglass cursor over the link. But let's say that you want ten links to have this appearance. So you would assign a "class" to this group of links.
Lesson 4: Assigning Styles to Specific Text or Groups of Text
Alternatively, you could use:
Lesson 5: Body Properties and Colored Scrollbars
body{background-color:white; color:black; font-size:11px; font-family:verdana,arial; margin:0px 0px 0px 0px;}
The coding above will make all text in the webpage 11-pixel (8 point) size in Verdana (unless they're given their own font style), and the space of the margins are set with a simple row of four values of pixels. Left margin, top, bottom, and right. See the example above. You can also throw in all the other CSS content within those {} signs if you'd like.
You can also determine the scrollbar colors of the browser for that webpage, but it only works with Internet Explorer 5 or 5.5 browser or better the last time I checked. In the example below, I included the scrollbar color properties/settings. To make the code easier to read, I hit return after each individual scrollbar color property instead of putting them in a long, continuous line. Notice that I closed the body{} bracket tag at the very end.
You can figure out from the names of each part of the scrollbar which parts they are. For example, track color is the color of the track on which the moveable part of the scrollbar runs on. The arrow color is the color of the up and down arrows on the top and bottom boxes at the ends of the track. Play around with the colors to see what looks good. You can create shadow effects like Microsoft does with the gray scrollbars or you can be creative and do something like what I did with this webpage and StoryCorner.
CSS has become more popular because it gives webmasters more control over the styles of the page (fonts, colors, sizes, borders...). CSS also gives the webmaster more control over the display of a background image on a page.
Lesson 6: Web Forms and Colors/Fonts
Method No. 1
Method No. 2
Method No. 2, which involves naming web form elements by class and giving the class group a style in the header, is done like when you assign styles to specific text. In the header, you'll put a period followed by the name of the class followed by the {} brackets and the fonts/colors/margins stuff in between those brackets. If you look at the class "anyclassname3" in the example above, you will see an example of more complicated border settings. You will see something like "border-top:" followed by the border color (space) border width (space) thickness. For the text area, you can apply the scrollbar colors code inside the brackets to give text areas different scrollbar colors than the body one.
Lesson 7: Table Styles, and Divisions and Spans
Or if you want to use a div (division), you can style that the same way.
Or you can use classes:
Or you can use id's:
Also realize that assigning styles by using "class" can also be used with table, tr, and td, as well as with <span> </span< tags.
Lesson 8: General Styling
Notice that I didn't assign any classes or specific styling to the image or the horizontal rule. If I did, it would override the general styling for that specific image or horizontal rule. This applies to everything from form buttons to h1-h6 headers to li list items. Play around with it, and you'll see what I mean.
Lesson 9: More Text Styling
For now, here's an example:
<font style="font-weight:bold; letter-spacing:-0.5px; word-spacing:normal; line-height:50%; text-transform:uppercase;">
Okay, just one more example (but check out the much more extensive CSS reference sheet):
<div style="overflow:auto; width:300px; height:250px; border:1px solid #ccc; padding:2px;"> </div>
Closing Paragraph
-Gordon Mei, August 5, 2001.
Like HTML, CSS allows you to determine the unvisited link color, visited link color, and active link color of the links of your webpages. The code is below. For the CSS code, I'm leaving out the < style > tags assuming that you know that they are needed at the ends of the code. The HTML equivalents are listed beside their CSS counterparts.
HTML: < body link=blue >
CSS: a:link{color:blue}
HTML: < body vlink=blue >
CSS: a:visited{color:blue}
HTML: < body alink=blue >
CSS: a:active{color:blue}
Example 1 --> a:hover{color:yellow; text-decoration:none;}
Example 2 --> a:hover{color:yellow; text-decoration:underline;}
Example 3 --> a:hover{color:yellow; text-decoration:none; font-family:arial;}
Example 4 --> a:hover{color:yellow; text-decoration:none; font-family:arial; font-weight:bold; font-size:5}
Example 5 --> a:hover{color:yellow; text-decoration:none; font-family:verdana,arial; font-weight:regular; font-size:8pt}
Example 6 --> a:hover{cursor:crosshair; color:yellow; text-decoration:none; font-family:verdana,arial; font-weight:bold; font-size:8pt}
Example 7 --> a:hover{background:crimson; color:white; text-decoration:none; font-family:verdana,arial; font-weight:bold; font-size:10pt}
Point your mouse over: Example of Hover Example 7
Above, I mentioned that you can specify which cursors appear when you hover over a link. For example, you can make your arrow become an hourglass over a certain link. Or you can make it become a question mark. Below are a bunch of links with differently assigned cursors. Each link's name shows "cursor: ???". The words after "cursor:" are the name of the specified cursor for the link. You would place the "cursor: ???" text in between the {} signs. Hover your cursor over each of these links to see the effect.
cursor: crosshair (should produce a cross)
cursor: default (cursor remains as it is)
cursor: e-resize (arrow pointing right)
cursor: hand (the traditional pointing hand)
cursor: help (a Question Mark should appear)
cursor: move (a cross with arrows on the tips)
cursor: n-resize (an arrow pointing north or up)
cursor: ne-resize (an arrow pointing northeast)
cursor: nw-resize (an arrow pointing northwest)
cursor: pointer (that hand again)
cursor: s-resize (an arrow pointing south or down)
cursor: se-resize (an arrow pointing southeast)
cursor: sw-resize (an arrow pointing southwest)
cursor: text (looks like the end of an I-beam)
cursor: w-resize (an arrow pointing west)
cursor: wait (an hourglass)
Let's say that you don't want all your links to be blue and turn yellow when you hover over them. Let's say that you want the links in your navigation table to be a different color and become a different color upon hovering. There are two ways to assign styles to specific links.
Assigning styles to specific text is almost the same as with links, only without the "a" in front of ".whatever-you-name-this-class". And instead of using HTML's font face, font size, and font color, you would use font class.
< font style="color:green; font-family:verdana,arial,helvetica;" >
HTML has < body background="white" text="black" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"> for controlling the settings of an entire webpage. Well, for CSS, you'd use the content within the {} and type "body" before it. So it would look something like this:
Unlike HTML, with CSS you can determine the colors and fonts of web form elements like text fields, text areas (like the ones the examples are displayed in), buttons, radio buttons, checkboxes, and dropdown select menus. There are two ways to do this. One way is to use the input code. The other way is by using the same "class" assigning that you used for the links and text earlier in the tutorial. Method one is slightly simpler, but not nearly as powerful as the second method. For example, method 1 will assign all buttons a certain color style, border style, cursor style, and font style throughout the page. Method 2, on the other hand, can be used to assign specific buttons a certain style. I prefer to use method 2, but it's up to you which one you want to use.
Text Field -------> input {font-size: 11px; font-family: verdana,arial,sans-serif; background: #93bee2; border-color: black;}
Buttons ---------> input.button {font-size: 11px; font-family: verdana,arial,sans-serif; background: #93bee2; border-color: black;}
Select Menu ----> input.select {font-size: 11px; font-family: verdana,arial,sans-serif; background: #93bee2; border-color: black;}
Text Area Box --> textarea {font-size: 11px; font-family: verdana,arial,sans-serif; background: #93bee2; border-color: black;}
Tables and their rows and columns can also be styled like this:
You can also assign a style an entire group of elements (table data cells (td), images (img), horizontal rules (hr), and so on). For example, let's say that you want every image to have 1-pixel solid black borders. Or that you want every horizontal rule to be powder blue.
CSS offers a huge variety of ways to style your text. An addition to the things HTML could already do (fonts, font sizes, colors, bold/italics/underline, strike/super-subscript), CSS allows you to adjust spacing (between letters, words, and lines of words) and case (uppercase, lowercase). There's more, but it's better to refer to the CSS reference sheet for a more comprehensive list.
This is an example of capitalized text with tighter letter spacing and word spacing, and tighter spacing between lines of text. The CSS to generate this style is shown above.
You can also control the overflow of text (or images, etc.) in, say, a <div>, meaning that you can create things like scrollboxes from div's. That would look something like this:
Whew! I've tired myself out writing this tutorial. I may have forgotten to mention a few things that I'm forgetting to bring up at the moment, but these six seven nine lessons are the bulk of what I've figured out so far in CSS. I'm still learning more, so I may add to this tutorial in the future. Well, I hope you found this tutorial helpful in learning some CSS. I tried to make this tutorial at a beginners level, but since I already know all this myself, what may sound simple and easy to follow to me may sound lengthy and confusing to you. But this tutorial level should be around beginner-intermediate. Thanks for reading my tutorial. (And give me some compliments. I've spent some time on this.)
©1999 - . HTML Workshop. GordeonBleu. Gordon Mei. |
