Read on Twitter
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
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:
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.
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
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
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 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:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
http://web.simmons.edu/~grabiner/comm244/weekfour/css-concepts.html
https://dev.to/emmabostian/css-specificity-1kca
https://specificity.keegan.st/
2/2
Recommended Reading:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
http://web.simmons.edu/~grabiner/comm244/weekfour/css-concepts.html
https://dev.to/emmabostian/css-specificity-1kca
https://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
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
https://uxengineer.com/css-specificity-avoid-important-css/
https://css-tricks.com/when-using-important-is-the-right-choice/
2/2
Recommended Reading
https://uxengineer.com/css-specificity-avoid-important-css/
https://css-tricks.com/when-using-important-is-the-right-choice/
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
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
https://web.dev/responsive-web-design-basics/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://css-tricks.com/css-media-queries/
2/2
Recommended Reading
https://web.dev/responsive-web-design-basics/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://css-tricks.com/css-media-queries/
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
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
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
https://cssgridgarden.com/
2/3
Recommended Reading
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
https://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
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35/
3/3
Recommended Reading
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.freecodecamp.org/news/an-animated-guide-to-flexbox-d280cf6afc35/
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 :)
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 :)
