Introduction To CSS

Now, it’s time to start learning how to make our website more visually appealing. However, you’ll definitely need some sort of image editing program; like Photoshop or GIMP. Don’t despair if you don’t have Photoshop, you can always download GIMP for free.

Anyway, in order to learn how to make our website look cool, we must learn CSS. CSS stands for Cascading Style Sheets. CSS can effect any element on your webpage, whether it be an image, or just plain text.

You can choose to use CSS two ways in your code. You can either; use a style sheet, or code in plain CSS within the "style" attribute. Most websites use plain style sheets, and then use the "style" attribute for one off occasions.

Coding a Style Sheet

Yo’ll find that coding a style sheet is rather easy to do. This is what a normal CSS Style Sheet might look like:

Code body {
font-family:verdana;
font-size:10px;
color:#000000;
}

#banner {
width:800px;
height:200px;
background-image:url(http://www.tinypic/2sxk29.gif);
}

.title {
font-weight:bold;
padding:2px;
text-align:center;
border:2px solid #FFFFFF;
}


See? Wasn’t too hard, was it? Now, I’m going to explain what’s in it.

Okay, first of all, we have "body {", and that means that anything between the "{"and the "}" affects anything within the "<body>" tag. So, for everything within the "body" tag, the text’s going to be Verdana, 10 pixels high, and Black color.

Next, we have "#banner". This is defined in the HTML code, by using the "id" attribute. So, in the code it would look something like this:

Code <div id="banner"></div>


But, the "id" attribute is not only for Divs, you can also use it for tables, in the <tr> and <td> tags, as well as spans and paragraphs ("p"). The "banner" defined div or table will be 800 pixels wide, 200 pixels high, and have a background of http://www.tinypic/2sxk29.gif (Which by the way, I thought up of on the spot).

Next, we have ".title". This means that you’re expecting to use more than one on each page, for example, like some kind of page header. Moving on, to define a class in HTML, we use this code:

Code <span class="title">Text</span>


Once again, you don’t have to put the "class" attribute in just "span" tags. You can place almost anywhere, be it; divs, tables, images, spans, paragraphs ("p"), fieldsets, inputs, textareas.. you name it! Anything within the "class" of title would be Bold, Centred, Have a 2 pixel wide border, and have a padding of 2 pixels all around.

And that concludes style sheets. However, if you wish to use the "style" attribute, you would use it like this:

Code <img src="URL" style="text-decoration:underline;" />


And, that image would have an underline. Easy, simple, done. Simply put, within the "style" attribute, place pure CSS.