Skip to main content
Guide Collection

Just Starting Out with CSS & HTML

Just getting started as a front-end developer? Awesome. CSS & HTML are the foundation of building all websites. We have some stuff here that might be useful to you. These are our recommendations.

Monthly Sponsor
Thanks, monday!
Video

#58: HTML & CSS – The VERY Basics

This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser […]

Article

Beginner Concepts: How CSS Selectors Work

Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let’s not think about style right now though, let’s just focus on the selecting.

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 […]

Article

The Difference Between ID and Class

We need ways to describe content in an HTML/XHTML document. The basic elements like h1, p, and ul will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and classes.

Article

The Moment CSS Started Making “Sense”

It was way back in 2008 that Chris shared his “Ah-ha!” moment when working with CSS. You know, that metaphorical lightbulb that ignites when you go from not knowing what the heck CSS is to suddenly having a baseline for understanding how it works.

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; }

Article

Helping a Beginner Understand Getting a Website Live

I got a great email from a fellow named Josh Long the other day. He is, in his words, “relatively new to web design” and was a bit stuck on the concept of getting a site live. I should say that I’m happy to get emails like this an I always read them, but I […]

Article

The Snowballing of Practice

I really want to be a better musician. Someday, I will be. I know what it takes: practice. I want to get really good. I want people to hear me play and say to themselves “hey that guy really knows how to play.” I want to be able to sit down with other musicians and […]

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.

Article

The CSS Box Model

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We’ve talked about the positioning of these boxes a bit, and about their behavior. What we haven’t […]

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 […]

Article

CSS is to HTML as a CMS is to… HTML

From the desk of important beginner concepts: You have a website with 100 pages on it. All 100 pages use the same style.css file. You’d like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be reflected across all 100 pages. […]

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); }

Article

Working with Shapes in Web Design

When we make a new component on a website, we’re effectively creating rectangles of different sizes, whether we realise it or not. But what happens if we want to experiment a little? How many different ways are there to make shapes? In this post I want to roughly outline some of the most common ways […]

Article

Web Nerd Terminology (Explained)

As happens with any weird niche societal group, us web nerds have developed some language of our own. Some of this language is perfectly acceptable English, but still sounds weird to an outsider. I thought I’d throw together a list of these words and attempt to explain them in plain English as a reference for […]

Article

Web Technologies Hanging Out Together

As a beginner, understanding how the different languages you learn interact with each other can be confusing. I thought we could pair up a variety of languages to see where they intersect and communicate.

Article

Specifics on CSS Specificity

This article was originally published on August 11, 2008. I am updating it now to fix some inaccuracies in how this concept was presented. I’ve never specifically covered this subject before. (rimshot!) The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you […]

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