Fundamental CSS concepts to learn as a beginner

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML.CSS describes how elements should be rendered on screen and other media.

At first glance, CSS might seem overwhelming and frustrating to a beginner. But with learning, you will realize that it is very easy to use CSS properties.

There are many CSS properties that you can use: too many to learn them all the right way or even to remember or understand how they work.

Here are all the core CSS fundamentals you must learn as a beginner:

1. Learn general properties

• Font properties

• Text properties

• Color properties

• Linking CSS file: Inline, external and internal.

2. Positioning

• Static

• Relative

• Absolute

• Sticky

• Fixed

3. Box Model

• Border

• Margin

• Padding

• Box sizing

  Learn to use the shorthand of these properties.

4. Layouts: Flex-box and Grid

Understanding these two layouts are very important. Learn how these layouts work and which properties are implemented on parent and child elements.

5. Responsive units

• rem

• em

• max-width and min-width

• viewport-height and viewport-width

• percentage unit

6. Selectors, grouping selectors and combinators

Selectors

• Universal selector

• Type selector

• class selector

• id selector

• Attribute selector

• Grouping selectors

  Combinators

• Descendant combinator

• Child combinator

• general sibling combinator

• Adjacent sibling combinator

7. Pseudo-elements and classess

• ::After & ::Before

• : active

• : hover

• : nth-child

  Explore more on your own...

8. Centering using:

• margin

• Flexbox

• Grid

• Transform and translate

9. Inheritance

Which properties are inherited from the parent and which are not?

10. Display and visibility

Learn how to hide elements using these.

11. Z-index

The z-index property specifies the stack order of an element.

12. Transition

CSS transitions provide a way to control animation speed when changing CSS properties.

13. Animation

CSS animation is a feature of CSS that allows you to animate a change in one or more style properties of an element, as well as control various aspects of the animation.

14. Specificity

• Specificity determines, which CSS rule is applied by the browsers.

• Specificity is usually the reason why your CSS rules don’t apply to some elements, although you think they should.

15. Background and Background-image

Most of the time we use a background image on the different sections of a website.

Learn how to use backgrounds.

16. Media-queries

Media queries make the website responsive and allow you to apply CSS styles depending on a user’s device, browser or system settings.

17. Transform

The transform CSS property lets you rotate, scale, skew, or translate an element.

Conclusion:

So these are all the fundamental concepts that you must learn in CSS as a beginner. Having a core understanding of these concepts is necessary.

Thanks for reading!!
Follow me for getting more useful articles on Frontend Development.
If you have any question or doubts, you can comment below 👇👇👇

Keep learning!! 😀