How Does CSS Work?

In this article, I want to teach you and show you the different levels of CSS in the browsers, how they work, and how we can control them.


When I started learning CSS, quite a long time ago, I was taught that all the browser’s basic styles come from the browser’s basic CSS file called the “User-Agent Stylesheet”. But over the years I came to understand that this is only a small part of where the basics styles come from.


Let’s explore the basics of CSS together!


Level 1 — CSS Properties Default Styles

Every CSS property has a Formal Definition section. These Formal Definitions are a part of the W3C’s standardization of CSS, the organization that is in charge of the web’s standards.


The Initial Value

Every CSS property has an initial value. This value doesn’t depend on the HTML element that it applies to. That is, a property’s initial value applies to all the HTML elements the same way.


I think that the majority of web developers are not aware of this basic thing.


Let’s take for example CSS positions:

.some-class{ 
   position: absolute; 
   top: 20px; 
   left: 20px;
}

The position property’s initial value is static.

The other direction properties of CSS positions, top/bottom/left/right — their initial value is auto.


Remember — the basic styles of those CSS properties exist before you write a single style.


CSS Positions’ initial values:

position: static; 
top: auto; 
bottom: auto;
left: auto; 
right: auto;

The best way to find each of the CSS properties’ initial value is by looking it up on the MDN website in the “Formal Definition” section.


Example: