The Best Way to Learn CSS

CSS works hand in hand with HTML; HTML sorts out the page structure, CSS makes it look pretty and adds subtle levels of interaction. As a web designer you should really get to grips with both these languages. Even if you don’t do the coding yourself, understanding how they work will help you design for the web.

Grasping the Basics: What is CSS?

C.S.S. stands for Cascading Style Sheets; documents which contain styling rules for applying to HTML (or XML, along with a few other structural formats). Multiple style rules can point to one HTML element, in which case there needs to be a way to determine which rule should take effect. The term cascading describes the process of filtering down from general rules, until the most specific rule is encountered. That rule is then chosen to do its work..

Through CSS, presentation can be separated from structure. It solves the need for mashing styling rules in amongst HTML, like this:

Presentation within structure. Ew.

which keeps documents neater and DRYer.

CSS is read by web browsers. They take the markup document, then they apply the styling rules to the elements within that document.

They don’t always interpret style rules the same as each other, and as browsers develop so too does their support of newer styling proposals. It’s often the browser manufacturers themeselves who experiment with CSS properties, in the hope that their suggestions will be adopted by users.

Ultimately, it’s down to the World Wide Web Consortium (W3C) whether CSS properties are standardized or not.

Grasping the Basics: Learn the Syntax

CSS syntax comprises a few fundamental pieces; rules, selectors, declarations, properties and values.

This CSS rule contains all the other bits and bobs we just mentioned.

Selectors point at elements within the HTML markup, then the declarations within the curly braces define how those elements should be styled. There can be multiple declarations within a single rule; each declaration comprising a property with an associated value.

There are many ways you can select HTML elements, from straightforward type selectors:

This will select all images and apply zero padding to all of them.

Then we have class selectors, which point to all elements with a specific class applied to them. Take a look at this markup, with its corresponding CSS:

Here’s an anchor, of which there could be many..

..then this will select all anchors with a class of “highlight” and make them orange.

Note: contrary to what you might hear, there is no such thing as a CSS class. There are CSS selectors which target HTML classes. You can read more about this on tantek.com and 456 Berea St.

There are a great many possible selectors to learn. There are even more properties to get to grips with (take a look at this list on the W3C site). Later on we’ll look at assignments during which you’ll be asked to learn plenty of each. Having as many as possible at your finger tips will make you a better CSS coder!

Assignment 1: Follow a Beginner’s Course

Now you have a fundamental understanding of what CSS is, it’s time to dive in properly. There are a number of beginner’s courses online which will help you along; here are just a couple which are definitely worth checking out:

Code Academy Introduction to CSS is part of their Web Fundamentals course. If it’s engagement and reward that you’re after then all Code Academy’s courses deliver by the bucket load. Follow along, free of charge, completing interactive tests to get instant feedback and advice.

Tuts+ Premium 30 Days to Learn HTML & CSS will be familiar to you if you followed our Best Way to Learn HTML outline. During this free course, Jeffrey Way takes you through HTML and CSS basics, from the absolute beginning.

Code School CSS Cross Country offers a similar interactive aspect to Code Academy, though in order to complete the curriculum you’ll need to be an enrolled member (currently $ 25 per month).

Assignment 2: Style Something, Several Times

When Dave Shea launched CSS Zen Garden back in May 2003, he aimed to demonstrate that a single HTML document could be styled in infinite ways using different stylesheets. It was a brilliant concept and a real lightbulb moment for designers around the globe.

Why not do something similar yourself? Take a simple piece of markup (Chris Coyier’s Unordered List Navigation is the perfect candidate):

<nav>
<ul>
	<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>
	<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
	<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
	<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
	<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>
</ul>
</nav>

See how many different effects you can achieve, just by altering the styles.

Take a look at this Webdesigntuts+ Community Workshop where nearly 100 readers submitted their stylesheets for a simple unordered list. As you’ll see from the results a little imagination can take CSS a long way!

Secret Doors – by Noel Delgado

Assignment 3: Follow the Masters

If folks know CSS, they tweet about it – that’s science fact. Pay attention to what CSS celebrities are doing and you will learn plenty. Here are just a couple of twitterers you should be following:

Extra

Why not find your own heroes on a social coding site like GitHub or CodePen? The best thing about networks like these is the advice everybody gives each other; if you have a CSS problem, someone will have had it before you and will be willing to lend a hand.

CodePen

Assignment 4: Figure Out Browser Support

As we mentioned earlier, browsers don’t always interpret your styles equally. This is particularly true if you’re catering for older versions of Internet Explorer, which are way behind the times in terms of CSS adoption. Modern browsers (such as Google Chrome, Mozilla Firefox, Apple Safari and Opera) have more proactive updating management, so it’s less likely that older versions are floating around for long.

Saying that, there are differences between each of these browsers irrespective of how up-to-date they happen to be. Some CSS will be well supported in one browser, differently interpreted in another, so for this reason it’s sound advice to pay attention to browsers.

Here are some useful resources which will help you on your way:

BrowserStack is quite simply the best cross-browser testing tool available today. Use it to see how different browsers and platforms mess with your CSS.
How To Deal With Vendor Prefixes by Chris Coyier covers the basics.
The Principles Of Cross-Browser CSS Coding on Smashing Magazine covers some of the likely CSS issues you’ll come across when dealing multiple browsers.
Can I Use… is an invaluable website for checking which CSS properties are supported in which browsers.
Prefixr transforms your CSS into cross-browser friendly syntax. If that property you’ve used needs a particular browser-specific prefix, Prefixr will help you out. This is really only relevant if you’re using CSS3 properties.
Prefixfree is a similar tool to Prefixr, it “lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.”

Assignment 5: Read a Book

Whether you read them cover to cover, or simply have them to hand if you need quick reference, the best industry books are unparalleled for learning.

CSS has been written about many times, but these publications are my cream of the crop:

HTML and CSS Book is a beautifully illustrated guide for absolute beginners, plus the site makes all the code snippets and examples available to play with.
CSS: The Definitive Guide by the Godfather of CSS, Eric Meyer.
CSS: The Missing Manual is a few years old now (in tech terms) but is still considered by many to be the go-to book for CSS fundamentals.
CSS3 For Web Designers by Dan Cederholm (who you’ll be following on Twitter after Assignment 3, right?) is one of the early A Book Apart books. Not for the absolute beginner, but get it as paperback even so.
CSS Essentials (eBook) from Smashing Magazine.

Assignment 6: Suss Out Selectors and Specificity

As you gain confidence, your CSS vocabulary will grow. You’ll be committing CSS properties to memory and also the various ways of selecting elements. Now’s the time to really turn it up a notch and seriously learn some CSS selectors.

The 30 CSS Selectors you Must Memorize on Nettuts+ really has you covered.
Almanac of Selectors on CSS Tricks for reinforcement

Learning CSS selectors means also getting to grips with specificity.

Stormtrooper Icon by Jory Raphael

Which selectors will override others? What’s the bare minimum syntax I should use in my selectors to be efficient in my coding? The one place I always send people to for learning the rules of specificity is Andy Clarke’s CSS: Specificity Wars. An inspired visualization of how selectors fare when pitted against one another (and the dark forces).

Assignment 7: Taking it Further

CSS is a very involved discipline. Once you have the basics under your belt, there are many avenues for further investigation. For example:

CSS3

CSS3 is constantly on the move. New properties are adopted, others are dropped altogether by browsers, sometimes the syntax even changes. Getting to grips with CSS Gradients, will be another nail in the coffin of your Photoshop use; why use snipped images when you can CSS it?!

Refer to CSS3 Please to see all correct CSS3 implementation, with recommended fallbacks for non-supporting browsers. Also, take a look at CSS3 Essentials on Tuts+ Premium to give your knowledge a boost.

Media Queries

Responsive Web Design allows your fluid web layouts to alter, depending on how the page is being accessed. CSS3 media queries help this process, delivering different CSS rules depending on the circumstances. Take a look at Responsive Web Design: A Visual Guide to get started.

CSS Preprocessors

It turns out CSS could be better. Once you’ve started using CSS for real world projects, you’ll probably draw the same conclusion. Maintaining large CSS files is difficult, repetition is common – and why can’t you use a variable to store the value of a HEX color instead of typing it over and over?! CSS Preprocessors such as Sass and LESS solve all these issues and more. Without even having to ‘re-learn’ a similar language (just stick to vanilla CSS if you want) you can harness the power of preprocessors.

Check out Get Into LESS and Mastering SASS if you’re interested in learning more.

SMACSS

SMACSS (or Scalable and Modular Architecture for CSS) is a concept developed by Jonathan Snook, which aims to combat the awkward maintainability of CSS files. It doesn’t teach a new language, rather suggests ways in which you can make your current CSS more organized.

Writing modular CSS enables you to take chunks of styling code and slot it into other projects, without ruining the rest of your styles. Specificity management at its best.

Conclusion

There’s no question that with skills like HTML and CSS under your belt, you’ll be a much better web designer. Follow the two learning processes we’ve outlined and you’ll be well on your way.

If you have any CSS learning recommendations, shout them out in the comments!

Webdesigntuts+