Patch 5.2.2 was released for ADBZRPG5 on 8/17/08. You may see a full list of changes here.
|
|
 |
Cascading Style Sheets (CSS) is coding that gives you many more options while making a website.
There are two different ways to use CSS to enhance your website. Even if you don't know it, many webmasters use CSS. You know those codes that change your link colors? That is CSS.
Now, the two different ways to use CSS are:
1. Insert the codes into every page you want them.
2. Create a file with a .css extension, and have all your CSS codes there.
The first thing you should always have when inserting CSS codes is the opening tag, which is this:
<style type="text/css">
NOTE: You don't HAVE to put anything other than <style>, but I add the type, so I can tell what it is when I am
going through the code later.
The most common codes that people use are the:
A:visited {text-decoration: none; color: #000000;}
A:hover {text-decoration: none; color: #000000;}
A:link {text-decoration: none; color: #000000;}
A:active {text-decoration: none; color: #000000;}
But you can learn more about that in my HTML tutorial.
Alright, you can use different codes, if you want different colors for your text and links in your page. The easiest code to use, is this:
.1 {font-family: Verdana; font-size: 10pt; text-decoration: none; color: #000000;}
The .1 is the specific name you want for this class. The name is important, because if you use .1, then your font code would be <font class="1">. The font-family: Verdana; is what font face you want to use for the specific text. The font-size: 10pt; is what size you want the specific text or link. The text-decoration: none; is what you change if you want the text or link to be underlined, overlined, or have a line through. The color: #000000; is what color you want the text or link.
Now, here is the part that most people don't know that you can do with CSS.
body,tr,td {font-family: Verdana; font-size: 8pt; line-height:12px; letter-spacing:0pt}
This is a more advanced part of CSS. What this controls, is the space between letters, both horizontal and vertical. If you add this code into your page, you dont have to add any classes to your font tags, because it will effect your entire page.
Thats really all that there is to do with CSS, you can mix and match different codes, you can even add the parts of the body,tr,td code to the specific classes, if you only want a certain part of your page with special spacings.
Here is the 2nd way you can use CSS codes to enhance your website. You can just create a completely document, just make sure it has a .css extension. Most people name this css.css so they can remember what it is easier. I am just going to type an example of what you could put on this page.
<style type="text/css">
<!--
body,tr,td {font-family: Verdana; font-size: 8pt; line-height:12px; letter-spacing:0pt}
.1 {font-family: Verdana; font-size: 10pt; text-decoration: none; color: #000000;}
A:visited {text-decoration: none; color: #000000;}
A:hover {text-decoration: none; color: #000000;}
A:link {text-decoration: none; color: #000000;}
A:active {text-decoration: none; color: #000000;}
-->
</style>
You can do a lot more than that but that is just an example. If that is all you are going to use, it would probably be best to just add that into your pages, but if you use a whole lot of classes, then it would probably be best to make a .css document for your css codes.
Now, in order to use this .css document on your pages, then you are going to have to insert this code into your page.
<link rel="StyleSheet" href="css.css" type="text/css">
You should use this exact code if you named your .css document css.css, if you decide you want to name it something else, then you should change the href="css.css" to href="documentname.css".
There is another useful tip that you can put in your CSS I should tell you about. This works especially well if you make a .css document that was outlined above. By using
<div> codes on your pages, you can add specific formatting to small sections of pages. Here is an example:
<.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #000000;
margin: -4px 4px 4px -4px;
padding: 0px;
}
Then, simply put this code where you want this formatting to show up: <div class="img-shadow"> After you place the content you want
this formatting to effect be sure to end with a </div> tag.
Of course, this is just an example. You don't have to name it img-shadow. You can name it anything you want and add any different kinds
of formatting you want.
|
 |
|
|
