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”. …
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.
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!
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…
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!
Every HTML element is a box that can contain content. …
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.
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:
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.
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.
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.
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…