Posted March 19, 2010 by Spyros in Cascading Style Sheets (CSS)

The Basics of Cascading Style Sheets Explained


Have you ever heard the expression “Don’t judge a book by its cover?”. Chances are that you have. If you want to create nice websites, you have to understand that people DO judge books by their cover, which is why the expression exists at first place. Since looks really matter, you have to know how to use CSS in order to stylize your webpages. In this post, i will tell you some of the basic CSS programming knowledge that you need to have in order to move on with it.

How do CSS work ?

CSS is today’s standard in stylizing web pages. Its usage is pretty straight forward and easy. As, you know, in HTML, we are using elements like <p> or <h1> in order to create our paragraphs, headers and more. When we create a paragraph, we sometimes need to change the text size or font inside a paragraph, for instance. CSS is all about making our lives easier in doing so, without repeating the same things over and over.

Change The Text Size and Font Using CSS

Using just plain HTML, we could stylize our paragraph like :

<font size="3" face="Times">our text here </font>

While this would work, there is a problem here. What if we wanted to do that on every paragraph of our HTML code ? This would turn out to become pretty tedious. Thankfully, this is where CSS comes to our rescue. Using a simple CSS tag, we can stylize our every paragraph like :

p  {
    font-family: Times, serif;}

Does that make sense here ? Now every paragraph of our text is stylized using these attributes. You may ask what happens if you just want to stylize certain paragraphs. Well, in that case, you need to utilize a more advanced CSS technique, called classes. If you’re more interested in that, take a look here :

CSS Classes

I will be creating tutorials about CSS classes and more in the future for sure.