Let's look at the process involved, how CSS actually works.
The first point is linking CSS to HTML, and that is if you want to see the CSS in action unless we
link or connect the CSS to HTML.
If you don't do that, then the browser is going to inject some default styles called the default browser
stylesheet as we have spoken about.
So the first step is that CSS must be connected to the HTML document.
This can be done in three ways and we have a section or a video to talk about how we can link CSS to
HTML.
Then after that we need to use what is called CSS selectors.
Well, CSS styles are applied to HTML element through what is called selectors, meaning we are going
to select the pieces of HTML that we want to style.
Then after we have selected the element that we want to style, then we come to the CSS declarations.
This decoration is made up of a property and a value separated by a colon and enclosed in a decoration
block with curly braces.
The property specifies what style or characteristics you want to change.
For example, the color, the margin, the background color, and so much more.
Then after that, we have what is called the cascade.
We will talk about cascading as well.
But in a nutshell, Cascade is one of the most important aspects of CSS.
It means that when multiple styles are applied to the same element, the browser follows certain rules
to determine which style takes precedence.
But for now, don't worry about this.
If it looks confusing.
In a nutshell, or in short, cascade means that let's say we have h one element.
Let me use this code.
For example, let's say we are styling this h one element to use a color of red.
And at the same time, I'm applying different color, let's say green.
As you can see that I am applying some different colors to the same element.
So what color will be applied?
This what we call the cascade.
So it is up to the browser to do some calculations to check which color or any property should be applied
if multiple styles are being applied.
Then we move on to inheritance in CSS.
Some styles like color, font, size, font, family and others are inherited by child elements from
their parent element, while other properties like padding margin border are not.
This feature of CSS can be used to write more efficient code and maintain consistency.
So again, in a nutshell, inheritance simply means that inheriting some property from your parent.
Don't worry, we will talk about inheritance as well.
And last step is rendering.
This is where we are going to see the actual effect of the CSS being applied to the element.
So once the browser has determined the appropriate styles for each element through cascading and inheritance,
then it applies those styles and renders the web page for viewing.
So by understanding these basic concepts, you can have a better grasp of how CSS works and how it interacts
with HTML to create the styles and layout seen on the web.