Recently, I’ve had quite a few people ask me some entry level questions about CSS. Thinking back, I remember coming across some of these same questions myself as I was writing code. Learning some of the basics in the beginning would have saved me countless hours of debugging. Now with CSS3 making its way into the mainstream, I’ve decided to start a series of CSS tutorials called CSS3 101.

Before getting started, you should you have some basic knowledge of HTML5. If not, W3Schools has a great HTML5 Tutorial.

What is CSS?

According to wikipedia:

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.

In other words, CSS is the language that tells other documents, such as HTML, how to look and feel, where elements are placed, etc. Back in the stone age of web development, these definitions were placed directly in the HTML itself:

This method causes a few problems:

1. Messy Code: As you can probably imagine from the example above, if this process is continued, It will undoubtedly lead to messy code in the long run. In addition, this extra code bloat adds to the overall file size of the HTML document, which can increase your server bandwidth. CSS simplifies this by being much more concise and descriptive:

   1	<p class="bright">Hello World!</p>

2. Difficult to update: For example: Lets say you have a website with 20 HTML documents. Using the old method of placing definitions directly into the document, would require you to make all changes individually across all 20 files! Using CSS will allow you to make the change once and have it reflect every document it’s attached to.
3. Separate logic from design: Sure, your website might look fantastic right now, but what about 5 years from now when it starts looking dated? Using CSS efficiently will help ease this transition in the future.

What CSS Isn’t

• CSS can not create content.CSS will manipulate content it’s attached to but can not create it. This is created in the HTML or XML file.
• CSS is not a programming or scripting language.You wont be able to assign variables or write advanced conditional statements. CSS acts like a template, which is why it’s so powerful.There are a few exceptions to this. If you are a little more advanced and would like to jump ahead, check out SASS and LESS.

What’s Next?

The next lesson will cover the basic CSS semantics & embedding VS. linking to documents.

Thanks for reading! We’ve covered a lot, but have still only scratched the surface of what’s possible with CSS. I hope this served as a helpful primer!