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:

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.

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.

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


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

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

Recommended Reading:………

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

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……

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 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………

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.

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…

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……

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 :)

✌️ 💙

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with FrontEnd Dude | JavaScript

FrontEnd Dude | JavaScript Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @frontenddude

16 Mar
🛠️ 8 useful tools I use for faster and easier Web Development.

A thread 🧵 🔽

#CodeNewbies #WebDevelopment #tools

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more when shared.…

Toptal's web developer checklist helps you keep on top of various important things that are easy to forget.

Covering various subjects like mobile and SEO it's a great checklist to have when developing a new site.
Read 9 tweets
4 Jan
As developers, we spend a lot of time sitting at our desks.

Good sitting posture improves blood flow, keeps your nerves & blood vessels healthy, & supports your muscles, ligaments & tendons.

🧵 Try out these tips to get you sitting correctly at your desk:
🖥️ Monitors

The top of your screens should be at or just below eye level.

Tilting the monitor back 10° to 20°, our eyes should look slightly downward when viewing the middle of the screen to promote a healthy sitting position.
🤷‍♂️ Shoulders

Your shoulders should be relaxed and positioned low.

Try to be aware of them rising towards your ears or rounding forward throughout the working day.

Doing so will also ensure you maintain contact between your back and the seat.
Read 7 tweets
16 Aug 20
Learn CSS Grid for #FREE thread 🧵

Want to learn CSS Grid for free but not sure where to start?
I've compiled a list of free resources that covers:

📖Complete Guides
📝Tutorials & Examples


#100DaysOfCode #CodeNewbie #CSS #CSSgrid
Complete Guides [1/2]

@css Complete guide to Grid -…

@codrops CSS Grid reference…

Learn CSS Grid by @jonsuh -

CSSGarden -
Read 8 tweets
15 Jul 20
The Ultimate JavaScript Free Resources Thread 🧵

Want to learn #JavaScript for free but not sure where to start? I've compiled a list of free resources that covers:

📘 Books
🖥️ Websites
📝 Free Courses
🎥 Youtube Channels


#100DaysOfCode #CodeNewbie #Frontend #webdev
📘 Books 1/2

Search Google for any of these #free books, they will show as one of the top results.

Download or read them online, they will provide you with a deep understanding of JavaScript.

- Eloquent JavaScript
- You Dont Know Js
- Learning JavaScript Design Patterns
📘 Books 2/2

- Speaking JavaScript
- JavaScript: The Good Parts
- JavaScript For Cats
- DOM Enlightenment
- Understanding ECMAScript 6
- Human JavaScript
- Flavio Copes JS Handbook

#javascript #CodeNewbies #books #100DaysOfCode
Read 14 tweets
9 Jul 20
🧵Design Tips for Developers 🧵

With so much to learn, design is easy to neglect but learning a few basic design principles is a great investment for any developer.

Apply the following to your own projects to make a huge visual difference 👇

#100daysofcode #CodeNewbies #webdev

Keep it simple. Color should be used sparingly to highlight important information and CTAs.

For the rest of your site, use a color generator. They follow WCA Guidelines and provide thousands of beautiful color schemes to choose from.

Keep fonts legible and appropriate for the style of communication. Sometimes using a combo of two sans-serif system fonts is enough, improves loading times and removes the hassle of importing fonts.

For everything else, Google Fonts has you covered!
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!