To be able to hit the nail on the head in explaining the concept of CSS cascade, selectors and specificity, we’ll need to learn about CSS syntax first.
CSS SYNTAX
Generally, a syntax is a set of rules that define what the various combinations of symbols mean. In computer science, a syntax is essentially a set of keywords and characters that a computer can read, interpret, and convert into tasks that it knows it needs to do.
They are like recipes which have to be followed to get the desired result. If a particular step in the recipe is missed, the meal wouldn’t turn out as it should, this is the exact same thing when an incorrect syntax is used in CSS and even programming languages in general.
A computer program is a set of instructions written in a programming language that tells the computer what to do. Like humans, computers cannot get a sense of what you are trying to pass across to it if you do not say it in its entirety.The closest thing to this are IDEs and other technologies that can point out where the error is, but even with this, you still have to write the correct syntax. A coding syntax must be exact and specific if not errors.
To understand the CSS syntax, let us learn about CSS rulesets first. The structure of CSS rule set is
P {
Color: red
}
Where P is the selector, color is the property and red the value. Colour: red is collectively referred to as a declaration.
CSS rulesets are the fundamental building block of stylesheets. Hence, a stylesheet contains lots and lots of rulesets.
The syntax of a CSS rule set
Each rule set must be wrapped in curly braces.
A colon should be used to separate a property from its value.
A semicolon is used to separate one property declaration from the next.
Multiple selectors are separated by commas.
SELECTORS
CSS selectors are patterns used to select and style HTML elements. As seen in the ruleset above, CSS rules are usually added to selectors to specify the styling of the “selected” element. CSS selectors go hand in hand with CSS combinators which are symbols that specify the relationship between selectors.
CSS selectors allow elements to be targeted based on their type, class, id, attributes and so on WHILE combinators allow elements to be targeted based on their position in relation to other ones and gives more precision in selecting an element(s). There are different types of selectors and combinators that have been made available by CSS.
Types of selectors
Element or type selector – target HTML elements by their type. ADD EXAMPLES MAMA
Id selector – target specific HTML elements by their id.
Class selector -target specific HTML elements by their class.
Attribute – target specific HTML elements by their attributes.
Pseudo-class, pseudo-element – target specific HTML elements by their state.
Universal selector – target all HTML elements on a page.