DEV Community

Cover image for Important CSS Concepts To Learn.
Frontend Dude πŸ‘¨β€πŸ’»
Frontend Dude πŸ‘¨β€πŸ’»

Posted on

Important CSS Concepts To Learn.

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:

  1. Id's
  2. Class and Pseudo Class's
  3. Element selectors

As rules conflict, CSS determines the rule with the highest specificity and applies it to the element.

Recommended Reading

!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

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

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

Top comments (9)

Collapse
 
victorandcode profile image
Victor Cordova

Thanks for the article. I definitely agree with the fact that these topics are fundamentals for working with CSS. I would add perhaps also the box model given that it's a very easy to visualize mental model to understand things like paddings, margins, widths and heights.

Collapse
 
frontenddude profile image
Frontend Dude πŸ‘¨β€πŸ’»

Great point Victor! Absolutely agree with the box model also being a fundamental part of CSS. Thanks for your input.

Collapse
 
bayuangora profile image
Bayu Angora

Avoid !important is really important.

Collapse
 
cometsong profile image
Benjamin Leopold

I love the ironic irony.

Collapse
 
jwp profile image
John Peters

Doesn't the grid make media queries obsolete?

Collapse
 
maxart2501 profile image
Massimo Artizzu

No, you might want to rearrange the areas differently depending on the resolution.
I mean, differently from what auto-placement usually does.

Collapse
 
jwp profile image
John Peters

Ok I get it, a really small screen may want a stacked view (which grid does automatically) but, one may want the stack rearranged in some way...

Collapse
 
frontenddude profile image
Frontend Dude πŸ‘¨β€πŸ’»

Sort of, we can build responsive layouts with grid but we can define further fixes using media queries if required.

Collapse
 
anitajoseph profile image
Anita Joseph

Thanks for this article. It contrains Very useful technical hintsπŸ˜ŠπŸ‘