5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours

by on 18th October 2013 with 28 Comments

screenshot

You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?

The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.

1. Wrap Your Mind Around Positioning Contexts

screenshot

If you really want to have a solid understanding of how to use CSS to move HTML elements to where you want them to go, you absolutely must get a grip on positioning contexts. And I don’t just mean a casual understanding, I mean a deep knowledge of their differences, behaviors, quirks, etc.

There are actually five position values that you should understand. If you can’t name all five without looking them up, then you’re definitely a prime candidate for this bit of education. Here they are: static, fixed, relative, absolute and inherit.

You need to know and understand all five, but the big two that will really change the way you code are absolute and relative positioning. Learning to wield these two positioning contexts separately, and then jumping into how they work together, will fundamentally change the way you view CSS layout, I promise. It’s a revelation that will make your job infinitely easier.

Resources To Get You There

The Lowdown on Absolute vs. Relative Positioning
This is my deep dive into the subject of positioning context. I briefly mention and explain all five but really focus in on the big two: how they differ, how they’re different and how they work together. Read through this piece and you’ll be well on your way to headache free CSS positioning.

CSS Positioning 101
This piece comes from the venerable A List Apart blog so right away you know that it’s going to be both thorough and incredibly educational. The article was published back in 2010 but the information is still perfectly relevant and it serves as a great introduction to all five positioning contexts. It’s not a very visual article but it does have lots of simple code examples to ease you into each concept.

Learn CSS Positioning in Ten Steps
This is a fantastically brief overview of the various positioning contexts. Instead of one long winded article, this page presents a little box with ten tabs. Each tab has a tiny code snippet and a sentence or two explaining the code. Off to the right is a live example layout that updates with each tab. This format is fantastic for visually linking code snippets to the layouts they produce and I highly recommend giving it a look if you struggle with mostly text explanations like the one above from ALA.

2. Master Floats

screenshot

When you’re first learning CSS, floats seem like one of the most screwed up layout systems imaginable. Once you learn to use them on a basic level, you then have to learn all about how parents containing only floated children have a collapsed height, which then leads to forty-seven different ways to solve the problem through clearfixes and overflow manipulations.

Fortunately, in the long run, you do get used to the concepts behind floats and they can even become so easy to use that you don’t give them much thought at all. The only thing standing between you and that goal is a solid article or two that really digs in and thoroughly explains float behavior and techniques from the ground up.

Resources To Get You There

Everything You Never Knew About CSS Floats
In this article, I cover nearly the complete gamut of topics regarding floats in CSS. It starts off with a basic discussion of what floats are and how they work. After this, I talk about how floats effect the boxes of the elements involved, how floats get weird with elements of varying heights, the nine rules that cover float behavior and of course the collapsing height debacle and how to fix it.

All About Floats
Chris Coyier has always been my favorite author when it comes to CSS related topics and his introduction to floats doesn’t disappoint. If you’re looking for a brief but straightforward discussion on how to work with floats, this piece has you covered. I particularly like the simple, attractive illustrations used throughout the article.

The Mystery Of The CSS Float Property
While Chris Coyier’s pieces are typically brief and to the point, the content on Smashing Magazine is usually quite expansive with tons of examples and relevant discussion. This article introduces the concept of floats, tells you all about how to use and clear them and then launches into a discussion of where you typically see floats being used in real world sites. If you need to see the theory come alive, this one is for you.

3. Know Your Selectors

screenshot

One of the keys to writing good clean CSS is to have a strong grasp of what CSS selectors are available to you, how they work and the degree to which they are supported on various browsers. It sounds like a simple enough topic, but in reality the world of CSS selectors is quite complex.

There are a ton of different interesting things to learn about here, from using attribute value selectors and targeting keywords in class names to how the universal selector can be helpful for debugging your code. Even if you think you can personally get by without understanding a bunch of fancy selectors, the truth is that other coders use this stuff every day and you need to be able to understand what you’re seeing when you hit view source!

Resources To Get You There

CSS Selectors: Just the Tricky Bits
This is a fun article that takes a look primarily at the more complicated aspects of CSS selectors. I skip the ground level stuff and jump straight into discussing how the concept of the DOM translates to targeting various aspects of your document with CSS. You’ll learn all about selecting children and siblings, how to chain selectors and a lot more.

The 30 CSS Selectors you Must Memorize
Jeffrey Way is a web dev rockstar and articles like this prove why. This Nettuts+ article covers a vast array of CSS selectors in a simple and brief format that places a lot of emphasis on browser support. Amazingly enough, Jeff even coded up live example pages for each of the thirty selectors.

CSS Attribute Selectors: How and Why You Should Be Using Them
Attribute value selectors are one of the most powerful subsets of CSS selectors, and CSS3 really boosts that power. You won’t believe how versatile your selectors can become with a little attribute value magic. After reading this article, you’ll be slinging around phrases like “arbitrary substring attribute value selector” like a pro.

4. Learn DRY Coding Concepts

screenshot

“Don’t Repeat Yourself.” This simple phrase has drastic implications when it comes to coding. When you really dive into DRY coding practices, the result is cleaner code, less work and a beautiful new workflow that is as empowering as it is flat out awesome.

Unlike the other topics above, which are fairly narrow, this one is a pretty vast subject that covers all manner of different practices, techniques and ideas. Interestingly enough, one of the things that has recently gotten my mind focused on DRY coding practices is the use of CSS preprocessors.

Though many claim that preprocessors lead to poor coding practices, the reality is the opposite. Obviously, preprocessors themselves help avoid manual repetition, but it goes beyond that. Examining the output of tools like LESS and SASS and the goals for the languages in general has actually led to me writing better pure CSS! Once you master concepts like @extend in Sass, you can’t help but think about the implications when you’re coding with only CSS.

Resources To Get You There

DRY CSS: Don’t Repeat Your CSS
In this article, Steven Bradley introduces you to the topic of DRY CSS and covers some of its main principles and goals. He boils the practice down to three simple ideas and shows you how to implement these ideas in a real workflow. The concepts are largely borrowed from a Jeremy Clarke presentation covering the same topic.

An Introduction To Object Oriented CSS (OOCSS)
As I mentioned before, the ideas inherent in the DRY CSS movement are pretty far reaching and directly related to concepts in other constructs. OOCS is an increasingly popular methodology that aims to help you create faster, more efficient stylesheets with superior organization and less repetition. There are two main principles at work in OOCS: separation of structure from skin and separation of containers and content. This article from Smashing Magazine will walk you through the basic ideas and help you apply them to your own work.

An Introduction To SMACSS Guidelines For Writing CSS
Remember Steven Bradley from the first article on DRY CSS? He also wrote this piece, which explains a project that’s similar to but separate from OOCS: SMACSS (a project from Jonathan Snook). As with OOCSS, SMACSS has two main goals. The first is to increase the semantic value of a section of HTML and content, and the second is to decrease the expectation of a specific HTML structure. This article explains both goals in detail and provides helpful code examples so you can see SMACSS in action.

5. Know Your Browser Support

screenshot

The fifth and final key to improving your CSS is to know what works where. CSS3 is far too enticing for most of us to ignore, but the hard truth is that a whole bunch of it doesn’t work in certain browsers (by “certain browsers” I of course mean IE).

The big secret that newbie web developers need to get into their heads is not that they need to memorize every single CSS feature and how every browser known to man handles it, instead its that there are absolutely amazing resources available to you that give you this information freely, you just have to know where to look.

Resources To Get You There

Nailing Browser Support in CSS3 and HTML5: Invaluable Resources to Use Today
In this article I introduce you to the relatively few sites that I have bookmarked for checking browser support. These resources are fantastic, visual and give you the information you need in a jiffy so you can get back to coding. Take a look to see what they are!

Browser Support for CSS3: What’s the Current Status?
This article was written over a year ago so the “current status” piece is arguable, but not enough has changed in this time to make the information in this article obsolete. It serves as an incredibly helpful overview of various CSS3 properties, divided into sections based on what works everywhere and what you need to watch out for. It’ll only take you a few minutes to go through and it’s well worth the read.

The Importance of Cross Browser Compatibility: Tips and Resources
If you’re really new to CSS and need a basic introduction to the topic of browser compatibility and why it’s important, this Noupe article has you covered. More than merely selling you on the idea of compatibility, it lists a bunch of great resources that you can use to ensure maximum compatibility. Of particular interest is the list of tools that will help you test your site in various browsers.

I’m Supposed To Read All This in 24 Hours?

screenshot

I’ve presented you with five absolutely critical topics to study up on and no less than fifteen articles from which you can learn the principles that you need to know. This is all well and fine but in my title I promised that you’d get better in a single day and not everyone has the time to sit down and read fifteen long articles!

The good news is that I gave you three articles on each topic so you’d have some variety to choose from. I explained the contents of each in detail so you can select the one that best fits your needs. Remember to choose the articles to read not based on what you do know, but what you don’t know. Make it a goal to fill the gaps in your knowledge.

My suggestion is to browse through the content above and pick five articles to read (one from each section). Even that’s a lot to undertake in a day but most of them aren’t too much more than a thousand words or so, many are less. I’m confident that you can pull it off. If you can’t, no problem. Change your goal to improving your CSS skills in a week and read one of your five chosen articles every day for the next five days. I guarantee that come next week you’ll be much better at writing clear, concise, compatible and reusable CSS.

What Other Concepts Do You Recommend?

Now that you’ve read my top five topics that people should brush up on to improve their CSS skills, I want to hear from you. What other topics do you think CSS coders typically struggle with and what resources do you recommend for anyone looking to learn more?

Stock photos provided courtesy of BigStock

Comments & Discussion

28 Comments

  • http://www.arywibowo.com Ary Wibowo

    thanks for the article :)

  • Andrew

    One thing I still seem to get my head around is how you get your footer to appear at the bottom of the browser if you only have a few lines of content on your page but get it to appear at the bottom of your content if your content is larger than the screen so requires scrolling. An article explaining how to do that in the same way these have been written would be invaluable.

  • http://www.firebratstudio.com Susie

    Hey Andrew, check out http://www.cssstickyfooter.com for exactly how to do this. Works a treat!

  • Andrew

    Ah, thats great. Thanks Susie!

  • http://Karthikkadambi.wordpress.com Karthik

    This is the type of article I was looking for, just eased out the uncomfortable feeling.Hoping to read all the 15links and get best out of it.thanks

  • FreakDeziner

    Huh ;). Thank you really good topic!. I still don’t know very good positiong. I hate that Relative and Absolute. :D

  • Daya

    I am self-learning web designer/developer and struggling to find a one-stop article to know about the style sheet. I am finding it great difficulty to put the layout and thanks for sharing it.

  • http://think360studio.com/ Think360studio

    Hello Everyone!!! I would like to say thanks to you all for the detailed description about the selectors. Because i thought that i know all the selectors but as per your description i was amazed to see all the selectors in your article.

  • http://www.lifesub.de Stefan Rynkowski

    Thank you for this amazing article! Very nice read and helpful ideas!

  • http://www.fionadarcy.ie Fiona

    Excellent article – thanks Joshua

  • http://blog.nguoiaolam.net Hong Hoa Vi

    Extremely useful. I have to translate it into Vietnamese and share with my friends.

    Tks a lot!

  • http://www.3dtuned.com Leon Amsterdam

    Wow, this was a very interesting article! thanks alot!

  • http://softwareconfidence.com Mike Hogan

    Thank you. Having this in one place motivated me to just “get it done”. It has helped a lot!

  • michael

    Great article with great resources. Howevers SMACSS is developed and written By Jonathan Snook.

  • goulniky

    I’ve used the BarelyFitz positioning page multiple times, very useful.
    I also built a little tool to experiment with different configurations, to immediately visualize the effect of positioning, that’s unpretentious http://goulnik.com/css/0.3/
    What I now do as the first CSS step after finalizing zoning is setting up the grid with appropriate positioning in a wireframe mode.

  • http://ivy.fm/ Abdullah Cetin CAVDAR

    As a software developer, CSS is always a hard topic for me. :) Thx for the post. I’ll follow your tips.

  • Joshua Johnson

    Thanks for the feedback everyone!

    Michael, I know it’s from Snook but Bradley’s piece was the best free intro I could find. Thanks for pointing it out though, I added Snook’s name just to prevent confusion.

  • http://www.websitetemplates.org/ Alex

    Thanks for the great round-up of resources because most of them are really top-notch and exactly what I’ve been looking for. It’s weird because I sorta know most of them but I just need some structure in my mind so that I know where to put it exactly. I have not read your posts so far but I looked through them (I promise, I’ll read all of them but a bit later) and I clearly see that they will help me to to a strong grasp of all the concepts highlighted. Again, thanks for the cool post, man. :)

  • kanenas

    you never stop learning

  • http://www.modred.co.uk Scott

    Good stuff… thanks for the info. Always good to learn new tips n tricks.

  • Jason

    I just discovered you today, but so far you’re two for two as far as I’m concerned and I’m definitely going to look through your archives for some more great pieces and look forward to more in the future!

  • Smith Falls

    Came across this CSS Selectors reference on Twitter:
    http://vogtjosh.com/selectors/

    Includes examples and browser support.

  • http://www.acreativespark.net Dave

    Great resource to make sure you’re not missing anything in your CSS knowledge foundation. Read all the links and took away some ah, ha’s. Thanks!

  • http://www.xipe-is.com Lilia

    You’ve got some great tips here. I personally recommend “HTML and CSS Web Standards” by Chirstopher Murphy and Nicklas Persson

    It covers the who whats and whys of CSS and how it all ties into html. For advanced stuff more research and resources are necessary, but to get the semantics, basics and to really understand them…. that book is the perfect start.

    Thanks for all the resources you are sharing!

  • http://www.dracos-promotions.com Rachel Heslin

    Thank you *so* much. I’m just starting to move out of the “don’t know what I don’t know so can’t ask” stage, and this gives an excellent structure for filling in the gaps for developing a foundational understanding.

  • http://kreativeko.com Menj

    thanks for this great collection of related article that could enhance my css skills.

  • http://jonathanmh.com Jonathan

    Nice job on summing this up, especially float and positioning are really great to know well for coding designs and not bloat the layout with too many subelements. The selector part is also pretty vital.
    I hope this encouraged some ambitious people!

  • http://timewarnercableprices.webs.com/ Rita Dawson

    I worked a lot to improve my CSS knowledge before few months. But I think it would have been easy if I had followed the steps that you have mentioned. I struggled a lot to learn the Dry Coding concepts. Wish I had seen this article before learning CSS. Anyways, Thanks for sharing such informative article. I will share this post with my friends who are learning CSS. I think this will help them a lot.

Subscribe
Membership
About the Author