| RebREBreb ( @ 2005-01-08 22:55:00 |
| Current mood: |
Translating Standard (f.a.) Code Tutorial
Alright, here I'll be just translating what the free account codes stand for. I noticed that a lot of people code blindly, not really knowing what the terms mean. So here I show you the standard free account code, by that I mean background + entries and what everything means. I suggest you be somewhat adverse in what they look like and their corresponding LJ overrides, etc.
Legend of Colors:
Any HTML will be in red
CSS will be in blue
overrides will happily be in gray.
Our Code:
GLOBAL_HEAD<=
<style type="text/css">
<!--
p,font,td {
font-family:arial;
font-size:8pt;
color:#000000;}
/*If you know HTML, you can often reference the elements with the CSS terms as often they're taken to be the same. By grouping several CSS terms together you can give them all the same property without having to repeat the same thing over and over for every group. Back to the point in that little group above you're telling the code to make the font 8pt arial in black for all the <p>, <font>, and all your td's. Make sure that when you group terms together that they do not conflict with one another. CSS read from the bottom up. So any conflicting properties and your browser will take the bottom most. This also goes for any classes or id's that would contain the same propeties, etc. XD you get the point */
body {
background-color:#96A4A4;
background-image:url('http://img.photob
background-repeat:repeat;
scrollbar-base-color:#BFC5C7;
scrollbar-arrow-color:#BFC5C7;
scrollbar-track-color:#96A4A4;}
/*Okay, you're telling your browser now the the >body< portion will have a #96A4A4 background color along with 'http://img.photobucket.com/albums/v21/l
table {
width:40%;
margin-right:25%
margin-left:25%;
border:1px solid black;}
table table {
margin:0px;
border:0px;
width:100%;}
table table table {
margin:0px;
border:0px;
width:auto;}
/* Here's where the CSS goes up a notch. First we start off with a standard table code. Give the width to be 40% of the screen and 25% margin on both sides and a happy little border. When you choose percentages as your units, remember that it adjusts with each screen resolution so becareful is you have a fixed position all planned out on your 1024x768, because it'd probably look like shit on 800x600. I would suggest using pixels or em (the width of the letter m) or ez (width of the letter z), something fixed. Right, now moving on past the basics. We have table table which means that this CSS only applies to HTML coding with 2 tables in sucession... and the saem goes with table table table.... Ya? Got it? */
a:hover {
color:#606060;
text-decoration:none;}
a:link,a:visited,a:active {
color:#404040;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
font-size:7pt;
font-family:verdana;}
/* And lastly, our links. IE standardizes links with an underline so we set text-decoration:none; so that it disappears and never returns unless of course you didn't say no text-decoration in your other link properties... The color,font, and weight were also changed accordingly. Now you could instead of writing all that choose this alternative link coding:
a {
color:#404040;
text-decoration:none;
font-weight:bold;
font-size:7pt;
font-family:verdana;}
a:hover {
color:#606060;
text-decoration:none;}
By setting a { we include all properties of the links and afterwards only write what will change once hovered in the subproperty... yaaaaa? XD */
-->
</STYLE>
<=GLOBAL_HEAD
And this concludes this short presentation of CSS. Clarifications that need to be done? It's very late at night. So I don't know what got carried away XD. I wanted to go more in depth and babble on some more about CSS but that would've been overdoing it.