Learn the basics of CSS and understand how and why things are styled the way they are
While most companies are using CSS frameworks, as this a convenient way for websites to look great and responsive in just a few lines of code, I do believe that it is important for developers to understand some basics of pure CSS. It’s amazing to have so many different libraries to choose from and have code abstracted away for us, however it is also a great skill to understand what is happening under the hood, so that we have the ability to manipulate and control specific elements if we wanted to do so.
Cascading Style Sheets, also known as CSS is a language that is used to paint elements of a page with colors, features, positioning and more by targeting specific HTML elements. There is specific syntax for CSS, which we will go over below.
The CSS declaration is broken down into a few different parts. We first start off with a selector, which is a specific element that we want to target and style. In the example above, we are specifically targeting the <h1> element. We then create a declaration block by using an opening and closing curly bracket on each side. Each declaration consists of a property, followed by a value and colon that separates the two. The above example shows color as a property and blue as the value.
This will in turn make our <h1> element text blue. We can also add more properties and values within the declaration block. This will just need to be separated by a semicolon, so the above example also shows that we want the element to have a font size of 12 pixels.
There are so many different properties and values to choose from, which is the beauty and fun of styling. Now that you understand the syntax, you can explore and play around with different properties, such as a having a different border, changing the position of an element or transparency of an image!
Now that we know the very basics of CSS and selecting elements, we will move onto specificity. This concept is important as your CSS file will be read in a cascading manner, so essentially from top to bottom. What that means is that unless a specific element holds more value than the next, your most recent styling will apply. This can sometimes get confusing if we do not understand how much value a class or ID may hold when assigning them to elements.
Let’s start with inline styles, which is the highest in specificity. While this may not be as common, as it is best practice to follow the separation of concerns, inline styes do rank the highest with a value of 1000.
Anything written inline with HTML will take precedence over a class or ID.
Next up are ID selectors, which can only be applied to one element and must be unique. We use IDs to specify one specific element. An element can have one ID and the ID can only be used once within an HTML document. IDs have a value of 100.
The above example shows how to give an element an ID. We can then target that ID in our CSS with ‘#’, followed by the name of the ID we gave the element.
Classes, attributes and pseudo-classes come after IDs and have a weight of 10. Unlike IDs, we can give different elements the same class. This will allow us to target multiple elements and give the same styling.
In the above example, we have two different lists, but given the same class, we can target them both at once and give them the same styling.
Last on the specificity list are elements and pseudo-elements which have a value of 1. So going back to our declaration example in the beginning, we had a selector of h1. If there was anything that was conflicting, say the h1 was nested within a div and had a class that styled differently, then the class would rule out the h1 styling.
Testing It Out
Alright, now that we understand that there is a hierarchy and that different selectors have various weights, let’s put our knowledge into practice! We can take the above code example of our list and try to target it with CSS below by having more than one selector to be more specific. Of the two blocks of code, what color do you think our list will turn out to be?
If you guessed purple, you are correct! The reason for this is because we targeted this by using the class of “list” followed by an element. Based on specificity points, this would be 10 points for the class and 1 point for the element, which gives us a total of 11 points. If we compare this to the next line of code, we are targeting our list with two element selectors, which gives us only 2 points, thus making our list purple, instead of yellow despite the code coming after.
Now let’s change the code up a bit and give both of these selectors the same weight. Based on this example, what color should our list be now?
If you guessed yellow, that is the correct answer. Since the selectors have the same weight, but conflicting style colors, the ladder will be styled as it is further down the document.
Now that you understand how specificity works, hopefully you can better understand why elements are styled a specific way. You can use these skills you learned to target or override other elements now, even with combining code from CSS libraries!
The examples in this post were of course very basic, however, if you apply the same rules in your projects, you’ll be able to target and style like a pro. The best way to better understand CSS is to practice and just play around through trial and error. The more you do it, the better you’ll be at it, creating beautiful masterpieces along the way.