CSS(Cascading Style Sheets) is a rule-based language. It's used to style and lay out pages by defining specific groups of styles that get applied to elements or groups of elements.
Many people find themselves learning CSS in conjunction with HTML. Both languages work in unison (CSS rules style HTML elements) but due to its various concepts, CSS can often be frustrating and get confusing.
If you are just starting out, learn the following CSS concepts to gain a strong foundation and understanding of the rule-based language.
Please note: The descriptions below are a brief overview of each concept. Read the recommended reading to get in-depth explanations of each CSS concept.
Cascading, Inheritance & Specificity
The first step to gaining a stronger understanding of CSS is to learn how these three concepts together control which CSS rule applies to what element.
Cascading
Cascade is the fundamental concept on how CSS was created. As the name suggests, Stylesheets cascade (top to bottom). This means that the order of CSS rules matter and when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.
Inheritance
Some CSS property values set on parent elements are inherited by their child elements, and some aren't. This can often be confusing but the principle behind it is actually designed to allow us to write fewer CSS rules.
Properties such as 'color' and 'font-family' are inherited which is why we often use the BODY element to assign them to.
It is also worth knowing that every CSS property accepts four values to control inheritance essentially being able to turn inheritance "on and off".
Specificity
As multiple rules apply to an element conflicting rules are sorted and applied by specificity. Each selector has a different specificity ranking which are:
- Id's
- Class and Pseudo Class's
- Element selectors
As rules conflict, CSS determines the rule with the highest specificity and applies it to the element.
Recommended Reading
- MDN's - Cascade and Inheritance
- Simmons - CSS Inheritance, Cascade, and Specificity
- Emma Bostian's - CSS Specificity
- Specificity Calculator
!important Declarations
The !important property in CSS overrides any specified rules and makes sure the rule denoted by !important is applied. Without understanding the three concepts above, it is easy to get into the habit of using !important on every property that doesn't get applied as expected.
However, it's important to understand that most developers consider the use of !important an anti-pattern. Read the articles recommended below to grasp a better understanding of when and how to use !important.
Recommended Reading
Media Queries
CSS Media Queries are used to change the style of your site depending on what screen resolution or device is being used.
Media Queries can be combined to create specific scenarios for when you want to apply certain rules to that situation. This created and allowed the concept of responsive and adaptive design to work coherently in the browser.
If you'd like to learn how to define, use and understand CSS Media Queries, check out the recommend reading below.
Recommended Reading
- Web.Dev's - Responsive Basics
- Udacity's - Responsive Web Design Fundamentals
- MDN's - Using Media Queries
- CSS Trick's - CSS Media Queries
Flexbox & Grid
Over the years it's become apparent that CSS isn't easy to grasp or master. Thankfully as the language has evolved, concepts like Flexbox and Grid have been introduced. They both offer a solution that makes positioning and page layout much easier, faster and responsive.
CSS Grid Layout is a two-dimensional layout system. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.
Flexbox layout is a direction based layout system. It gives you ability to alter its items’ width, height and order to best fill the available space.
Recommended Reading
- MDN's - Grids
- Grid Garden
- CSS Trick's - A Complete Guide to Flexbox
- FreeCodeCamps - How Flexbox Works
- Flexbox Froggy
Let Connect!
If you enjoyed this article or found it helpful lets stay connected. You can find me on Twitter sharing tips and code snippets @frontenddude