What is: CSS?

While HTML provides the backbone of a website, CSS allows you to have total creative control and make your websites look fancy!

CSS stands for Cascading Style Sheet and as the name suggests, contains all the style of a website. This is where all of the coloring, aligning and positioning is done.

It's not much harder to understand than HTML either. However, knowledge of HTML is an advantage as CSS needs HTML to be applied to.

None of the content of a webpage is placed in CSS - this is left down to HTML. When writing a CSS, we focus purely on manipulating the website's looks.

Wizzley's CSS

What Does CSS Look Like?

This article presumes you have some basic HTML knowledge. If you think you do not, feel free to refer to this article - it will provide you with the basic knowledge that you need.

Unless you've previously dabbled around with web design, it's unlikely that you'll have seen what a CSS looks like. As CSS is included in the <head> tags of a HTML document, you can use the same method you would use to see HTML to see CSS. In most browsers, this is CTRL+U.

If the website developers have decided to use an internal style sheet, it will appear between <style> tags. It is called an internal style sheet because it is included inside the HTML document.

Conversely, the website developers may have decided to use an external style sheet and this is the case with Wizzley. The CSS will still be in the <head> tags of the HTML document, but it will only be a link to the actual CSS file and will look something like this:

As we are only learning the basics of CSS, we don't need to understand what the HTML is, we just need to understand that this line of code means that the HTML document that it is placed in will use the CSS file "cascading_style_sheet.css".

An example of a CSS rule

There are many advantages to having an external style sheet and it is certainly, in my opinion, a benefit to get used to using them. The reason big websites like Wizzley use external style sheets is that instead of repeating hundreds of lines of code over and over, the HTML code above can be used to achieve the same effects.

This also means should we wish to change the banner at the top of this webpage, we wouldn't need to go into each and every HTML document and change it, we would just need to edit it into the external style sheet and the piece of HTML code will take care of the rest.

Basic CSS is potentially easier to look at when compared to basic HTML as all we're doing is telling the browser to change certain properties of HTML elements.

p{font-size:25px;}

The above is an example of a CSS rule. It has a selector (the element the CSS rule applies to) which in this case is <p> or paragraphs and it also has a declaration which is everything between the curly brackets.

Each declaration is split into two parts - the property and the value. These are separated by a colon, so in this case the property is "font-size" and the value is "25px". Each declaration must end with a semi-colon.

If you're planning on rapidly learning CSS, purchasing these books is not a bad idea!

CSS: The Definitive Guide: Web Layout and Presentation

View on Amazon

HTML and CSS: Design and Build Websites

View on Amazon

CSS in Depth, Second Edition

View on Amazon

A Basic CSS

A small CSS

You'll notice that line 6 is exactly the same as the example given above and as you may have worked out, this CSS rule changes the size of a <p> element's font. The larger the size in pixels(px), the bigger the font appears.

The other lines are style rules for the HTML element <body>. If you're unsure, the <body> element is the entirety of the content displayed on the webpage.

However, the <body> style rule looks different to the <p> style rule. This is purely for aesthetics and readability. It is much easier to read a CSS file if each declaration is on a different line.

The selectors for the <body> declarations are "color" and "font-size". "Color" changes the color of your text and as we already know, "font-size" changes the size of your font.

The color of a property can be set by either words or if you want to be more specific, you can use hexadecimal codes. For instance, #000000 is the same as writing "black".

However, both the CSS rules have a declaration detailing the size the font should be. This could mean that somewhere in the website, some text is both 10px and 25px, but this is impossible.

Instead, the more specific rule overrides the more broad. As "body" refers to absolutely all the content inside a webpage, it isn't very specific. On the other hand, "p" only refers to text within <p> tags which is more specific.

As the only rule we have in our CSS file concerning color is in the <body> rule, it will apply to all the text on our webpage.

If we had the following HTML file:

A small HTML document

What would happen if we applied the style rule above to it and then viewed it in a webpage?

The result!

Buy CSS relevant items to get a laugh out of other geeks!

Why not buy this mug and let everyone know you like your coffee #000000?


CSS Coffee Mugs Price info	You are the CSS to my HTML ... Price info

How Do I Begin To Write CSS?

Similar to writing a HTML file, I use Notepad++. As with if you were writing a HTML document, it easily allows you to create a good looking CSS file with very helpful color coding.

To take advantage of the color coding and inbuilt error checking, you must save your CSS file with a .css extension.

Notepad++ is very lightweight and isn't very computer intensive, so almost every computer can run it, meaning you have absolutely no excuse not to download it for free and give writing CSS a go!

The more HTML you know, the more CSS you'll know. They go hand in hand and are built to work together perfectly. You'll soon find that any webpage you might create will contain tens, maybe hundreds of declarations!

Updated: 12/31/2012, Paul

Thank you! Would you like to post a comment now?