What is CSS – A guide for web design newbies

October 27, 2011

If you don’t know what CSS at all, or how it is used but would like to get a basic familiarity with it, this guide is for you.  CSS stands for Cascading Style Sheets.  Simply, it is a way for web designers to easily define how your site will look.

To understand what CSS is, you should first understand why it was developed in the first place.   Before CSS was invented, both the content & text for every website, and it’s style were all included in one document.  This meant that if you wanted to change a color across your entire site you would have to go into every single web page on the site and make the changes to each.

CSS came along to change this, and more specifically to separate your content from the design (style) of your site.    Now, a properly designed website will have only your information, and what each component on the site is (given a name for each) in the HTML file — and in the CSS file it will only contain things like colors, widths, heights, images, spacing, for each of the named components in HTML.

It made the process of maintaining a website much easier.  If you had a site with 1,000 pages, and you wanted to change say the background color, this would have to be done on every single page.   Now with CSS you just had to open up the one CSS file that is linked to all the 1,000 pages, make a single change, and every single page would be updated.


Easy Code Example

The below is an example of what HTML code looked like before CSS came along:



<font face="arial" color="black">This text will be arial font and red.</font>
<font face="arial" color="blue">This text will be arial font and red.</font>
<font face="arial" color="black">This text will be arial font and black.</font>


The problem with this is you had to define every aspect of every piece of text on the site to get it to be uniform.   Conversely, in CSS you can easily define all the text in section to be of a similar color.   If you’re using CSS, you’d write the HTML something like this:

This text will be arial font and red.
<span class="blue">This text will be arial font and red.</span>
This text will be arial font and red.

And the CSS would look like this:

p {color:red; font:arial;}
.blue {color:blue;}

Here we are defining a default style for <p> (which is a paragraph tag), so everything these tags will be red, and Arial font.   That is unless we define other setting inside of these tags,

Cascading Style Sheets

In the example above you saw that we defined a style for both the p tag, and another one we called ‘blue’.  The period to the left defines a class (conversely # is used for IDs, which may only be used once per page).   The C part of CSS stands for cascading, which means that the tags that are inside other tags will inherit the attributes of the one it is inside.   So in the example above, the blue text we defined will be Arial because it is inside of the <p> tag we defined, but it’s color will be blue because we defined that itself.    If we didn’t define that color there, it’s color would be red.


<< Back to blog home

Recent Posts

Similar Posts

  • Unique Post


Related Terms