How to Approach CSS as a Beginner
When people learn CSS they often focus on Selectors and Styles. They are important but don’t spend too much time on them! Know they exist, know what they do, bookmark your favorite reference site then move on to understanding CSS as a system.
A key part of the CSS system is that Selectors and Styles cascade. Cascading means that Selectors can select the same element and merge or overwrite Styles. So your style sheet might overwrite someone else’s styling… and someone else (maybe even yourself!) might overwrite your styling.
Where do these other style sheets come from? For starters, your web browser provides a default style sheet called the User Agent Style Sheet. This default style sheet is different for every browser. For example, if you write this style block:
button { color:red; }Then look at the styling in the browser, you will see something like this:
button {
color: red;
appearance: button;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(buttontext, rgb(170, 170, 170));
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
background-color: -internal-light-dark(rgb(239, 239, 239), rgb(74, 74, 74));
box-sizing: border-box;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
border-image: initial;
}All that extra styling comes from the browser’s User Agent Style Sheet. The User Agent Style Sheet can make it tricky to tell what your CSS is doing versus what the User Agent Style Sheet is doing. One way around this, especially while learning, is to cancel out the User Agent Style Sheet by using a CSS Reset. A reset is CSS that sets most of the styles to known default values that do as little as possible. There are many CSS Resets. A common one is Eric Meyer’s CSS Reset. Just include the reset before your CSS.
The cascade looks like this: User Agent CSS -> CSS Reset -> Your CSS.
Note, a Reset may not overwrite all User Agent CSS styles so you may still have some random styles sneaking into your CSS. For example, Eric Meyer’s Reset doesn’t reset button styling.
Next is to understand that your own CSS (or someone else’s CSS that you include) may inadvertently modify your CSS without you knowing it or meaning to. An obvious example of this is specifying a style using a selector that modifies all elements of a type. All elements will get that style!
Because of this, most people prefer to write Selectors using classes rather than element types. Classes tend to be flexible, you can create infinite numbers of them, and a single element can have multiple classes.
Multiple classes let you mix and match your styles. For example, you can have classes called button, dark and light. This lets you specify a dark button and a light button without writing the same styles over and over.
<button class="button light"></button
<button class="button dark"></button>Another way to prevent your CSS from accidentally “infecting” elements you didn’t mean to modify is to use more complex, specific selectors that limit your CSS to very specific elements.
As well as cascading Styles, Styles on a container of your element might also affect your element’s Style. Because Styles can interact badly with other Styles for so many reasons, the best way to test your CSS is to use [JSFiddle](https://jsfiddle.net/) or [CodePen](https://codepen.io/) with just the styles and bare minimum elements you want to test or understand. This guarantees your sample CSS is “clean and working”. When you integrate it back into your main project and it doesn’t work, you can assume it’s a bad interaction with other CSS rather than bad CSS.
Browsers like Chrome and Firefox can show you the styles that are being applied to your elements, let you edit them, and even help you track down where the styles are coming from. Never believe that only your CSS is styling an element! How to see CSS on an element in Chrome. How to do it in Firefox.
There is a lot of complexity how Styles work. It’s not worth it to memorize, understand, or even recognize every style. However, it is a good idea to get a rough understanding of shared principles of most styles, as this understanding mostly applies to every style. Check out this article on CSS margin, padding, content, and border. Skim this style explanation, mainly to see how insanely complicated Styles can get. Then get a feel for standard flow, Box, FlexBox and Grid. But you don’t need to understand them deeply until you need them.
CSS is always improving and growing. This means a lot of information about CSS is out-of-date. It also means that some features of CSS might not have been implemented by all browsers yet! Always check the date of your information and consult a website like Can I Use ___? to ensure your CSS can be used on most browsers. Also, look for multiple examples of solutions as newer solutions are often simpler and easier than older solutions.
Cascading Style Sheets can be very powerful but also very frustrating. Make sure your styles aren’t being overwritten or interacting badly by using CSS Resets and isolating your CSS in JSFiddles. Know that Selectors and Styles can be super complex! Don’t bother trying to learn them all, just know they exist, know what they generally do, and study them when you need them.
Further Reading: How to Learn CSS
