Skip to main content
CSS is fun and cool and I like it.
Article

The “C” in CSS: The Cascade

Following up from Geoff’s intro article on The Second "S" in CSS, let’s now move the spotlight to the "C" in CSS — what we call the Cascade. It’s where things start to get messy, and even confusing at times.… Read article

Article

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this:

html {
  font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}

What the heck, right? Why don't I just tell it what font I want to use and that's that? The whole idea here is fallbacks.… Read article

Article

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

Article

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:

body {
  background-color: red;
  background-image: url(pattern.png);
}
Read article
Article

CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don't talk a whole lot about is the sheet part of the language. So let's give that lonely second "S" a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.… Read article

Article

CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance:

.header {
  background-color: white;
  color: white;
}
Read article
Article

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

When you're starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don't matter for the CSS to work.… Read article

icon-link icon-logo-star icon-search icon-star