A question you often ask as a beginner coder is how much is enough. How much of CSS should I know to feel confident with the language? This post is here to help by listing what I found to be the most important concepts to grasp in CSS.
Just in case you are right at the start of your coding journey, what I like to call the research phase, CSS is a language used to style web pages. It is used to define the look and feel of a website by changing the color, size, and layout of text, as well as the positioning of elements on the page.
Below is a list of the 10 (actually 11) most important CSS concepts a beginner needs to understand to be able to use CSS effectively. PS. I left my Most Important CSS Concept for last. Lets dive in!
1. The CSS Cascade
The CSS cascade is one of the most important concepts in CSS. The cascade simply means that the order of the style definitions matter when it comes to how they are applied to an element on the page. The first definition always takes precedence, and any definitions that follow will override any previously defined styles.
This is why it is important to always define your CSS in the correct order, and to use the most specific selector possible. If you don’t, you may end up with unwanted results.
I have written a more detailed article about what the “Cascade” in CSS means here
2. Inheritance
Inheritance is the way that CSS properties are passed down from parent to child elements. If a property is not specified on an element, it will inherit the value from its parent.
Inheritance is a great way to save time and keep your code organized, as you only need to specify the properties that are unique to each element. The properties that are inherited will automatically be applied to all child elements.
3. Specificity
Specificity is a way of determining which style takes precedence when two styles have the same weight. The specificity of a style is determined by the number of selectors in the style declaration, as well as the weight of each selector.
The selector with the highest specificity will always take precedence, regardless of the order in which they are written. This is why it is important to use the most specific selector possible, as it will have the highest specificity.
4. The CSS Box Model
The box model is a way of representing HTML elements as boxes. It determines how the content of an element is positioned and sized, as well as the space around it.
There are six properties that make up the box model: width, height, padding, borders, margin and content, you can learn more about the CSS box model here.
5. Margins, padding, and borders
Margins, padding, and borders are used to control the space around HTML elements.
Margins are the space between an element and its surrounding elements. Margins can be set in pixels, EMs, or percentages. The margin-left, margin-right, margin-top, and margin-bottom properties can be set to the same value or different values.
CSS padding is a way to add space between the content of an element and its border. This can be helpful for making sure text and other elements are evenly spaced, and it can also be used to create space between elements on a web page.
There are four different types of padding that can be used in CSS: top, bottom, left, and right. Each type has its own properties that can be customized to create the desired effect.
For example, if you want to add some space between the content of an element and its border on the right side, you would use the padding-right property. This would tell the browser to add a certain number of pixels of space between the element’s content and its border on the right-hand side.
Borders are the lines that appear around HTML elements. They can be used to create a frame around an element, or to add emphasis to it. There are three types of borders that can be used in CSS: solid, dashed, and dotted. Each type has its own set of properties that can be customized.
Its best that you understand the CSS Box Model before using these properties to avoid unwanted or confusing results.
6. Display
Display determines how an element is displayed on the screen. There are six different display options, and each one can be applied to any HTML element.
The six display options are: block, inline, list-item, table, inline-block, and none.
Each of these options has its own specific effect and will help you style your websites appropriately and differently.
For example, if you want to make an element appear as a block-level element, you would use the block display property. This would tell the browser to treat the element as a separate block on the page, and it would be positioned accordingly.
On the other hand, if you want to make an element appear as an inline element, you would use the inline display property. This would tell the browser to treat the element as a part of the text and be positioned accordingly.
Many different properties can be used with each of these display options, which gives you a lot of control over how your elements are displayed.
Each display property has its own unique set of properties that can be customized to create the desired effect. By understanding these properties, you can effectively control the layout and appearance of your web pages.
7. Float
Float is a property that allows you to move an element to the left or right of its containing element. It can be used to create layouts with multiple columns.
Two properties control the float of an element and set the direction of the float, which determines where in a container the element is placed. By adding a float property, you allow surrounding text to wrap around an element.
The float property can have one of three values: left, right, and none, below are examples of how each float property would render in the broswer.
You can see a visual example of this property here
8. Positioning
Positioning allows you to control the location of an element on the page. There are four different positioning methods: static, relative, absolute, and fixed.
Each position has its own set of properties that can be customized to achieve the desired effect.
Static positioning is the default method, and it simply means that the element is positioned according to the natural flow of the document.
Relative positioning allows you to move an element relative to its current location.
Absolute positioning allows you to move an element to a specific location on the page.
Fixed positioning allows you to move an element to a specific location on the page and keep it in place even when the user scrolls the page.
Positioning comes in very handy if you want to explore things that animation in CSS – yes, animation is possible in CSS.
The properties that can be customized for positioning include the element’s position, margin, and padding.
9. Media queries in CSS
Media queries allow you to specify different styles for different screen sizes and devices. You can use them to create layouts that look good on all devices or target specific devices with tailored styles.
You can learn more about how media queries work and device-specific breakpoints here.
10. CSS Grid systems
Grid systems should be points 10 and 11 as you can use two different grid systems in CSS, namely the CSS grid and Flexbox.
Grid systems are a great way to create responsive layouts, and Flexbox is a newer grid system that is even more versatile. By understanding both of these grid systems, you can create layouts that look good on all devices.
Flexbox was designed specifically for responsive layouts. It is more versatile than the CSS grid and can be used to create both flexible and responsive layouts.
Conclusion
CSS is a complex language, but by understanding these concepts, you will be able to create layouts that look great on all devices. These concepts are also essential for anyone who wants to become a front-end web developer.
Getting a solid understanding of the basics of any language will help you in your coding journey and make you more confident when learning other programming languages.
Click here to get our FREE CSS Properties Cheat Sheet for Beginners to help you on your coding journey!
Click Here to signup for our Discord – we can’t wait to meet you!
