This is the CSS Basics section of Impressive Webs. The articles in this section will cover basic topics for CSS beginners. To get updates of new posts in this section, you can subscribe via RSS or get an email notification whenever a new post is added. You can also subscribe to the main feed and email notifications using the links in the sidebar.
The other day, someone asked me the following question: “If I understand it right clear float is automatic in most modern browsers right?”
If you’re new to CSS, then it would seem that the answer to this question should be “yes, of course — modern browsers don’t have these types of bugs!” But the necessity to clear floats is not a browser bug; it’s actually, well, more of a CSS feature. And it’s still needed in so-called “modern” browsers (assuming you’re using floats for layout).
While I usually try to write stuff that’s geared more to experienced developers, I don’t want to neglect those who are just starting out.
I’ve been collecting links to beginners resources for web development for some time now, so I thought I’d share that list here. Feel free to add your own in the comments.
There’s a ton of information floating around on preprocessors nowadays. Most of that info is geared towards Mac users, so in this post I’m providing a very simple guide to help Windows-based developers get up and running quickly with Sass (my preprocessor of choice).
Overall, Sass is not difficult at all to get set up, even if you’re doing it on the command-line. But if you have no interest in going through all these steps, but still want to use Sass on Windows, well, just skip to the final heading in this post for a reference to an app that lets you start using Sass on Windows with minimal setup.
Even if you’re just getting started with CSS, you’ve likely used the height and width properties quite a bit already.
But you’ve probably noticed that those properties can put unnecessary constraints on your page elements. So you might benefit from knowing and using related properties that use the “min” and “max” prefixes.
If you’re just getting started with CSS, it’s good to have a fundamental understanding of what we mean when we refer to CSS selectors. In this post I’ll briefly describe all the most well-known CSS selectors along with some examples.
Shorthand declarations can be tricky to master. In this post, I go through the basics of shorthand, and offer some suggestions for avoiding certain gotchas.
A simple post describing a couple of ways to indicate “current page” in your navigation using CSS.
When applying CSS styles to an element in your HTML, you’ll be using different CSS selectors to target your elements.
Two of the most common selectors used in CSS are the “class” selector and the “ID” selector. There are many others, but this post will focus on these two, and I’ll describe the difference so you’ll know the potential effects of using either of these selectors.
For the purpose of CSS styling, elements can be generally divided into a few different categories. Two of those categories are block-level elements and inline elements.
In my opinion, this is one of those areas that, once understood correctly, can help beginners to take their CSS skills to the next level.
Positioning elements absolutely is a useful technique to be aware of. When used selectively, it can offer many more options for what might otherwise be troublesome layout options. Here I’ll discuss the basics, with some tips for use.