e c s t a s y . . . simply horizontal

05.25.08
- Changed layout to Simply Horizontal

Ren * | Millie |
* = host/family
More? | Apply?

Credit/link me if you used any of my content. =]

Please save onto your own computer. Thanks.
(More buttons here)

All content is (c) Kimberly @ Ecstasy unless otherwise stated. Redistribution and stealing are not tolerated. If you cannot abide by these rules, leave. Thank you.

I took the time to write these up for you so do not claim it as your own or alter the text in any way and then calling it your own. Please also remember to credit Ecstasy if it helped you in anyway! Thanks. :)

This is an introduction to the basics of CSS, Cascading Style Sheet. Follow along...

In a piece of writing, you have an introduction and conclusion, right? So does CSS! Use this code as to enclose the rest of the CSS:
<style type="text/css"> </style>

Now onto the "filling" of the code. =) First of all, everything INSIDE the intro & conclusion does not need < and > around them. Instead, let's take the font code for example:
Basic:
<font family=arial; size=10px; color=red>

CSS:

The body simply means everything, basically. It's all the text that you type. You can replace it with "b" (bold), "i" (italics), "u" (underline), "p" (paragraph), "a:link" (links) and many others; these are called selectors.

So now you know that you can change the "body" to many other things to change the looks of different parts of your site. You also know that the things that can replace "body" are called selectors. Well, this section tells you about properties which are the "font-family", "font-size", "color", "border", "line-height", "background-color", "text-decoration" and many more. I will only be telling you about a few basic ones:
<style type="text/css"> body { font-family: arial; font-size: 10pt; color: red; line-height: 11pt; letter-spacing: 1px; text-align: left; text-decoration: underline; border-top: 1px solid #000000; } </style>

Now I will explain each of the properties' purpose.
font-family = what kind of font
font-size = what size of font
color = what font color
line-height = how tall is the line (ex. if you text is 10px and your line is 11px, it'd look normal however, if your text is 10 px and your line is 8px, it would look a little squished though it is often a decorative style)
letter-spacing = how wide apart are each of the letters
text-align = which side does the text align to
text-decoration = any decorations to the text
border-top = creates a border above the text -- you can replace top with bottom, left or right OR use a combination of the 4!

Almost done! The last one is value. This is all the "variables", the parts where you can let your creative juices flow. =D:
<style type="text/css"> body { font-family: arial; font-size: 10pt; color: red; line-height: 11pt; letter-spacing: 1px; text-align: left; text-decoration: underline; border-top: 1px solid #000000; } </style>

Now I will list some possible values for each property.
font-family = arial, verdana, times new roman, trebuchet MS, century gothic, courier new
font-size = any size (you can use px or pt)
color = any color in the whooollleee wiiidddeee world =D Try to keep it so it won't blind your visitors though x)
line-height = any number (you can use px or pt)
letter-spacing = any number (usually px)
text-align = right, left, center
text-decoration = underline, italics and none if you don't want any decorations
border-top = 1px (how wide the line is -- any number) solid, dashed, dotted #any color

If you have questions, trouble or any suggestions for this tutorial, contact me. Email available on Owner's page.