BACKGROUND

Since its inception, one of the major objectives of CSS [Cascading Style Sheets] has been to separate concerns between—what content exists on the web, and how those contents are presented. Contents on the web are to be semantically written and structured with a Markup language like HTML. When these contents are separated, accessibility is easier to engage in. When you rip off the CSS of any random site on the web, e.g Tesla, LinkedIn, Sofcom etc., all that’s left are texts, links, and images which have no beauty; and hence, cannot be understood.

“Design is the intermediary between information and understanding.”

Hans Hoffman.

Here’s an Apple web page without CSS.

Apple web page without css

And here’s the same web page (Apple) with CSS.

Apple web page with css

CSS is a deep concept in itself. Its depth is a consequence of how designs are perceived on the web. Over the years, CSS has stepped up its game, and has expanded on its capabilities—allowing for truly awesome and yet simple presentations. Some of them include web font support, 2D and 3D transformations, animations, image effects etc. The reason behind the name CSS is its ability to cause styles to cascade; i.e. to pass down styles from top to bottom, and to apply the most recently declared style. Cascading allows for the inheritance of styles with higher hierarchy. This leads to the concept of specificity.

Specificity:

Specificity is a concept that the browser adopts in order to render the most relevant style to an element. Different selector types have different rankings for specificity, and usually, the selector type with the highest rank receives the declared styling. When elements are selected within the same specificity range, the browser selects the most recently added style, which is the one at the bottom of the sheet. This is the idea behind the word ‘cascading’.

Specificity level in css

It is important to note that inline styles have a higher specificity than all the above.

Specificity Calculation Metrics

  • all * ⇒ 0
  • Type selectors ⇒ 1
  • Classes ⇒ 10
  • Id’s ⇒ 100
  • Inline styles ⇒ 1000

See below some specificity instances:

Case 1: P, is a type selector; hence, the browser sets all paragraph tags to red.

Case 2: The browser renders a more specific style—color: blue to class .first-paragraph , and displaces the generic red color.

Case 3: With an even more specific identifier — #first-paragraph— the browser replaces the previous blue color from the .first-paragraph class declaration with the id declaration.

Case 4: Introducing ‘!important’ ruins the cascading property of CSS, and enforces a purple color for all paragraph tags, not minding the previous declarations.

Note: When !important is used to enforce a style on an element, the cascading form of CSS is destroyed, and hence it is not advised. !important is only excusable if it is needed to override CSS from an external source e.g Bootstrap. The knowledge and application of Specificity in CSS, makes it possible to collaborate and reuse large CSS codebases without necessarily affecting previously declared styles.

CSS Animations.

There is an amazing feeling that accompanies experiencing subtle animations on web pages. CSS makes it possible in the CSS3 module. One thing to note about animations is that too much of it ruins everything, and as such, animations should not be a source of distraction to the users; preventing them from paying attention to important information on the page.

CSS animations have three major divisions:

Transform: Makes it possible to alter the initial dimensions, size or coordinates of an element.

div{
  animation: demo1 20s linear infinite;
}

@keyframes demo1{
  0% {
    transform: rotate(0deg);
  }
  10%{
     background: blue;
  }
  60% {
    transform: rotate(360deg);
    border-radius: 100%;
  }
   100% {
    transform: scale(1.5);
    border-radius: 50%;
  }

Transition: Makes the animation fluid.

.box{
  border: 1px solid orange;
  width: 100px;
  padding: 0.5rem;
  background: orange;
  display: block;
  box-shadow:  0px 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 0;
  transition: width 2s ease-in-out;
}
.box:hover{
  width: 150px;
}

Key Frames: Keyframes include the ability to determine breakpoints for transitions.

@keyframes drive{
  0%{
    transform: translateX(-500px);
  }
  100%{
    transform: translateX(100vw);
  }
}

.car{
  animation: drive 15s linear infinite;
}

@keyframes turn{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.wheels{
animation: turn 3s linear infinite
}

For the sake of the animation section of this article, there is a demo on codepen, that shows how to use some of these animation options. (We will be moving a car).

Conclusion.

CSS is a great tool and language; one of the best that we have experienced in the design world, and it is standing the test of time. Becoming better at CSS means understanding the ‘why’ behind its core concepts, and also exploring many of the newer features included in the new updates.

.thank-you{
for: reading;
}