The Beauty of CSS
Tags: css, webdev
Published: 2020-07-13 21:10:23

---
title: The Beauty of CSS 
published: true
description: A brief look at some  CSS features and works that makes is such a beautiful language to work with
tags: css, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dhip9hivrm0ecg43teyu.png
---

> <b>The cover photo is a screenshot of a Troy Skyline by Jordi Rué created with HTML and CSS. You'll find the code in an embedded codepen in this article.</b>

## __Introduction__

CSS is the language that sits at the _presentation level_ of the Web alongside HTML and JavaScript.

CSS is easy to start with but it's not simple to work with because it has some features that might seem frustrating at first. These features are what makes CSS such a beautiful language to work with.

If you have been working with CSS for a while now, you'll already know what I am talking about. Examples include the CSS _cascade_ and _specificity_. In reality CSS _cascade_ and _specificity_ are part of the "popular ones", there are others and what is possible with them.

Let's begin.

<hr>

In no particular order, here is an __incomplete list__ of what make CSS such a beauty to work with, you might think that you are already familiar with them because you've read about them before and know how to use them.

I'll encourage you to read on because we are going to discuss what makes them an absolute beauty to work it, therefore, you will surely learn something. They are:

* The Cascade
* Property computation based on font size
* Relative units
* CSS variables
* The `attr()` function
* Art

## __The Cascade__

The _cascade_ is the "C" in CSS and it is the algorithm that defines how to combine property values from different sources  ([source](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade)). The _cascade_ can be employed to handle properties that is not supported by some browsers.

When a browser encounters one of the properties it does not support it will fail graciously. What am I talking about? Let's find out.

Take the following code snippet, if the browser does not support the `linear-gradient` property the browser will use the `background-color` property. Why? The reason for this behavior is that  __browsers ignore properties that they do not understand__.

```css
.selector {
    background-color: #1560bd;
    background-image: linear-gradient(to right, red, yellow); 
}
```

Therefore, you can be rest assured that a browser that fails to render the gradient will definitely apply the background color. That is simply beautiful. You can think of it as a _backup_ when something goes wrong in such situations.

## __Property computation based on font size__

When you style an HTML element with CSS and you make use of the `font-size` property with _relative unit_ values, other properties declared afterwards with _relative units_ will be computed by the browser based on the value of this font size.

Armed with this knowledge you will know beforehand the resulting values of other properties in that selector because you have a _source of origin_ for their computation which is the `font-size` property.

In the following code, the `font-size` of `main` is set to `3em` and the `margin-left` property is set to `1em`. You might think that the computed `margin-left` property value will be `16px` but __that is not the case__. The computed value will indeed be `48px`. Why?

When the value of the `font-size` is set to `3em` the browser will compute a value of `48px` which is `16px * 3` (assuming default browser font size is unchanged), afterwards you declared `margin-left` property as `1em` , the browser will read this saying: _use the default font size of this element_, in this case `48px`. When we increment this value to `2em` the browser will compute `96px` for the `margin-left` property.

```css
main {
    font-size: 3em;    /* 48px computed by the browser */
    margin-left: 1em;  /* This will also result in 48px */
}
```

Based on the code snippet above, if you decide to add a `padding-bottom` value of `0.5em`, what will be the _computed_ value?

Without checking in your browser what is the computed values of the `font-size` and `padding-bottom` in the following code snippet?

```css
main {
    font-size: 32px;
    margin-left: 1em;
    padding-bottom: 0.5em;
}
```

## __Relative units__

Relative units as their name implies, work in relation with other units or  themselves. They are pretty useful in creating responsive _typography_ that scales with the browsers' viewport.

You can read the article entitled [Precise control over responsive typography](https://www.madebymike.com.au/writing/precise-control-responsive-typography/).

## __CSS variables__

Most programming languages have _variables_. CSS also have variables that simplify the developer workflow and saves repetition in the code base.

When a variable is declared, you can use its value in an appropriate location in your code base. If this _variable_ value is changed, the changes will reflect anywhere it's used in the codebase.

Have a look at the following example:

```css 
:root {
    --font-color: #1560bd;
    --general-margin: 20px;
}

main {
    color: var(--font-color);
    margin: var(--general-margin);
}
```

Whether you are learning about CSS _variables_ for the first time or you are using them already, you should read the following post by [@adactio](https://dev.to/adactio) which talks about the behavior of CSS variables and CSS cascade.

{% link https://dev.to/adactio/css-custom-properties-and-the-cascade-4jga %}

And if you are using a preprocessor like SCSS, have a look at the article by Ana Tudor on _css-tricks_ entitled "[When Sass and New CSS Features Collide](https://css-tricks.com/when-sass-and-new-css-features-collide/)".

It talks about the conflict between CSS variables and [Sass](https://sass-lang.com/). What she detailed therein is valid when this article was published.

## __The `attr` function__

The `attr` function is part of the function available in CSS others include `calc`, `url`, `max`, `min` e.t.c. The `attr` function is used to extract an attribute from HTML element which can then be manipulated with CSS. There are so many use cases for this, but one comes to mind: styling broken images.

There are situations when an image fails to load, when this happens you can customize what the user will see in-place of the image. The main ingredient is the `attr` function  which is used to extract the image _alt_ attribute (if it exists).

```css
.image-container {
    postion: relative; /* Necessary to position the alt text */
}

.image-selector {
    display: block;
    position: relative;
    
    /* Include image width, this is important */
}

/* For Chrome browsers*/
.image-selector::before {
    content: " ";
    background-color: #eee;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    border: 1px dashed #aaa;
    border-radius: 4px;
}

.image-selector::after {
    content: attr(alt);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 1px;
    left: 0px;
    text-align: center;
    font-weight: bold;
}

/**
 * The method for styling broken images using
 *  pseudo-elements works in both Firefox and Chrome
 *  browser, but the only defect in this approach is
 *  that, in Firefox the alt text of the image still
 *  shows alongside the alt text generated using CSS content
 *  property, but directly targeting the alt attribute
 *  works.
 */
.image-selector[alt] {
    text-align: center;
    font-weight: bold;
    color: #999;
}
```

If an image is broken you get something similar to the image below.

![A broken image showing the alternate text](https://dev-to-uploads.s3.amazonaws.com/i/iq9z35uhvug5iybg4mxp.png)<figcaption>Broken Image</figcaption>

## __Art__

You might think CSS is just for styling web pages, but it can be used to create beautiful stunning art. The possibilities are endless and you are only limited by your imagination.

The following _pen_ is entitled: "Troy skyline". It was created using just HTML and CSS by [Jordi Rué](https://jordirue.com/).

{% codepen https://codepen.io/jordirue/pen/NWGjwzz %}

Here is another one, a _landscape_ image created with just HTML and CSS by [Ben Evans](https://twitter.com/ivorjetski).

{% codepen https://codepen.io/ivorjetski/pen/xxGYWQG %}

Finally, a _renaissance_ painting by [Diana A. Smith](https://diana-adrianne.com/) called [PureCSS Gaze](https://diana-adrianne.com/purecss-gaze/) made with HTML and CSS.

![PureCSS Gaze by Diana A. Smith](https://dev-to-uploads.s3.amazonaws.com/i/nhundmoylkw1y8nvwcg3.png)<figcaption>PureCSS Gaze by Diana A. Smith</figcaption>

You can check her GitHub repo for the source:

{% github cyanharlow/purecss-gaze %}

## __Conclusion__

What you can do with CSS is only limited by your imagination. Have fun!

_Updated August 8, 2020: Updated the code for styling broken images._