Thread by @frontenddude

Important CSS Concepts To Learn 🧵 🔽

CSS is used to layout & style pages by defining groups of styles that are applied to elements.

If you are just starting out, learn the following concepts to gain a strong foundation & understanding of the language.

#CSS #CodeNewbies

The explanations below are a brief overview of each concept. Read the recommended articles to get in-depth explanations of each concept.

The first step to gaining a stronger understanding of CSS is to learn how Cascading, Inheritance & Specificity control how rules are applied:

Cascading

Cascade is the fundamental concept of how CSS was created. As the name suggests, Stylesheets cascade. 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, some aren't. This can often be confusing but the principle behind it is actually designed to allow us to write fewer CSS rules.

1/2

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".

2/2

Specificity

As multiple rules apply to an element conflicting rules are sorted and applied by specificity. Each selector has a different specificity ranking:

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

1/2

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

Recommended Reading:

developer.mozilla.org/en-US/docs/Lea…

web.simmons.edu/~grabiner/comm…

dev.to/emmabostian/cs…

specificity.keegan.st

2/2

!important Declarations

The !important property overrides any specified rules & makes sure the rule denoted is applied. Without understanding the 3 concepts above, it is easy to get into the habit of using !important on every property that doesn't get applied as expected.

1/2

However, it's important to understand that most developers consider the use of !important an anti-pattern. Read the articles below to grasp a better understanding of when and how to use !important.

Recommended Reading

uxengineer.com/css-specificit…

css-tricks.com/when-using-imp…

2/2

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.

1/2

This allowed for the concept of responsive & adaptive design to work coherently in the browser. Learn how to define, use & understand Media Queries, check out the articles below.

Recommended Reading

web.dev/responsive-web…

developer.mozilla.org/en-US/docs/Web…

css-tricks.com/css-media-quer…

2/2

Flexbox & Grid

Over the years it's become apparent that CSS isn't easy to grasp.

Thankfully as the language has evolved, concepts like Flexbox and Grid have been introduced. They both offer a solution that makes positioning & page layout much easier, faster & responsive.

1/3

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.

Recommended Reading

developer.mozilla.org/en-US/docs/Lea…

cssgridgarden.com

2/3

Flexbox is a direction based layout system. It gives you the ability to alter its items’ width, height and order to best fill the available space.

Recommended Reading

css-tricks.com/snippets/css/a…

freecodecamp.org/news/an-animat…

3/3

Thanks for reading!

If you found the content of this thread helpful please consider retweeting so others can benefit too.

If you are new, welcome and consider following me so you can keep up to date with all my latest content :)

✌️ 💙