My girlfriend's guide to coding - Day 5: CSS Basics
Daily bite-size tutorials for my girlfriend who want's to learn how to code!
Hey Girlfriend! So you want to learn how to code? I got you.
I know you are super busy, so I've designed these tutorials to be super bitesize. It should take no more than 15 minutes of your time to read through and try out an exercise.
Stick to it and with consistency, you'll be writing code in no time
- Your BF
Overview
Last time, we learnt how to make your HTML more professional by using proper document structure. You refactored your code into a clean index.html with a neat <head> and <body>, and even gave your tab a custom title!
Today, we’re going to take things one step further by cleaning up your CSS (the properties inside your style attribute). Why? Because it allows you to reuse the same settings on different containers, thereby making your code neater and cleaner~
By the end of today, you'll be able to answer:
- Why use CSS?
- What is CSS
- How to set up CSS
- What are CSS behaviours
Why use CSS?
CSS stands for Cascading Style Sheets. It's a language used to style your HTML. It looks something like this:
You’ve actually already used CSS before! When you write code inside the style attribute in a <div>, you're writing CSS!
However, inline CSS (writing styles inside each tag) can get messy really fast, especially if you start working on complex projects. Look at this example:
```
<div style="background-color: lightblue; padding: 20px; margin: 10px; border-radius: 5px; font-family: Arial, sans-serif; font-size: 18px; line-height: 1.5; color: darkblue; text-align: center;">
<h2 style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">About Me</h2>
<p style="margin: 0;">I'm learning to code! I love coffee, late-night debugging, and clean indentation.</p>
</div>
```Ewwwww.
Everything is all jumbled up together, and it's not very nice to read. Let’s solve this problem by moving those styles into a separate .css file instead.
What is CSS
CSS is a reference sheet that the browser looks at when decorating your website. Let's say you want every single div in your HTML document to have a green background and a 5 pixel margin, doing it manually looks like:
```
<div style="background-color: green; margin: 5px">Box 1</div>
<div style="background-color: green; margin: 5px">Box 2</div>
<div style="background-color: green; margin: 5px">Box 3</div>
<div style="background-color: green; margin: 5px">Box 4</div>
```Imagine if you had to do that for 100, or even 1000 div containers. That would be a nightmare! Worse, what if you wanted to change the colour to purple? You'll have to change all containers line by line!
But with CSS, we can achieve the same goal with less writing. Like this:
```
div {
background-color: green;
margin: 5px;
}
```
You no longer need to add the style attribute to your div tags because now, whenever there is a div, your computer can look at the CSS file and figure out how to style this element.
But Remus, where do I put my CSS?! Is it in another file?! How does my computer "know" where to find my CSS file?!
Great questions! Look at you, you're thinking like a programmer already. Let's do a quick walk-through on how to set up your CSS file and link it to your HTML document.
How to set up CSS
Open your "Coding with Remus" folder in Cursor
In the left file tab, create two new files called
styles.cssandcss-practice.htmlIn your
css-practice.htmlfile, create the boilerplate HTML code by typing!and pressingenter. If you've forgotten how to do this, check out last week's tutorial.In the HTML file, add 4
<div>containers inside the<body>tag like this:``` <body> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4</div> </body> ```In your
styles.css, write this down and save the file:``` div { background-color: green; margin: 5px; } ```
Nice! You've set up your two files, now let's connect them to see your styling show up!
In your <head> section, add this: <link href="styles.css" rel="stylesheet"> (I will explain what this is later.) Your HTML file should now look like this:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Practice</title>
<link href="styles.css" rel="stylesheet"">
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
</body>
</html>
```Now save your file and open your HTML document using your browser. You should see that all your div containers are green with a 5 pixel margin!
What is <link href="styles.css" rel="stylesheet">
The <link> tag is used to connect external files to your HTML document. In our case, we’re using it to connect a CSS stylesheet.
The href attribute stands for hypertext reference, which is just a fancy way of telling the computer: "Here's the location of the file I want to link to." In our case, it's pointing to the file styles.css which contains our CSS code.
The rel attribute stands for "relationship" (hehe us?) because you need to tell the browser what the file you're referencing is. In this case, we are telling the computer that this file we are referencing is a `stylesheet`, which is what CSS files are called.
What are CSS behaviours
Using the class attribute in CSS
We now know how to change all the colours of all the <div> containers with CSS, but what if we want more fine-grained control over our styling? Like, what if I want even-numbered boxes to be yellow and odd-numbered boxes to be pink?
Well, we can do that using the class attribute!
In your css-practice.html, you can add a custom name to a <div> using the class attribute.
```
<div class="odd-box">Box 1</div>
<div class="even-box">Box 2</div>
<div class="odd-box">Box 3</div>
<div class="even-box">Box 4</div>
```Now, delete the old CSS class for your div. Then create styling for the class you create in your CSS file! You reference a class by adding a period followed by the name of your class, like so:
```
div {
background-color: green;
margin: 5px;
}
.odd-box {
background-color: pink;
margin: 5px;
}
.even-box {
background-color: yellow;
margin: 5px;
}
```
CSS Specificity
Before we move on to our exercise, a bit of housekeeping. You are probably wondering what happens if we write this in your CSS:
```
div {
background-color: green;
margin: 5px;
}
.odd-box {
background-color: pink;
}
```And then in your HTML:
```
<div class="odd-box">Box 1</div>
<div class="even-box">Box 2</div>
<div class="odd-box">Box 3</div>
<div class="even-box">Box 4</div>
```Pay attention to a couple of things:
We do not have a
.even-boxstyle in CSSdivstyle declares a 5 px margin
So… what would the page look like?
It's a bit confusing, I know, but let me explain.
The browser sees that all of these elements are <div> containers, so by default, it applies the green background and the 5 pixel margin to every <div>. However, for the containers with the class: odd-box, you’ve told the browser: “Actually, use a pink background instead.”
So Box 1 and Box 3 get a pink background (because .odd-box overrides the green), while Box 2 and Box 4 still use the default green from the general div rule. All of them still get a 5 pixel margin because the .odd-box class didn’t change or override that part.
This is an example of how CSS specificity works. When there are multiple rules that apply to the same element, the browser follows the more specific one. A class like .odd-box is more specific than just saying div, so it takes priority.
You’ll see this behaviour come up a lot in CSS, so knowing how it works gives you much more control over your designs.
Subscribe to follow along!
I’m dropping tutorials every week, subscribe to follow this newsletter and learn how to code :D
Exercise
Your mission today is to refactor the HTML page you made last lesson. That means: take all the style="..." code that lives inside your HTML tags, and move it into a separate .css file.
Start by duplicating your index.html file and renaming the copy to index-reference.html. This lets you use it as a visual guide while you refactor the original file.
Next, create a new file called styles.css in the same folder. Open your index.html from last week and, instead of using inline styles like this:
```
<div style="background-color: pink; padding: 20px;">Hello</div>
```Replace it with a class, like this:
```
<div class="pink-box">Hello</div>
```Then, in your styles.css, define the class:
```
.pink-box {
background-color: pink;
padding: 20px;
}
```Do this for every element that had styles inside the tag. If multiple elements share the same styles, reuse the same class name to keep things DRY (Don’t Repeat Yourself).
Finally, don’t forget to link your CSS file inside the <head> of your HTML:
```
<link href="styles.css" rel="stylesheet" />
```Once done, open your HTML file in the browser, everything should look exactly the same, but your code will be way cleaner.
Next time
So far, you've mastered how to write clean HTML, move your styles into a separate CSS file, and use class selectors to style different parts of your page. Incredible job!
Next time, we’re going to learn how to line things up properly using something called Flexbox. Imagine you have a row of boxes and you want them spaced out nicely, centred on the page, or even stacked vertically in just the right way. Flexbox gives you that power without having to write tons of code.
Get excited! Flexbox is one of the most useful tools in CSS and will make your websites look sooo much more polished.
.
.
.
Written with love,
Your Boyfriend <3
Got Questions?
Leave a comment and someone else or I (it’ll probably be me) will help you out :)
Subscribe to follow along!
I’m dropping tutorials every week, subscribe to follow this newsletter and learn how to code :D