Let's take a moment to examine how the web works as an overall process. If you could compare learning web design to building a house consider this as a foundation. But before starting i want to clear the confusion between Internet and Web ( most people assume they're same but they're not)

The Internet is a term which is used to refer to a massive netwoks of millions of computers all over the world that are used to share and transmit information. This is done through various protocols and languages and include things like : The World Wide Web is usually shortened to just the web is a way of transmitting data over the internet using the http protocol amd html. Now let's see how the BTS OF WEB: We often see the internet, pictured as a cloud (that's just a symbol for it). But off course it's not a cloud or a company or a computer it's literally millions of millions computers over the world interconnected by cables and satellites, so if you ask how big is the internet well it's as big as the whole world. Now some of the computer on the internet are called servers. Nobody is sitting at a server. It is just a computer that's connected to the internet and people can access it's file from anywhere around the world. It is not a computer in fact there is millions and millions of servers. There tons of buildings filled with thousands of servers. Therefore you can say there are plenty of plenty servers all around the world. Now there is also alots of computers on the internet where people are sitting there using the internet we call them client computers. The clients request information from the Internet. Now the internet has different services like email and web. To access the web you use web browser app on your computer, just like there are different brands of toothpaste, we have various brands of browser such as: It doesn't matter which one to use because they all takes you to the same place which means there's only one internet and only one web. So basically all of them works in the same way.

For example: Let's say you want to go to Instagram. You entered the address on the address bar, click enter and you are taken to Instagram homepage. But here what happens is you didn't go anywhere you are sitting in the place. What really happens is that your browser sent a message out to the internet saying "this person wants to see Instagram". The internet gets that message and finds Instagram server and tells it to send this client computer your homepage and then Instagram responds back a file which is basically a web page. Then the web browser reads and renders into a thing which you see on your screen which looks like this: If you want to make websites you first needs to understand what exactly the server sent to the web browser to show that web page. The web page shows a user friendly interacting websites but if you look behind the scenes you can see what the browser actually sent is a file that contains a bunch of computer codes. It is the job of the web browser to take this computer code and render it into whatever you see on the screen that is a user friendly websites not codes. Again the file which was responded back to your computer and rendered by web browser is what we call a web page.

I hope this short note might be helpful to anyone who come across this blog. thank you for reading!

When a webpage gets loaded in the browser, it parses the html code. It means taking the HTML code and then extracting valuable information from it. After it parses the HTML document, all it stores the code in a DOM (Document Object Model). While parsing the code, it loads the CSS from the header links.

Once CSS is loaded it starts parsing in two steps:

• Resolving the CSS declaration conflicts also known as Cascading.
• Processing final CSS values.

Let’s learn more about them!!

1. Cascading

   CSS comes from these different sources:

   • Author CSS: The developer writes it.
   • User CSS: Configurable by the user in the browser.
   • Browser CSS: Some styles are predefined in the browser.

   So when one or more styles are applied to the same element, CSS performs a set of rules called Cascading which evaluates the strength and the style rule, which has the more weight wins!

   But how does the cascade actually resolve these conflicts? For that we have three factors:

   1. Importance:
   2. Specificity
   3. Source Order

Cascade marks the importance of CSS styles based on the source they are coming from in the following order:

• User declarations marked with !important keyword.
  • Author declarations marked with !important keyword.
• Author declarations.
• User declarations.

• Browser declarations.

  So if you have two rules on the same element and one has an !important keyword on it then this one will win.

But if both of them have !important keyword

then specificity determins the winner here,

for example: here the selector with id will win as it has a higher specificity.

If both of these styles have the same specificity then the order will determine the winner. The last declaration will be applied .

and with this step we are done with cascading.

2.Processing final CSS values

Here we provide the processed values to all the styles. Finally CSS gets parsed and we get CSS object model which combined with Dom object model and forms a render tree. It is formed with a combination of HTML, DOM, and CSS-OM. After the render tree has been formed, the website uses something known as the Visual Formatting model which helps lay the elements on the page to determine the final layout of the page.

Finally, we have our rendered website.