Cascading Style Sheets (CSS) Tutorial

CSS, short for Cascading Style Sheets, is regarded upon as a monster and as such is hidden in the closets of webmasters, which explains why many of them spend so many hours on the computer in a constant state of sleep deprivation and caffeine intoxication.

For our peace of mind and health, we will yank the CSS Monster out from that closet and put it right into the blinding light so we can overcome our fear and hopefully be able to enjoy a full nights rest knowing that the CSS Monster is not so ugly and can actually be our friend, if we’ll let it.

Cascading Style Sheets (CSS), was brought about by the World Wide Web Consortium (W3C), and not by evil programmers with too much time on their hands as originally believed, to develop a standard which could be interpreted by different browsers. This became a necessity as Microsoft and Netscape battled for world domination and kept adding html attributes which were only understood by their browser. Great for them, bad for us.

Now, through the implementation of CSS, we can design ONE website for all browsers instead of multiple websites, one for each browser.

What started out as a way of standardizing the way code was displayed through basic things, like font and color tags, has quickly grown into something much more powerful, which makes sense because all of the not so evil programmers could now spend more time working on the one standard which could be understood by all browsers.

CSS can be utilized in your web pages a couple different ways.

The FIRST and the one that takes priority over the others is what is known as Inline CSS and is used inside the html tag directly and only affects what is inside that element. This is a useful method when you are doing something like adding a Drop Cap or something which will only be used once or twice and you don’t want to clutter up your External Style Sheet.

The SECOND, and the one that takes priority over an External Style Sheet but not Inline CSS is the Internal Style Sheet which is placed in head of your page between the <head>and</head> tags. You might want to use this when you only have one page on your website or you need a page to look differently than the other pages which use your main CSS External Stylesheet. You could then use your Inline Style Sheets to overwrite anything on a line by line basis should you need to. Remember from above, the Inline CSS takes priority over the others.

The THIRD method is the External Style Sheet. This is a document that lives outside of your web page. By placing some code in the head of your web page between the <head>and</head> tags, you tell your web page to look for and use the instructions from that file to interpret how to display your page.

This method is useful when you have two or more pages and will allow you to control the look across all of your pages maintaining a consistent look throughout.

What a huge time saver!

Just imagine what will happen when the guru’s and “powers that be”, decide the BIG, RED, BOLD HEADLINES are no longer cool! With External Style Sheets, you can just edit your .css file (external style sheet), and get ready for a night out, although you may find yourself lonely because all of your webmaster friends will be working feverishly through the weekend making this change on each individual page.

What happens when you are using inline css, internal css, and external css?

Good question! I’m glad you asked!

This is where the word “cascading” comes onto the scene. Let’s say that you have an External Style Sheet which sets the look for your entire site. On one page in particular you add some new elements and some inline css which differs from what you’ve outlined in your external style sheet.

Everything will “cascade” or fall into place. It will first use any inline code, then it will look for any internal code in your pages head and then it will use any external style sheet. If you’ve used inline code to change the color and font of one particular paragraph, the rest of the paragraphs and all other elements will still be defined by the external style sheet. They play together nicely, so to speak.

Isn’t that a miracle!

But there are more. In the next issue, we will discover some of them.

Share this post using these icons:

Related Posts