Learning The Basics of CSS Faster Than Ever

So you want to learn CSS huh? Well I can teach it but can you make it stick? My goal here today is to give a CSS beginner a basic understanding of not only how to use CSS but what it really is for. I will do my best to approach the idea of CSS from an entry level user but I will do so in a matter of minutes.

- What is CSS?

- When do I use it?

- How do I use it?

These three questions are all a person would need to ask to receive the right information to learn even the basics of CSS.

So what is CSS?

CSS stands for Cascade Style Sheet and the name says it all. Every html document is made up of different elements. We use these elements to layout our content but we also use styles to bring visual life and structured rules to any element. Before CSS it was recommended to bring these styles and rules directly to an element by means of what’s called attributes.

Example of old attributes styles:

<img  src="img.jpg" border="0" align="left" />

Notice “border” and “align” these are style attributes and they have style rules (0 and left). The problem with this is that a person could have let’s say 50 images on a single page and on all 50 images we have to declare the border and align attributes along with their style rules just to achieve our desired look.

Here is where the “Cascade” portion of CSS comes into play. With CSS you declare both the border and align attributes along with their style rules just as you would in the above example, but you do so only once not 50 times. CSS will take our two attributes and their style rules and cascade them down over an entire html documents images in one fell swoop.

This is all ground breaking if you ask me. CSS saves you time and that much needed memory in a single html document for other things.

When do I use it?

CSS will not only cascade style rules down an html documents elements but also your entire site. Imagine if you will a visitor comes to your site for the first time and you’re cascade style sheet has been downloaded to their computer. Once your style sheet is in their browsers cache then the rest of the pages this visitor proceeds to view will indeed load faster. It’s true because you have already summed up your entire sites style rules for all elements into one sheet. So the answer to the question of when to use CSS is quite simple, as much as possible.

So you know that with CSS you can cascade different styles down to different elements throughout your entire site. Knowing this is the most important step into understanding the concept of how powerful CSS can be. A great rule to fallow when just beginning with CSS and being faced with the question of when to use it is to stop and think about this:

This element, the element you wish to style. Will this element be repeated throughout my site often such as a search bar or navigation?

If the answer is yes then by all means from what we now know you indeed want to use CSS. Now that you have an idea of when to use it and what it is, let’s quickly brush over why it’s great that you are in fact reading this tutorial now. These old attribute and style rules are not of standard practice anymore, and most have downgraded to almost no longer being compatible with modern browsers. So this is a perfect time for you to get on board with CSS.

How do I use it?

Ok, yes there is a learning curve to CSS and believe me if you understand the above you are half way there. Syntax is the next learning curve of CSS, but it’s really not that bad once you get down to it. There are three attributes we use on elements to bring CSS to them.

id=""
class=""
style=""

Id is for unique elements in a single document only. Let’s say you have three images in your html document a red, blue and green image. It would be ok to have an id=”red” for our red image, id=”blue” for our blue image and an id=”green” for our green image. If we added a second blue image to the mix however then both blue images would have to be using something else other than an id to locate their styles, such as a class=”".

Class is used for non unique elements such as our scenario above. If we have a red image and green image and then two blue images, both blue images would have to have a class=”blue”. Because there is more than one blue image element that wishes to receive special blue image CSS styles we must use a class=”".

Style is for both unique and non unique elements. Using style=”" on an element is considered to be inline styling. With the use of id=”" or class=”" we are calling to the name of a special rule with special style in our external style sheet. With style=”" we are not looking for a CSS rule name but rather writing our styles directly into the elements. Downside of this method is that you lose the whole cascade part of CSS because you have now embedded styles directly into an element for a per page load scenario.

Ok so just remember:

id=”" (is for unique elements to and single html document)

class=”" (is for non unique elements to and single html document)

style=”"(is for writing element style directly inline of the elements them self’s)

Again we use these attributes to call on specific rules that we have setup in our style sheet for specific or grouped elements.

Ok everyone clear on what these three are for? Everyone knows when to use them? Great let’s look at what is on the other side of this attribute and what one of these specific rules we call would look like.

.blue
#red
#green

Ok working off our last example of two blue images and a single red and green image.
In our CSS we start rules that belong to say a class or an id attribute with very specific characters. When you put a period in front of one of these rules its being stated that this rule is only for class=”" attributes. When you put a pound sign in front of one of these rules its being stated that this rule is only for id=”" attributes.

Ok everyone clear that we not only use class=”" or id=”" attributes in our elements, but also use the period or pound sign to state if the rules belongs to either a class=”" or id=”" in our css rules? Good let’s move on.

We know lots about CSS so far, we know that in our style sheet there are very specific characters to state if this rule belongs to id or class attributes. Now that we understand how to setup our rules properly lets learn about our styles.

Each rule creates a container for its styles and we do so with the use of curly brackets {}. So each of our rules should in reality always look like this.

.blue {}
#red {}
#green {}

Now that we have a container of curly brackets we can begin to add styles to our CSS rules.

.blue {height:20px; width:20px;}
#red {width:10px; height:20px;}
#green {width:20px; height:10px;}

Ok so you can see that we have added both a width and height style to all our rules. I wanted to point out that there is no order that you must have your styles in but more importantly there are some syntax differences than what you may be use to.

Each style such as height and width receive a value and we say these valuesare equal to these styles by means of the colon character “:“. So always think of width:20px; as width=20px;. We delaminate the end each style by use of the semi-colon “‘;“.

How you doing so far? Is it time for a re-cap?

Over many years CSS has turned this:

border="0"

Into this

.blue {border:0px;}

So what next you might be asking? Well this is a whole new day for you I hope, you should be walking away with a great grasp of what CSS is, how it can help you, when to use and even why to use. It’s up to you now to go out and no longer focus on the simple questions such as “why to use CSS?” or “how to use CSS?”, but rather “How many different styles are there in CSS and what are the values these styles allow?”.

And that is your CSS 101 Crash courses everybody.

Thanks.

Devin R. Olsen