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?qmarks

– 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:

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 browser’s 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 set up 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 set up 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 values are equal to these styles by means of the colon character “:“. So always think of width:20px; as width=20px;. We denominate 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

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus

38 Responses to “Learning The Basics of CSS Faster Than Ever”

  1. yan eranda says:

    This is the best ENGLISH in tutorial i ever read over the internet easy so understand and straight to the point. :D

    i am just starting CSS for my nav and tnx to this

  2. umairsario says:

    yes :) very easy and user friendly… tutorial

  3. […] Se você não estiver familiarizado com a escrita de CSS, eu sugiro fortemente que você leia sobre algunstutoriais básicos de CSS . […]

  4. Prateek says:

    Devin,
    I wanted to use the same background in my project.
    It would be great if u could share the details.

  5. Simon says:

    Devin,

    Still strugling sorry…

    If you have several entries named “.rightsidebar” in your style sheet, how would the browser know which one you are referring to?

    Is it that each id can have a class *related* to it and it doesn’t matter if two unique id’s both have related classes with the same name?

    S

    • @Simon –

      “If you have several entries named “.rightsidebar” in your style sheet, how would the browser know which one you are referring to?”

      By using what is called specificty in your “entries” (called selectors). Lets say you have 4 variations of a right hand side bar, (short, tall, blue and green) you have a few options to add specificity here. One way would be to use additional classes next to this “.rightsidebar” class like so:

      <div class=”rightsidebar tall”></div>
      <div class=”rightsidebar short”></div>
      <div class=”rightsidebar blue”></div>
      <div class=”rightsidebar green”></div>

      and the css would be:

      .rightsidebar {
      border:1px solid #000;
      margin:15px;
      padding:15px;
      width:200px;
      }
      .rightsidebar.tall { height:400px; }
      .rightsidebar.short { height:100px; }
      .rightsidebar.blue { background:#000099; }
      .rightsidebar.green { background:#00ff00; }

      See how we have the .rightsidebar that has repeated styles then we use another class to add specificity to our selectors. Another method of adding specificity to a selector is to first select a unique parent and use it’s id or class in our selector.

      <div id=”primary”>
      <div class=”rightsidebar”></div>
      </div>

      <div id=”secondary”>
      <div class=”rightsidebar”></div>
      </div>

      <div id=”tertiary”>
      <div class=”rightsidebar”></div>
      </div>

      <div id=”footer”>
      <div class=”rightsidebar”></div>
      </div>

      .rightsidebar {
      border:1px solid #000;
      margin:15px;
      padding:15px;
      width:200px;
      }

      #primary .rightsidebar { height:400px; }
      #secondary .rightsidebar { height:100px; }
      #tertiary .rightsidebar { background:#000099; }
      #footer .rightsidebar { background:#00ff00; }

      So here we used parent element’s ids in our selectors to add specificity between the different variations of a “.rightsidebar” classed element. Please be sure to understand that these two examples is just showing you one of many MANY ways to add specificity to your selectors.

      “Is it that each id can have a class *related* to it and it doesn’t matter if two unique id’s both have related classes with the same name?”

      Um, I swear I’m not trying to make this confusing but, this last question is both yes and no. I think the best way for me to attempt to make it a little more clear is to show you:

      <div id=”primary rightsidebar”></div> = not valid, you can’t have two id values in one attribute.

      <div id=”primary”></div> = is valid.

      <div id=”primary” class=”primary”></div> = is valid, but kinda silly and not necessary.

      <div id=”primary” class=”rightsidebar”></div> = is valid.

      <div id=”primary” class=”rightsidebar blue”></div> = is valid.

      <div id=”primary”>
      <div id=”primary” class=”rightsidebar”></div>
      </div> = is not valid, only one unique “primary” id value per document.

      <div class=”inner”>
      <div class=”inner”></div>
      </div> = is valid, you can have repeating class values per document.

      So there are many combinations of class and id attributes you can use, but one contant remains, id values are unique per document and classes are not. Here are some combinations of valid and not valid selectors.

      #primary.rightsidebar {} = valid
      #primary .rightsidebar {} = valid
      .rightsidebar#primary {} = valid
      .rightsidebar #primary {} = valid
      .rightsidebar .rightsidebar = valid
      #primary.rightsidebar #primary = not valid
      #primary .rightsidebar #primary = not valid

      I hope this helps.

  6. Simon says:

    Devin,

    Your tutorials are excellent, thank you :-)

    I think the penny is slowly dropping for me as regards CSS but I still have some fundamental issues…

    You say:

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

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

    I don’t understand what is to stop you using one or the other repeatedly in any given scenario…?

    What would go wrong if you did use “id=” repeatedly throughout a document?

    Thanks again for your help :-)

    S

    • @Simon – you can use multiple id attributes to a single document, however its the value per id use that must be unique from one another. So, say I have three divs in my document with ids, in order for my document to be valid each id’s value must be unique from one another.

      Classes however do not need to have unique values across different elements to a single document. Say our three divs now have classes, each element could have the same class value if you desired and the document would be valid.

      Other than the document not being valid anymore, about the worst thing that will happen with having repeated id values is that anyone who reads your code will assume you had no idea what you were doing.

      I hope this clears it up for you. ids must have unique VALUES from one another on a single document, classes can have repeating VALUES to a single document.

  7. […] 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… Read more […]

  8. Dallas says:

    Glad I found this tidbit on Google when I was surfing the web. Good STUFF!

  9. This site give me a lot about css .I study it regularly.

  10. free style musci says:

    I’m a huge fan of this site and I read it regularly. Keep up the good work!

  11. Digian says:

    I wanted to thank you for this superb read surely enjoying every and every truly small bit of it and I have you bookmarked to look out new stuff you post.

  12. Shahbaz says:

    Thanks a Lot for the tell all Basics

    It Really Good Site For Basics!
    Thanks u Sir

    Thanks a Lot for your Tutorial!

  13. Christoper Folden says:

    hey,just discovered your Post when i google something and wonder what web hosting do you use for your website,the speed is more faster than my blog, i really need it.will back to check it out,many thanks!

  14. Writer positions says:

    Hey, well done site.

  15. Clover says:

    I might be asking some questions here later….

  16. free style says:

    this for beginners’ good

  17. nazru says:

    excellent sir!!!

  18. Rai niaz Ahmad says:

    this is good tutorial…lets see where it will take me because I just started learning css and wanna changes for my blog http://rainiazahmad.com

  19. aditi says:

    hello sir ! can u plz tell me why we r writing this statement … type =\”text/css\” … what is the exact meaning of this statement and what is the purpose of this ? please reply me as soon as possible .. my e – mail id is as24191@hotmail.com

  20. visnotjl says:

    Rem tene, verba sequentur. People should keep this as a template for writing tutorials since now!

  21. Javier V says:

    Thanks, great abstract

  22. amit sachdeva says:

    good very easy way css

  23. ericjogja says:

    thanks … I lucky to find a tutorial like this

  24. waqas says:

    it was really great and easy, thank you!

  25. Devin R. Olsen says:

    Ok everyone part two of this three part series is now out \”Learning Intermediate CSS faster than ever\”. Enjoy!

  26. sandra dudley says:

    it was a great crash course i am taking a class and it has already given me a job-you are ery clear you should be a professor.

  27. Devin R. Olsen says:

    Thanks everyone for such positive feed back. However if you feel that this wasn’t as in depth as you would have liked it to be, then tune in next week for the release of \”Learning Intermediate CSS faster than ever\”! Also no more volger language in here please its only going to get deleted.

  28. tea_clipper says:

    Its a nice tutorial and an article at the same time, thanks so much for this post have a nice day

  29. gleam says:

    thanks a lot, simple as that…

  30. Leanne says:

    Hey, Devin Hi!

    This is Leanne–Jeff’s mom.

    I just used your website to answer a question I had on a CSS. I’m very basic and this class I’m taking is interesting. It really makes me appreciate you!

    Jeff says you have another site… what is it?

    Have a great day—you are awesome.

  31. Vijay Kumar says:

    really awesome tutorial to improve in theory

  32. mr says:

    brilliant, for a beginner like me!

  33. Jyoti Wadhwa says:

    Interesting tutorial

  34. Blaz says:

    I just love this tutorial! It’s simple but interesting and I’ve enjoyed reading it very much.

  35. SanBar says:

    Ok, seriously why can’t all the other tutorials be as straight forward as this?? Read It, Love It, Save It!! Thanks Devin.

  36. Devin R. Olsen says:

    I always enjoy feedback from my readers.

Leave a Reply