Learning and Doing CSS

 What we first must ask ourselves is...what is CSS? To start things off, CSS stands for "Cascading Style Sheet." Besides the layout being an eye-catcher for visitors, you've also got to think about your site's "preferences" such as the scrollbar's colors, the site's fonts and their colors, link colors, link effects, headers, etc. CSS has grown to be a popular asset to making things in your site flow well or look graceful overall.

Here's an example of one of Lovely Design's free linkware layouts with no CSS coding: [www] <--- Despite the beauty of the layout, without any CSS, the whole layout doesn't look exactly eye-catching with all the not-so matching scrollbar, font, and font colors so to speak. And this is where CSS comes in handy.

Let's use the example page (above) to make a basic CSS file (...or at least basic to me). Now, what you've got to think is what would I want to configure on my site? There are quite a set of different attributes and preferences that you can control with CSS. But for now, let's work on things that we would want to configure to make our example page look more together or graceful. In our example layout (with no CSS)....things we (or at least I) would want to configure to our/my own likings would be: font, font color, link color, scrollbar colors, and also a header (kind of like titles and/or subtitles for your contents--it's not really necessary, but it can come in handy if you want a "shortcut" coding for your titles/subtitles).

Anyways, now that we've decided what we wanted to configure/control on the example webpage (with no CSS)...we can now build our CSS file. So, first, we'd create a new file in whatever program/service that we use to create our webpages (like Notepad, AceHTML, online FileManager, etc.). Now let's put in the following coding (in bold) in that new file:

@charset "iso-8859-1";
body { font-family:verdana; font-size:10px; color:#571800; background-color:#E3D7C4;
scrollbar-arrow-color:#9C0000;
scrollbar-track-color:#E3D7C4;
scrollbar-face-color:#9C0000;
scrollbar-highlight-color:#AB0B0B;
scrollbar-3dlight-color:#BC2E2E;
scrollbar-shadow-color:#7A0200;
scrollbar-darkshadow-color:#500000; }

.header { font-family:verdana; font-size:10px; color:#571800; background-color:none;
border:#571800; border-style:solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 2px; border-left-width: 0px;}

a:link, a:visited, a:active {color:#2F0200; text-decoration: none;}
a:hover { color: #E2C07B; text-decoration: underline overline; background-color: none}

@charset "iso-8859-1";
This bit of our CSS basically specifies to the browser on what sort of coding is included in the file (sort of like telling the browser what all the coding in the file is).

body { font-family:verdana; font-size:10px; color:#571800; background-color:#E3D7C4;
This part of the CSS begins with body to specify that it configures or controls certain things that are within the <body> and </body> tags. The starting bracket { begins the configuration. font-family is the type of font you want your text to be, in which for our example page, I've chosen the font Verdana. font-size is the size of your text (in pixels), the color value is the color of your words, and background-color is the color that you want your site's background to be (NOT the text).

scrollbar-arrow-color:#9C0000;
scrollbar-track-color:#E3D7C4;
scrollbar-face-color:#9C0000;
scrollbar-highlight-color:#AB0B0B;
scrollbar-3dlight-color:#BC2E2E;
scrollbar-shadow-color:#7A0200;
scrollbar-darkshadow-color:#500000; }
All the coding above is for the scrollbar--in which the scrollbar has many, what I call, "faces/sides." If you're confused on this, there are quite the couple of sites that have scrollbar generators to help you out--you can find one here: www. Oh, and the closing bracket } basically just ends or stops your configuration of things within the <body> and </body> tags.

.header { font-family:verdana; font-size:10px; color:#571800; background-color:none; border:#571800; border-style:solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 2px; border-left-width: 0px;}
.header specifies the following coding as a class (in which the name of the class that we have chosen is "header"--you can change the name if you want to; it doesn't have to be "header")---basically a class can alter some of your contents/text to make it look different from the rest of your text that has been specified in the body coding. You could say it overrides what the body coding says to make your text as. Not all of it, though, but in order for this class to work, you need to input a certain code in between the texts you want to make different from the body specified texts. In our example page's case, I'm using this class as in means to make headings or what you might want to call titles to organize my contents. font-family, font-size, and color ask for the type of font you want to make the text, the size of it in pixels, and the color. background-color is basically the background color that will be behind the text you specify with the class--for me, I've chosen "none." border is the border color for the border that will go around your text if you configure it to---almost like a table or box. The border-top/right/bottom/left-width basically configures the width of the border that you want around the text that is using the class; you can choose to only have the bottom border existent if you make the rest of the border widths 0 pixels, or you can choose to not make your contents using the class have any border at all.

a:link, a:visited, a:active {color:#2F0200; text-decoration: none;} a:hover { color: #E2C07B; text-decoration: underline overline; background-color: none}
The above coding is for your links. a:link is basically for any of your text links, a:visited is for links that you've already visited, a:active is for when you click on a link (regardless whether you've already visited or not), and a:hover is for when you hover over your link (with your mouse....or cursor to put it specifically). color is for the color of the specified link, background-color is basically just the background color you want to put behind the specified links, and text-decoration is adding a sort of style to the links, in which you can make it "overline", "underline", "overline underline", "line-through", or just "none" if you don't want any text-decoration set. The coding above doesn't necessarily have to be ordered like that....it's just that I mainly like the a:link/visited/active links to all look the same and the a:hover links to be different. ^_^;;;;

So, anyways, now that we're done making our CSS file, let's save it as "style.css." Our next step is to input the CSS file into your example page so that it'll configure what we've desired to. So, now, I'm going to put the coding, that's in bold below, in our example page:
<html>
<head>
<title>!--Site Title Here--!</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

Again, make sure that the coding in bold, above, is within the <head> and </head> tags. And make sure you're linking the "style.css" correctly.

Remember the .header class that I had in the .css file? Anyways, as I said, I'm going to use that configuration for my titles/subtitles. So, below, I'm going to input my title/subtitle with the code needed to let it be controlled by the .header class:

<div class="header"><b>Title</b></div>

Notice that the coding contains "div." The div sort of acts like <br> it puts my title/subtitle on a line by itself--like distinguishing it from the rest of the contents. You can also use p instead of div in the class coding instead as well--the difference is that p acts as the HTML coding <p> instead of <br>.

Okay! Now that we're done with our .css file and inputting the necessary codings for it to work on our example page...let's upload our changes and our .css file...and take a look at the finished product: www.

What do you think? Looks better than when it had no CSS right? ^_~ Well..this basically concludes this CSS tutorial. Have fun with CSS! ^-^