Just Enough CSS
Today, we break free from the confines of the browser’s default styles and bend the internet to our will with Cascading Style Sheets!
To avoid long-winded explanations, I’ve made you a little starter project that includes the two files you’ll need to get going this week. I encourage you to type yourself, but if you need a reference or, like me, are very, very lazy, here you go.
Making the connection
Take a peek at the starter files. It’s pretty simple – one index.html file and one style.css. Two meaningful connections are happening here:
We’re connecting the CSS file to our HTML document with this line:
<link rel="stylesheet" href="/style.css" />We’re connecting our style declarations to our HTML elements. In our starter files, you can see the
bodytag:<body> ... </body>Which corresponds to the body tag in our CSS file:
body { font-family: sans-serif; }
It’s the same body, but the syntax is quite different. Why? Because these two languages have very different jobs. HTML is about describing structure, whereas CSS is about defining how something looks. If you need a refresher on HTML, check out Just Enough HTML. Let’s break down this CSS line by line.
body {☝️ Here, we’re telling the browser to look for the body tag. Everything after the curly brace is how we want it to look. This “opens the style block” for body.
font-family: sans-serif; ☝️ This is a declaration or a key/value pair. The key and the value are defined in the CSS language, which is great because you can look them up. Here we’re telling the browser that we want the body to use a sans-serif font. Two things to call out here:
The key is on the left side of the colon (:), and the value is on the right.
The semicolon (;) ends the declaration. If you forget that, you’re going to have a bad time.
}☝️ This lone squiggly closes the block.
Targeting other elements
As you might imagine, just as you can target the body, you can target any HTML tag with CSS. For instance, you might want all h1 tags to be big and red…
h1 {
font-size: 36px;
color: red;
}This is great stuff, but you’ll quickly reach the limitations of only being able to target elements. You’re going to want to, you know, make different things different. Fortunately for us, the people who made these fantastic languages built a solution for us – classes.
You’ve got class
In HTML, nearly any element can have an attribute called “class” that can take pretty much any word you want as a value. Let’s say we wanted to make some blue text to match our brand. Obviously, we don’t want all the text to be blue. That would be weird. Let’s make a class. In your CSS file type:
.text-blue {
color: #3662e3;
}And then in your HTML file type:
<p class="text-blue">Design With Code</p>And just like that – blue text. If you didn’t see a change, make sure you saved both files. Our second connection is happening here. Can you notice it? Don’t feel bad if you can’t; it’s pretty subtle. A couple of things worth taking notice of:
There’s a period in front of
text-blue. That little dot means “class” in CSS.Predictably, there’s a new attribute on our
pelement called “class.”
So, where’s the connection? Well, that happens in the browser when your page loads. First, it reads your HTML, then your CSS, and applies all the styles you described. Pretty neat!
So, what if we wanted to make our text blue and big? If you guessed, make another class – congratulations, you’re a genius. In your CSS file:
.text-large {
font-size: 72px;
}Then apply our newly minted class to our p tag in our HTML file, thusly:
<p class="text-blue text-large">Design With Code</p>Notice that one element can have multiple classes simply by separating them with a space. Now, you have two classes that you can mix together. Try making some new elements in your HTML file. Make some blue and some big. Play around – it’s the best way to learn! Maybe you can try to make something? Like a page about yourself or your favorite hobby.
We’ll be digging into topics like layout with flexbox and grid, responsive design, and more later in the series but for now, check out CSS Reference for a friendly way to see what you can do with CSS with helpful examples.
Don’t forget to join us in Slack and if you’re enjoying DWC, please share it far and wide. I’d appreciate the boost!