TyCamTech.com

I am writing this article under the assumption that you are a webmaster or at the very least would like to be one. You must have the basic understanding of HTML or what it is, because if you don't, I suggest you look elsewhere and then return when you're ready because CSS will seem extremely strange to you.

The reason I say this, and in a round about way describe what CSS actually is, is that CSS (Cascading Style Sheet) is a complimentary layer that sits just above your HTML and gives it pretty colours, shapes and in design... it's position. But you are in the 'Basics' section so we'll leave positioning out of it for now.

I will break this down in a few sections for you...

1. What CSS is: to give you a brief description of what it is and what it does.... and why I think you should learn to use it.
2. How it works: a general (not too technical) description of how it does what it does to the HTML document you are making.
3. Your future: an idea of what you'll be able to do with it if you keep learning.

1.  What is CSS?

HTML is a pretty old language now and has had it's updates but at it's roots it still stays very basic and in a lot of cases are now outdated.... and CSS is largely to blame. HTML is (as the ML stands for) a markup language. That is to say, it does one thing on a page to that immediate part of the page and then the next part of the HTML does one thing to the next part and so on and so forth. It's not a programming language so you can't just set a variable and have it work everywhere... HTML is very limited this way. For example, to use <font color='red'>word</font>... this would make 'word' red and be done and have no effect on anything else on the page.  This is where CSS comes in.

Let's say your new website has 14 table cells on it (<TD>) and in each one there is some text. All of the text is different but in each cell, you'd like for it to all be red. Using the HTML description above, we'd have to put <font class="red"> </font> around all 14 pieces of text in all 14 table cells. Want to add another row of table cells? You have to type out that font tag with the red colour a couple more times.

CSS is designed such that you never have to do the same thing twice, that is to say.... each piece of CSS works on a lot of elements on a page, as opposed to HTML having each piece work on one thing only.  You are able to tell your CSS that you want all your text to be red and the text will be red... even though the HTML doesn't do anything at all to make it be that way.

Here is the CSS used to do the same thing as the HTML example above:

And that's it. Now your HTML will look like this and still have red text:

That looks a lot nicer, doesn't it? And should you ever have to revisit it and add in more table cells, the new text will automatically be red just like the rest even though you didn't tell it too or have to revisit your CSS... it just works!

2. How it works

I'm not going to go into technical specifics and spout out too much geek jargon at you... CSS really isn't all that difficult to understand. As I said earlier, it's a "complimentary" layer above HTML. So all you need to know is that the CSS refers to something in the HTML.

In the CSS example above, you can see that it is referencing "td" tags specifically. This tells your browser that all <td> tags should show text in a red colour. It's pretty straight forward, looks simple... it is.

That's pretty much how it works but sometimes you want the CSS to only work on a few <td> elements and sometimes you only want it to work on just one. These are done with "class" and "id" attributes in your HTML. Don't worry, this isn't as scary as it sounds.

If you want your CSS red text to work in only one <td> cell and leave the rest along, then you give that <td> an ID with which the CSS can identify it. For example:

Now you can see that only one cell will be affected because the "td.onecell" tells it specifically which one to do.

If you want your CSS to work on some cells but not all of them, you have to give the <td> elements you want a CLASS name. This is very similar to the ID but handles just a touch differently. For example:

This tells the CSS that anything with that class name needs to be affected but nothing else. This is especially handy for having your top row be table headings and leaving the rest alone.

Don't get too hung up on learning the ID/Class terminology or dots and pound signs quite yet. It'll be covered more indepth in another article.

For right now, just understand that your CSS matches your HTML and if it has to be specific, you have to give your HTML elements names that the CSS can use. And that's how it works.

3. Your Future.

If you are making websites with HTML and not using CSS... you should already see that this will need to be in your future. But what you don't yet realize is that with CSS you can do so much more!

With CSS you can:

• Put text on top of text on top of images and so on... true layering on top of each other
• Attach HTML to the top, bottom or sides of the browsers so no matter where you scroll, it's there
• Make drag and drop elements right on your page
• Change the look of your website completely as if it was an entirely different site without touching the HTML at all
• Make some elements invisible
• More...

In days gone past, people used to slice up images into dozens of pieces in Photoshop and then try to piece them back together again in tables inside of tables inside of tables inside of tables... just to make parts of their images into links. With CSS, there's no need for any of that! You can do true design with elements placed anywhere on the page you like, even if it's over top of other elements.

Colouring your text is just the start.