Cascading Style Sheets (CSS) 101

Belle Maison Hang Tag Collage
Display your memories in style with this hang tag collage from Belle Maison.

BEARPAW Boticia Women's Curly Lamb Boots
Add a bold accent that will keep your warm while wearing these BEARPAW Boticia curly lamb boots.

Cascading Style Sheets (CSS) 101

Yes, you need to know about CSS, even if you plan on having a pro design your website.

Why? First good reason:

It costs you much less to have changes at your website done if you use CSS instead of font tags.

What is a Stylesheet and what do they do?

So; let's start at the beginning … Web pages once contained all the information required to:

– Display the information, product or service you wished to share with and or sell to the WWW.
– Display the above information in manner visually appealing and reflecting you / your businesses personality, message, style, brand etc.

As the WWW became more sophisticated, so did the need for web sites to reflect this by becoming more visually appealing.

So why is that a problem?

Coders got bigger paychecks but were becoming weary from the amount of time it took adding all this personality and "flair" to web pages and more importantly, clients balked at the way costs of creation per page, consequent changes to pages, expanded.

Even with the availability of newer visual development environments, it required a lot of extra work adding extra coding tags around each little area that needed to bold , italic , or both. Each requires a separate tag. You take a quick look at even a small section of this page an might get glimmer of how many separate "coding tags" one might need to code. Think of a "tag" as enclosure with a complete set of instructions to the web browser about how you want this piece of text to look.

Solution – Separate style from substance.

Well, we finally got smart! EUREKA (All of us together at once of course 😉 What if we created a master document that told the web browser what to do with any tags that appear on any page of this website. WOW … A single document describing what to use for each style you might want to use. This gives us the ability to change a text color for a particular heading (for example), site wide by changing one page, the master instruction sheet, the Cascading Stylesheet. We are released from the burden of going through and every page to change the font colors or using hit and miss "search and replace" features.

To make a long story short, We (developers) now use the web pages for the "content" and create a separate page to describe how the content for the entire website should look.

We plan to cover this topic in future articles and extend the scope using real world examples to explain the relevancy of CSS to you and your success on the Wide World Web.

In our next segment, we will talk about little about the relationship and differences between "Styles" used in Word Processing programs such as Microsoft Word and "Cascading Style Sheets" for the Wide World Web.

You may also like...