If you’re like me and have an interest in building software that not only works well, but looks nice and is easy to use, then no doubt you have looked into ways of styling your frontend.
There are a myriad of tools to help you style your applications easily and without much fuss. Frameworks like Bootstrap, Material, and Semantic are extremely useful when you’re getting a project off the ground, and offer quite a lot of customization. However, you may reach a point in time where you want more than what these frameworks can easily offer, or you may just want to learn what is happening under the hood of these tools. At that point, some level of understanding of CSS is going to be crucial.
It is my personal opinion that having a basic understanding of CSS can never hurt, and in time you may find you really enjoy writing custom styling. You may even decide you want to build your own framework similar to Bootstrap!
But I’m getting ahead of myself. For now here are a few helpful tips for people just diving into CSS.
Use a Reset
Every HTML element has default values associated with it. Creating a reset selector in your stylesheet wipes those default values, and helps whenever you're fine-tuning the positioning of elements with margin and padding.
To demonstrate, let’s create a new file titled index.html and a file named style.css . The HTML file will look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Sandbox</title>
</head>
<body>
<div class="header">
<h1 class="title">Title</h1>
<p class="description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur repellendus debitis necessitatibus fuga natus ut eos, recusandae consequuntur suscipit saepe.</p>
</div>
</body>
</html>Let’s view this file in the browser, and open up the dev tools. When we inspect the h1 we’ll see this in the styles section of our dev tools.
It is easy to see that the h1 has some level of inherent styling without diving into what each property is doing. If we inspected the p tag we would see very similar values.
I should say that there is nothing wrong with keeping these values, but they can be a source of frustration when your elements aren’t lining up just right later down the road. Usually, this happens when you’ve declared new margin and padding values for some elements, but not for others.
To minimize these headaches, let’s add our reset in style.css .
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}The * means we apply the following properties to all elements.
Now when we check the styles on our h1 element we will see:
Notice our reset is sitting above the default style?? This means the element is using those properties to style the element. We can fine-tune the margin and padding much easier now!
Note:
The box-sizing property is explicitly declared because it handles if the size of elements includes the border of the element or just the content. You can read the documentation on MDN for more information here.
Targeting Elements
Let’s talk about targeting HTML elements for a moment. When I first began learning CSS my HTML was a jumbled mess of ids and classes because I didn’t know how to target the exact element I wanted to style. With time, practice, and a few YouTube videos and Udemy courses I picked up better practices. Here are some helpful things to remember when targeting elements.
Let’s provide some additional styling to the h1 from our index.html file. I want to change the font, increase the font size, and add a little bit of margin to the top and bottom. I’m going to use pixels as the unit for this example.
The simplest way to add the style would be to select the h1 tag itself.
h1 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 60px;
margin: 20px 0;
}This will definitely work, but this will also apply to every other h1 that may exist in this document. While that may be a desirable situation for something like an h1 it isn’t difficult to imagine how messy only using tags as the selector.
Fortunately, we have ids and classes to target! Our h1 also has the class of title, so let’s target that.
.title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 60px;
margin: 20px 0;
}When you refresh the page you’ll see that our h1 still looks the same. Yay! Now, this styling will only work on an element with the title class.
We can also nest selectors in CSS. Our h1 lives inside a div with the class of header. The following styling will work the exact same as the one above. We are just specifying that we want to find a div with the class header and style an h1 with the class title with these properties.
.header .title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 60px;
margin: 20px 0;
}We could also target a direct child element look this:
.header > .title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 60px;
margin: 20px 0;
}In this case, both selectors would yield the same results, but in other instances, we may want to limit styling to that parent element while still using the .title somewhere else.
There are a lot more ways to use selectors. I highly recommend using the Mozilla docs as a reference. You can read more about selectors here.
Set Variables
Fun fact! Did you know that you can declare variables in your stylesheets? Well, you can! They are technically called custom properties, but you will hear them referred to as variables regularly. Either way, this is incredibly useful in keeping your stylesheet DRY and makes it easy to play around with color palettes.
Most of the time you will want variables available at the global scope, so put them inside the :root pseudoselector like so:
:root {
--primary-color: blue;
--secondary-color: orange;
}So when we want to change the color of our h1 tag, we can write this:
.header .title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 60px;
margin: 20px 0;
color: var(--primary-color);
}This makes it incredibly easy to maintain a single source of truth for important styles in your stylesheet. Imagine how many more elements might use the same value found in --primary-color . Now if we ever decide that we want to change the primary color we only have to do so in one spot instead of scouring our stylesheet.
As you continue your journey in frontend development you will no doubt become acquainted with some kind of CSS preprocessor/precompiler like Sass or Less that offers a lot of functionality like easy variable declaration, functions, partials, and a lot more. Using the custom properties is just an easy way to get comfortable before taking off the training wheels.
These only scratch the tip of the iceberg that is CSS and frontend design, but I do think these tips provide a nice basis to begin creating all your beautiful website!
