0
Posted February 11, 2011 by Spyros in Cascading Style Sheets (CSS)
 
 

Are You Using CSS to Customize The Look of Your Website ?

14
14

If you’re not using CSS or your cms uses it under the hood and you do not know much about it, you’re really losing much of the power you could get over customizing your website.

As with HTML, knowing CSS is vital for any webmaster and it’s very easy to learn too. It would most probably have been essential to you to make small or even bigger changes on your website’s design, even if you just created your first website. If you’ve not been under such circuimstances before, trust me, you’ll be :) Therefore, it really pays to know the basics about today’s standard website decoration technology, Cascading Style Sheets.

Of course, CSS is in fact a tool that works along with HTML beautifully. So, you already have to be quite competent with HTML before starting to learn more about CSS. Therefore, whatever you do, make sure you have a good knowledge on the basics of HTML because some of the things that are going to be discussed in this article could be a bit overwhelming if you don’t.

You could be wondering why CSS are really that important and how they are used throughout our html files. Imagine the following scenario. You have created the html code below :

<HTML>
<BODY>

<H2> CSS is great for website decoration ! </H2>

</BODY>
</HTML>

This is just a simple html page appearing a header of size 2(out of 6) in the browser window. Let’s now consider that we needed to change the text color of the header to green instead of simple black. There are of course various ways to do that and the easiest one is probably to change the font color like:

<H2> <FONT COLOR=’green’>CSS is great for website decoration ! </FONT> </H2>

This evidently does the trick but has a great disadvantage. It makes our code much harder to read. This is very important and as the code tends to become larger and larger it will become a huge barrier. On the contrary, we could just create a css file, name it “style.css” and inside it write:

h2 {
color: green;
}

This is a rule dictating something like : ‘Whenever you see an <H2> tag inside the HTML, make the color of the text green’.
Then, make the following change to the html file to include your new css file.

<HTML>
<HEAD>
<link rel=”stylesheet” href=”style.css” type=”text/css” charset=”utf-8″ />
</HEAD>

<BODY>

<H2> CSS is great for website decoration ! </H2>

</BODY>
</HTML>

As you see, you just need to set a reference between your HEAD tags which come right before the BODY tag. This way, you instruct HTML to work along with the CSS file of your choice and make the appropriate changes automatically.

Of course there are lots of things to learn that will certainly be useful to you when operating CSS. This was a very simple example. However, since i cannot really write anything that is important to learn, i think it’s important to present you with some very nice CSS videos from youtube that will really teach you many of the things you need to know about this technology.

1) CSS Fundamentals

This video is discussing the fundamentals of CSS, what it is and how to use it. Nice one to watch as a first video.

2) Basic CSS Structure and Syntax

In this video you see some of the very basic things of CSS like the ones i described above. However, you will notice that the CSS code is created inline with the html content.

3) Grouping Elements

Learn how to group elements so that you do not write arbitrary code.

4) Div Layers and Classes

This is a very nice and important tutorial that you should definately watch. DIVs are the standard technique to use to create the Box Model that CSS so much utilizes. Everything is a box in CSS and it’s very important to understand that. Morever, you’ll get a very nice introduction to what CSS classes are and how they make your code easily reusable.

Hope that i managed to show you some of the raw power of Cascading Style Sheets. If you have any questions on the topic, please leave a comment below, i’ll be glad to help :)


Spyros