Learning CSS

Like with HTML, in CSS, there are many things you must learn before finally getting the hang of this new language. In the last guide, I introduced you to CSS, and it's format. Now, it's time to learn all the different attributes CSS has. Obviously, I'm not going to list all of them here, but still quite a lot.

Okay, first of all we're going to start of with "font-weight". There's not much to do here, so it's only either bold, normal, or bolder. Bold is, as you'd expect, bold. Normal is normal text, and bolder is a font that is bolder than usual. Understand? So: ("font-weight:bold;").

Now, text-decoration. I've decided that I'm only going to tell you which each attribute does if it is not clear. Okay, so in text-decoration we've got; underline, overline, blink, and strike through. So, still, pretty basic. ("text-decoration:underline;"). What if you want two? ("text-decoration:overline underline;").

Now, we have font-style. It's pretty much just italic and oblique. Oblique is pretty much italic, but at a sharper angle. ("font-style:italic;");

Ha. We've now finished all the fonts. Now, to move onto borders! All you'll ever need is one border attribute. ("border: 1px solid #000000;"). As you can see, we declare the height of the border in pixels, then the type of border (There's dashed, dotted, solid) and then the color. Very Simple. And that's all you'll have to do.

Now, backgrounds. Basically, you can have a color background, or an image background. For the color background we have: ("background:#000000;"). For the image background we have: ("background:url(http://..."). Not very hard at all, eh?

Yes, I lied. There's just a tiny bit of font left. But, it's not very hard.. First up, we have font-size. Really simple~~ ("font-size:10px;"). We define it's height in pixels. Then, we have font-family. Which declares the font. So, most websites use Verdana, so then we'd put: ("font-family:Verdana;"). And, last of all, we have the font color, which is simply "color". ("color:#000000;"). And that, I promise is the last you'll see of fonts.

Now, that's pretty much all the basics. The next thing we're going to learn will hardly take a while, but here they are. We've got events. Basically, when we define the tag, id, or class, we can also attach an event to it. So, if say ("img:hover {") where to be placed in the CSS, that would signify what would happen if you were to hover over an image on your layout. There's also focus, which is pretty much only for inputs and textareas. It signifies when the cursor is in the text field.

And, that's all for the learning of CSS. Ta-Dah!