CSS: The basics part 1


And here I am… Back from a “refreshing” holiday.. Bet you missed me, didn’t you ;-)…

I figured a great topic to start with is some CSS coding. Please be aware that you’ll need some basic knowlegde of html is needed in order to understand this post. You can take a look at a few of my earlier posts (here, here, here and also here).

CSS is short for cascading style sheets. This coding language is used to format HTML. And yes indeed, you can format a webpage by only using HTML as well but CSS offers you more options and flexibility…

This will be a more informative post. Actual examples will be used in the next few posts, but we really need to go through the theoretical gibberish first ;-).

There are 3 ways to implement CSS.
The first one is embedded CSS. This means the CSS is inside your HTML document. To be more precise, inside the HEAD tag.
Secondly you can use the inline style. The CSS code will be inside the tag you want to apply it to. So nothing will be defined in the HEAD tag but a style will be defined in the tag you’d like to format.
The last option is the external style sheet. You create a CSS document which will be refered to within your HTML document. In this file you define all formatting.

Which one you use is up to you. It works either way. Although keep in mind that there are a few pros and cons to the different types.
The embedded CSS is great to use when you only need to defined 1 page. You define all the styles you want to use in the document and you just need to apply them to the tags used inside the HTML document. However, you will have to rewrite your CSS code in each HTML document you write.
Inline CSS is the least efficient manner to write CSS. You’ll be defining a style for each tag separately. In other words, you’ll need to define a style for each tag you use. The style cannot be reused in any way. Although could come in handy if you only plan to format a small portion of your HTML page.
External CSS is the most efficient way to code CSS (in my opinion at least). You define a file with all your formatting you’ll be using and refer to this document in every HTML page you are writing. In other words, you can create 1 CSS template and use it for all your HTML pages.
Handy? No?
Only small disadvantage is that you can easly forget which styles you defined and have to reopen the CSS file every time again to look up the correct style names. But in my humble opinion.. that’s not really an issue..

There is one very important thing you should know about CSS coding. Not all browsers parse CSS code correctly. But this is only for specific pieces of CSS code and, as with most IT stuff, there is a way to work around that.
Just so you know ;-)…

So much for the basic technical stuff… I’ll demonstrate a few examples in my next post.

‘Till then!

Advertisements

4 thoughts on “CSS: The basics part 1

  1. Pingback: CSS: The basics part 2 – Embedded CSS « Tech-o-rama

  2. Pingback: CSS: The basics part 4 – External CSS « Tech-o-rama

  3. Pingback: CSS: The basics part 3 – Inline CSS « Tech-o-rama

  4. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: