What is CSS?

If you understand or are learning what HTML is, but aren't sure what CSS is (Cascading Style Sheets), then this is for you.

HTML is like a very simple outline or frame. Some people have referred to it as the bones of a website. I'd like to compare it to a color by numbers picture. You know the ones you did in elementary school, especially around the holidays. Each section had a number and each number meant a different color.

Pure HTML - Plain Webpage

The colorless sections, as well as the numbers, are the HTML. The HTML and words of a website aren't very pretty when they're on their own, but add a little CSS and you have your color.

HTML and CSS - Webpage with CSS

CSS tells the website what to look like. It determines the color, size, shape, spacing, borders, decoration, width, height, placement, etc. of the HTML of the website.

You may need to think about what I just said before going on. Okay, are you done processing that?

But unlike the color by numbers picture, modifying the CSS can actually change what the picture looks like. So the horse above can be changed into a dog. They both have the same parts, a head, eyes, legs, a tail, which is the HTML. Don't think about the actual horse as being the HTML. The HTML is the sections with the numbers. These basic sections haven't changed. Only the shape and colors have changed, which is being controlled by the CSS.

HTML and CSS - Webpage with different CSS

If the purpose of CSS is still a little foggy, it's okay, that's why I'm going to show you 3 pages that have the exact same HTML, but have different CSS rules on each page.

This first page is just with plain HTML, there's no CSS whatsoever. Kind of boring. Here's the actual, raw HTML code.

On the second page, the HTML hasn't been changed at all (well I did add one thing, see the difference in the raw HTML code). The only thing that has been added is the CSS. See what the actual CSS file looks like.

For the third page, again, the HTML hasn't been touched (okay so I lied again, I did change one word, go here to see what it was). This page is to show the power of CSS. All that was changed was the CSS file and the entire website looks different. Here's what this page's CSS file looks like.

Side Note (if you want to):

Now if you looked at the HTML code for the second page, you would have noticed that I used HTML to include an external CSS file for the page. This is the proper way to add CSS.

The real power of CSS is not in changing the design of just one page on a website by changing the CSS, but in changing the design of your entire website by only changing a few CSS files. Pryor to CSS, website developers would have to go to every single page of a website to modify the entire website's design. This could include hundreds to thousands of pages. Now website developers can modify a few CSS files in order to change the design of a whole website.

Share:

Facebook Twitter StumbleUpon Reddit Delicious LinkedIn