Understanding the Default Behavior of Styles in Our Browsers

When you start creating a new website, even before writing a single style, the browser applies styles to it — its default styles.

Have you ever asked yourself who decides what those basic default styles will be?

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”. …

Future of CSS

Digging in the w3c specs can reveal many exciting features. Although some of them don’t have browser support yet, we can at least learn what new features we can expect soon.

One of the new features is the new image() function. This new function will give us more control over image loading in CSS. Let’s dive into the powers of the brand-new image function.

Cropping Images

The first thing that the image function enables us to do is to load only part of an image. This means that you can crop and load a part of an image via CSS. …

The new CSS logical properties module is one of the most important developments to have come to CSS in recent years. This module enables us to support all the directions that human languages are written in with the same CSS definitions.

At the end of 2018, I published the “New CSS Logical Properties!” article. At that time, I was sure that in 2019 we would start using this new feature. But I was wrong!

CSS Logical Support in Theory

The can-i-use website might lead us to think that browsers already support these properties and that they are ready for use:

As someone who loves CSS and appreciates its importance in this day and age, it is very unclear to me how the web industry’s most prominent corporations and companies, like Facebook, Google, Amazon, and many others, aren’t taking CSS more seriously. As I wrote in my article ”Why the World Needs CSS Developers,” modern CSS is becoming more and more complicated, and therefore should be written by programmers who are experts in CSS.

After reverse-engineering WhatsApp Web, which you can read about in my article: “Reverse Engineering WhatsApp Web’s CSS,” this post describes how I reverse engineered the Twitter website…

CSS Basics

The box-model is one of the basics things in CSS and HTML. But even in 2020, lots of web developers don’t understand the idea of how box-model behaves.

So, in this article, I will explain the basic logic of the box-model and why it is called the box-model. Besides, I will also give you a deeper insight into the behavior of the box-model.

Indeed, the name ‘box-model’ exists because, in the browsers, everything is built from boxes. So, let’s start exploring these boxes!

Everything is Boxes

Every HTML element is a box that can contain content. …

CSS Basics

In 2020 there are a lot of developers and designers who want to learn the basics of CSS. In this series of articles, I will teach you those main topics. In this specific article, I will review the essential CSS properties of typography while using many visual examples.


This font-family property is used to declare what font we want to use. It can receive an array of fonts. This can be useful to us for two reasons:

  1. If the first font isn’t working in a specific operating system, the browser will use the next font until something matches it.
  2. If…

How I Built a Pure CSS Game — No JS

The dynamic of the internet is associated most of the time with JavaScript language. But it has been quite a while since CSS has been able to provide you with some of those possibilities.

In order to test these possibilities, I have decided to create my own Pure CSS Game — Coronavirus Invaders. In this article, I will teach you how to create those things you thought you could only create with JavaScript. I will do so by demonstrating these capabilities through my pure CSS game.

Note: Some of these CSS tricks are possible with CSS, but from a perspective…

During these crazy times, of the Coronavirus pandemic, we, the web developers of the world, spend almost all-day at home. On one of those weekends, when I got bored, I decided to create a new inspiration game, which is built only with CSS and HTML. In this article, I will teach you how I created the CSS Creature of this game.

The full CodePen of my Pure CSS Game — “Coronavirus Invaders”.

Thinking of an Idea and Getting Inspiration

We are living during the Coronavirus pandemic, therefore I thought it would be a great idea to create a game in which we need to fight the virus.

If you’re like the majority of readers, recreating CSS and HTML by reverse engineering might look suspicious to you, and you might wonder what could be the benefits of doing such a thing.

In my opinion, playing with — or recreating — code that interests you, is the best way to learn and to enjoy what you do. The following are some more benefits, some of which most web developers aren’t aware of.

Full WhatsApp Web Reverse Engineering Demo

The Benefits

  • It’s fun!
  • It helps you become a better architect
  • It improves your creativity
  • It shows the potential that the app can reach
  • It proves a concept
  • You…

In the last ten years, give or take a few, CSS has grown extensively with the addition of more and more features, thus gradually becoming quite elaborate and complicated. The CSS of our days is very different from the CSS of the 2001–2010 decade.

Before I start explaining why the world needs CSS developers, we must go back and look at the history of CSS.

The History of CSS

In the decade of 2001–2010, while the internet was conquering the world, CSS was stuck. Internet Explorer (versions 6–8) was the leading browser, and since Microsoft, at that time, didn’t pay much attention to CSS…

Elad Shechter

CSS & HTML Expert

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store