Learning CSS — Part 1
This is the first part of my learning CSS series. This is where I document the things I am learning.
So let’s get to it. From the scratch.
What is CSS?
A Webpage that you view on the browser is made up of 3 things.
- Content
- Style
- Behaviour
As a developer, this is a great perspective to have about a webpage rendered on the browser.
Content is defined by HTML.
Style is defined by CSS.
Behaviour is defined by javascript.
A Browser understands the HTML, CSS and javascript for a web page and renders it for the user.
Style of a web page is defined by CSS
What do you mean by style of the web page?
The style of the web page is its visual appearance. The colour, the font, etc.
Want to make your site visually appealing? CSS is your friend.
How do I define the style with CSS?
Here is a quick example of how CSS is used.
Let's say you have created a CSS file with the following contents. Let's call this file styles.css.
h1 {
color: #2f4f4f;
margin-bottom: 10px;
}You can link this style to your HTML page by the following line in the <head> tag.
<link rel="stylesheet" href="styles.css" type="text/css" />All <h1> elements in the HTML page would be of colour #2f4f4f.
Let’s break down the CSS. Let us get ourselves familiar with some terminology.
What we see here is a CSS ruleset. This was the content of the styles.css file mentioned above. A website has many such rulesets. Here we are focussing on just one ruleset that we defined earlier.
A ruleset is made up of selector(s), in this case, h1, and a declaration block that is defined as a pair of braces along with its contents. A ruleset is also referred to as a rule.
So, a ruleset has
- Selector(s)
- Declaration block.
Selector represents all the HTML elements that this style applies to.
In our example that selector is h1. This means this style will apply to all the h1 elements in the HTML.
Declaration block holds a set of declarations
In our example, we have 2 declarations. Every declaration ending with a semi-colon. Every declaration is made up of a property and its value that the author of the CSS desires.
As you know there can be many rulesets. And sometimes, the way the rulesets are defined, there can be declarations defined in different rulesets that apply to the same element and define the same property. So, there can be conflicting rulesets. These conflicting rulesets are resolved by the browser.
The process of resolving the conflicting rulesets is called cascading.
Hence, the name cascading style sheets.
The next part in this series will dive into cascading.
Cheers!
If you like my content, give me a follow me on
Medium — https://vijeshsalian.medium.com/
Twitter — https://twitter.com/vijeshsalian
LinkedIn — https://www.linkedin.com/in/vijeshsalian/
