Everyone needs to start with the basics when learning how to use and understand CSS, including why and how it got its name Cascading Style Sheets.
This video looks into the ‘cascading’ behaviour of Cascading Style Sheets (CSS). This term simply means that the lowest line of CSS code on the sheet is the most relevant to the styling of the document. So if you colored a paragraph’s text blue, p { color:blue;}, at the top of your CSS, and then later decided that you wanted it green, p { color:green;}, then green would be used on all of the paragraphs in the document. This is because green is the color that is assigned in the lowest line of code on the sheet, and therefore takes overrules the previous declaration.
This is why the word cascading is used to describe this way of styling documents. As you work your way down the sheet, you continue to add new important attributes. Though there is a way to make a declaration stay active, no matter how many times it is contradicted later in your code. You can use the value !important; to let the document know that it is something you do not want overridden for any reason. So for instance, p { color:red !important;} will take precedence over p { color:yellow;} even if it is added at a lower point on the sheet.
This value can be a very powerful tool to help keep things from changing unexpectedly as you build larger and larger websites. This allows you to maintain some consistency and control, but can also cause a headache if you lose track of a declaration early on containing the !important; value. This video does a good job of explaining this type of CSS styling clearly and concisely for all of you just getting started.
If you found this quick tutorial helpful, check out this great post on CSS positioning and how to keep things where you want them on a page. Thanks for stopping by!