In the previous instalment we went over some basic explanations of HTML and JavaScript. We also dabbled in the differences between a markup language (HTML) and a full fledged programming language (JavaScript).
In this instalment we will be taking a look at a third language which all modern web developers need to know: CSS. We will take a look at basic rules and topics which include pseudo elements, selectors, specificity and more.
So, let’s crack on.
Intro to CSS
As mentioned, CSS is an essential tool in the metaphorical toolbox of any modern web developer. Its purpose is probably pretty evident when considering what CSS stands for: Cascading Style Sheets.
That’s right, CSS is in charge of styling elements within the HTML document. Without CSS websites/apps would just be black and white text documents.
Modern browsers are released with their own basic CSS styling for standard HTML elements, known as user-agent stylesheets.
The user-agent stylesheet is the reason why, for example, a h1 element will appear bigger than a p element automatically. We will discuss the problems with them in another post.
Cascading
So, we have discovered that CSS is a literal sheet of styles which makes HTML documents look pretty, but what is meant by cascading?
Simply put, it is referring to the method by which CSS is read by the browser, and how the language prioritises which styles to apply to an element. You will hear this being referred to as both the cascade or the cascade algorithm.
The Cascade
When a browser loads a CSS stylesheet it will begin reading it from the top to the bottom. Any rules it encounters will be assigned a weight. This weight indicates the rule’s priority within the overall document and creates a race for priority.
HTML elements can be styled by multiple rules within the same stylesheet. As such the browser will continue to listen to conflicting rules and then reassign the winner depending on the weight of each rule.
The weight of the rule is decided by a number of things which vary from source of the stylesheet to the presence of an !important tag. We will go into weighting/specificity in part 2.
In the event that multiple CSS rules have the same weighting their order within the stylesheet will be the ultimate decider. Since CSS is parsed from top to bottom the rule which appears last in the stylesheet will be the one which wins out, see the example below.
The example above demonstrates the cascading nature of the CSS language and emphasises the importance in understanding how CSS is read by the browser.
At first it may seem pretty moot but when you have a CSS file which spans hundreds, if not thousands, of lines understanding the cascade can save you valuable debugging time.
Basic Syntax Rules
As CSS is limited to styling components it doesn’t really have all too many syntax rules which need to be adhered to. When writing CSS there are two topics which need to be understood: selectors and declarations.
Selectors are essentially little bits of code which tell the browser where to apply any styles which are defined in a declaration block.
Declarations can be thought of as a block of code which contains all the details about how an element is to be styled — properties and values.
It is important to note that, much like other coding languages, CSS requires you to end each rule declaration with a semicolon. Another note is that each declaration block is encapsulated/contained within opening and closing curly braces.
Wrapping up
It may seem as though we have only covered two topics in this post however, I believe that they are two of the most important topics to grasp before we move ahead.
Understanding basic principles such as the cascade, and terminology such as selectors and declarations, will enable you to follow along in the next chapters much more smoothly.
In the next instalment we will be taking a much deeper dive into the CSS language and, as such, it will be beneficial for you to fully understand the concepts mentioned in this post.
As always, I have added some further reading below.
Love, peace and happiness.
