Posted: June 23, 2011 in Uncategorized

Here’s a quick intro to CSS (Cascading Style sheets)

Previously i wrote about html5 which is great but how ever as great as html5 may be alone it is not much because css makes html stand out. Now to be able to make html5 look wonderful CSS is needed. Ofcourse if talking about html5 CSS3 is mentioned most often but before CSS3 you need to know where CSS comes from its ground roots. Just as you need to know the roots to figure out a tree CSS goes before CSS3 which is most recent.

CSS came about to complement html and make it look presentable to the web because html alone was just too basic for anyone to notice.

HTML (Hyper Text Markup Language) is a web language commonly used to create websites in using a combination of lists, forms, text, tables etc. It was then that CSS came about because  they wanted the tables to be colorful, the text to have different fonts and sizes, pages to have background images etc. Now with this in mind a few methods where then invented to be able to apply CSS to (X)HTML.

The following examples will make use of this html structure

Inline Styles

This method makes use of CSS attributes within the document

<p style=”color: #F00″>Paragraph</p>

This is not the best example you will find because it hinders with the html presentation of your document when you have more content on your page to style

Embedded Style

This method continues to make styling within the document but this time grouped in the head section of your document

<style type=”text/css”>p {color: #F00;}</style>

This method is more exceptional at times compared to inline but again will clutter the html when you need more pages and more styling.

External Styles

This method makes use of CSS styling from a separate file with .css extension (default.css)

This is how you link to the file from the head of your html document

<link rel=”stylesheet” type=”text/css” href=”default.css” /> provided you created a file called default.css ofcourse.

Within the default.css file insert the following code : p {color: #F00;}

This is the most common used method by designers because it separates the html from the css makes your html presentable and css grouped together all in one file.

# All three example do the same thing using different methods.

Now that we know all three method things should go much faster. External style are a great way to design websites and have another feature to them to make life even easier and its called Import rule. This is was not meant to be part of the html side of things but rather to help import other style sheets to one master style sheet instead of rewriting the style and calling another style sheet file.

Create another style sheet (eg external.css) and add some a few CSS rules

Open your master.css file and add the following : @import url(“external.css”);

What this does is it imports all the rules on your external css to default.css.

With these three methods all in place we are ready start getting to know CSS a bit better. On the next post we are going to be speaking a bit more on what CSS can do for your site and eventually get into the more advanced concepts of CSS.

See you then !!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s