|
Nothing too fancy, just a quick guide to CSS classes and implementing them for a friend.
.imaclass {font-family: 'and I am an attribute',arial,sans-serif; }
Now as you can see the .imaclass is the class part of the code. That gets put inside your <style> tags preferably at the beginning of the page. I always put a period {.} before my classes. There is also the option of putting a # before them instead but I don't use that method and frankly I'm not sure if that means something special. I do know that no period or number sign in front of a class should only be used for HTML tags. For instance:
hr {border: none 0; border-top: 1px solid #704B95; height: 1px; }
That alters how your line breaks appear. Then when I place an hr in the page, it looks like this:
So, why use CSS classes? Well for example maybe you want to change the font in one area, but not everywhere. Well you can do that using a css class, and then you can change that as much as you want without mucking up all the fonts in the whole page. When you assign something it's own class, you can name it whatever you want. Swear words, your teddy bear's name, whatever you named your spouse's private parts. Doesn't really matter. I always name mine something ridiculous so I know it's all me . I hate when I confuse MY css classes I assigned my text or images with the ones Jot named for the whole of AW. Name it something personal so you don't get confused either.
my weee space
Why did I do that? Well that happens to be that space's assigned css class name. Weee. I created it, then placed it inside my <style type="text/css"> </style> tags.
.weee
Then I told it how I wanted anything I placed in the page using that class to appear.
.weee {background-color: #1f1f1f; color: #e1dcc8; border: 1px dashed #949494; width: 80%; padding: 10px}
Notice in the attributes area how I placed a ; or semi-colon after each complete attribute except the last one where it doesn't require it (though doesn't hurt it either should you leave an extra one in there). The code will not work without those semi-colons. Make certain to enclose it all in { brackets }.
Now, since my css is complete with a class and all the attributes I wanted for my block of text, I need to use it. You have a choice of how to use it. You can call on your new class by placing it inside a <div> css division </div>, inside a <table> HTML table tag </table> or if it's a small amount of text/objects you want to change maybe just a simple <p> HTML/XHTML paragraph </p>.
To add it in, call upon that class but leave out the period {.}. For example:
<div class="weee">my special wee</div>
Gives me:
my special weee
So basically just stick it inside whatever tag you are using.
For friend, just add this in after current stylesheet, it's a darker brown:
<style type="text/css">
#Content, .pageStyleSheet, .community {color: #2A211D !important}
.community a:link {color: #2B543A; }
.community a:visited {color: #407D56; }
</style>
|