As a front-end developer, writing CSS is my bread and butter and I love doing it. However, that doesn’t ring true for everyone. Some developers, especially back-end developers, scoff at the idea of it. To others, it might be a bit of a boogeyman under the bed. Let’s dive into what I consider to be the essentials. CSS is a powerful tool to have in your repertoire.
What is CSS?
CSS is an acronym that stands for “Cascading” Style Sheets. It’s a language we use to describe how HTML should be styled. With CSS, you can describe where elements are placed, what fonts they should use and which colours they should be, among other things.
Important CSS concepts
Before we get into actual CSS properties, there are a couple of core concepts that you need to understand:
Inheritance, specificity and the cascade
CSS is “cascading” because of the waterfall nature of how CSS rules apply. When it comes to deciding which CSS rules apply, the browser considers the following:
Inheritance
Some CSS rules, like fonts, are inherited down the HTML document tree. This allows us to save time and write cleaner style sheets, because we only have to define the document’s font once. Also, should we want to change certain aspects of the font like it’s weight or size, we can do that on elements down the tree, but they will keep the same base font family.
Specificity
CSS rules often conflict with one another. So when this happens, how do we know which rule will eventually apply? CSS selectors have different levels of importance (or specificity), and the most specific rule will be applied. The order of importance in CSS are:
- id selectors
- class and pseudo class selectors
- element selectors
The cascade
Finally, while CSS rules can conflict with each other from the same style sheet, CSS can also come from several different sources. These sources, by order of importance are:
- Inline styles, defined on an elment tag in the HTML document.
- Embedded styles, defined in the HTML document in a <style> tag.
- External styles, defined in .css files.
- User style sheets (Style sheets that end users have set up in their browser according to their preferences).
- User-agent style sheets / browser default style sheets.
The CSS cascade is an algorithm that brings all these different rules from different sources together and determines which rules should apply. Inline styles are the most likely to apply and user-agent styles, the least likely.
The box model
You can think of every HTML element on your page as existing within a little box. At the end of the day, your webpage is built out of all these little boxes stacking up next to and on top of each other.
Each of these boxes consist of 4 distinct parts. They are:
- Content – This is where your content appears (Text, images, anything you want to put into the box).
- Padding – Adds space around the content, but still within the box.
- Border – A border that goes around the padding and content.
- Margin – Adds space outside of the box.
The purpose of the box model is to allow us to modify the spacing between elements and to add borders to them.
The essential CSS properties
In CSS, selectors specify which HTML elements you want to style and properties indicate which styles to apply. There are a multitude of properties in CSS, but they aren’t all created equally. Some you’re going to use every single day and others you might never even hear about. The following properties are what I consider to be essential. One could probably write a blog post about each of the properties I’m about to mention, but for the purposes of this post I’ll keep it short!
Display
In HTML and CSS there are two main types of elements. Block elements and inline elements.
Think of block elements as paragraphs on a page. They stack on top of each other. If you set an element to display: block, other elements won’t try to fit alongside it. It will push those elements down below.
Inline elements, on the other hand, are like words in a sentence. You can have multiple display: inline elements in a row. As long as there is still space on the page to the right, they will sit neatly next to each other.
Using the display CSS property, you can choose if your element should act like a block or inline element, as well as the behaviour of its children.
Position
The position property controls how an element is positioned on your page. Below are some common position property values and what they do:
Static
Static is the default position value for HTML elements. Statically positioned elements aren’t positioned in any special way. The normal flow of the page determines their position. As a result, trying to change their top, right, bottom or left properties will not work.
Relative
When an element is relatively positioned, you can use the top, right, bottom or left properties to move the position of the element relative from its original position. However, the space that would have been occupied by the element on the page, will still be occupied as if it was in its original position.
However, the real power of relative positioning is this: You can add position: relative to an element and its child elements will use the parent elements’ bounds for positioning. See absolute positioning next for more details.
Absolute
An element with position: absolute is positioned relative to the nearest positioned ancestor. This also moves the element out of the normal flow of the body, meaning the space it would have taken up in the page can be occupied by other elements and it will sit on top of them.
This becomes powerful because you can add position: relative to a wrapper element and then have complete freedom over how you position absolute child elements inside of it using top, right, bottom or left properties.
Fixed
A fixed element will stay stuck to where it is on your screen no matter where you scroll on the page. You see this often on websites with social media sharing buttons that remain in place on the side of the screen while you scroll down, for instance.
Sticky
One of the newer kids on the block, position: sticky is a hybrid of relative and fixed positioning. An element that has its position set to sticky will act like a relatively positioned element until the user has reached its scroll position. After that point, the element will act like a fixed-position element and it will stick to the screen as you scroll down.
If these explanations are a bit hard to visualize, the w3schools page has some diagrams to better explain!
z-index
HTML elements can stack on top of each other like playing cards on a table. If you’d like some elements to overlap, the z-index property can help you to control the order of stacking, i.e which elements appear on top and which appear below.
z-index can be a bit tricky. For more reading, I’ve written an entire post on demistfying z-index here.
<Footer>
There you have my quick rundown of what I consider to be the most important CSS concepts (Inheritance, specificity, the cascade & the box model) and the essential CSS properties: display, position and z-index.
I hope that by reading this post you’ll have gained some confidence to take on CSS. Knowing and understanding the above concepts and properties might only be a start, but it should be a pretty solid foundation from which to learn more. A lot of other CSS properties like backgrounds, colours and fonts are a lot more straightforward and you should be able to pick it up fairly easily. Good luck!
