Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

9 comments

Fun with line-height!

The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It's a vital property for typographic control. Too …

“The Escalator”

Patrick Stirling of The Guardian shows off some new ads formats they are using. The first two look like they are just using some @media queries to shuffle things around and resize them. I wasn't able to find a live …

“Of” vs “On” the Web

Jeremy Keith attempts to make this distinction, using Angular and the concept of "enterprise" software as the catalyst.

"Of the web": Built of fundamental principles of the web. Universal access.

"On the web": The web as a delivery mechanism. The …

26 comments

Tour of a Performant and Responsive CSS Only Site

The following is a guest post by Rajoshi Ghosh and Tanmai Gopal of 34 Cross. They emailed me to show me their new website and how performant it was despite having cool features, being visually rich, and responsive. I

26 comments

The CSS at…

There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, …

Abusing CSS3’s nth-child selector to invent new ones

Matt Mastracci on combining existing positional selectors in interesting ways to create logic you might not have thought possible. For instance, select all elements only if there are five of them, with:

span:first-child:nth-last-child(5), span:first-child:nth-last-child(5) ~ span { /* select
38 comments

Strategies for Keeping CSS Specificity Low

Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren't fighting against yourself and you have plenty of room to override styles when …

30 comments

Thank You (2014 Edition)

Well-oh-well if it isn't that time of year again. Time to huddle around the virtual campfire, pass around a metaphorical jug of brandy, and bid farewell to another year. You know, that thing we do every year. (2007, …

Naming Things

Speaking of "naming things how you would name them", Paul Lloyd:

Regardless of higher-level conventions, there's no getting away from the fact that, at some point, we're still going to have to name things.

Then goes on to list a …

26 comments

CSS: Just Try and Do a Good Job

Have you ever worried that you're approaching CSS all wrong? That you're missing out on some new approach that makes everything easier and better? That you wish you were more confident about the state of your CSS?

I'm sure we …

20 comments

Positioning Offset Background Images

If you need to position a background-image in CSS 20px from the left and 10px from the top, that's easy. You can do background-position: 20px 10px;. But what if you wanted to position it 20px from the right and …

47 comments

Link in Header? Or Header in Link?

Eric Range wrote in with this blog post idea. Is it better to wrap a header tag in an anchor link, or the other way around? Assuming HTML5, both of these are completely valid. …

36 comments

How to Redirect a Web Page

The following is a guest post by Robin Rendle. I've always wanted a post here that rounds up the different ways to redirect a site. So I commissioned Robin to do it and he did a fine job!

Capability Reporting with Service Worker

We've heard 1,000 times: User Agent sniffing is bad news. We largely do it on the server because we want to know stuff about the client before we even send anything to the client. A worthy goal!

We've talked about …

More Elegant Fix for Jumping Scrollbar Issue

If you move from one page of a site without a scrollbar to another with a scrollbar, you'll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar.

A classic fix was html

9 comments

SMACSS-Press

The following is a guest post by Scott Fennell. Scott saw a recent post here on CSS-Tricks about class names in WordPress and had some of his own ideas about exerting control, rather than leaving things as they are.

Sponsor: Treehouse

Treehouse has been a long time sponsor here on CSS-Tricks. You know them. They do online training for web and mobile design and development. Here's a couple of things that I think are especially cool about Treehouse:

  • There are conference
16 comments

OS Specific Fonts in CSS

I'm not sure what the exact use case was, but Sam Stephenson recently asked me:

@chriscoyier What's the best way to reference the OS X system font in CSS (to get Lucida Grande or Helvetica, as appropriate)?

— Sam Stephenson …

WOFF2

I just learned that this is a thing. Sergej Müller has a really succinct page explaining what it is (it's an extra-compressed version of WOFF, the font file format) and how to use it.

And speaking of web type, check …

21 comments

Clipping and Masking in CSS

Both of these things are used to hide some parts of elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and …

4 comments

Watch Dogs

It's Blue Beanie Day! A day celebrating and showing support for web standards. I'm a little biased perhaps, since it's my field, but I believe the web is among the most important things human beings have ever done. For …

32 comments

What’s So Great About Bower?

The following is a guest post by Dan Sundy from Helios Design Labs. Dan is both going to explain how to use Bower and make a case for doing so, from the perspective of someone who resisted the idea

Creating Animations and Interactions with Physical Models

Ralph Thomas:

Physical models let us easily create rich animations and interactions that feel more natural by conforming to our innate expectations of how things should move and respond.

I think the days of .fadeOut() and .slideDown() are over.…

Sponsor: statico.io – front end optimization made easy

statico.io offers front end optimization as a service for web designers and developers. The service optimizes HTML, CSS, JavaScript, fonts, and images, with simple annotations like <link href="home.less?sio-css-embed=enabled&sio-css-uncss=enabled" rel="stylesheet">. It can also integrate with a CDN to deliver the …

73 comments

Sublime Text for Front End Developers

The following is a guest post by Wes Bos. Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out