Shayaan Siddiqui

Sign in

What is CSS and why use it?

CSS, Cascading Style Sheets, was initially released in 1996 to help developers describe the content of their website. With it’s initial launch, there were 11 ways to target your HTML element. It was mostly used for appearance formatting.

CSS 1.0 CSS Pattern with Explanation

In CSS version 3, there are more than 40 different ways to select an element to apply a style and more ways to customize your website by adding a Box Shadow, Opacity, Rounded Corners, More colors and web-safe fonts.

Photo by Branko Stancevic on Unsplash

Box Shadow

CSS Box Shadow can be used to give block elements a drop shadow or inner shadow. Below you’ll find the basic code syntax that will be expected from CSS3.

The following is sample code to demonstrate the Box Shadow feature.

  1. Adding a box shadow to a div.
<div class='one'>One</div>// CSS.one {       /* offset-x | offset-y */        box-shadow: 5px 5px;}

2. Adding color to your drop shadow.

<div class='two'>Two</div>// CSS.two {     /* offset-x | offset-y | color */     box-shadow: 5px 5px red;}

3. Adding blur-radius to the drop shadow

<div class='three'>Three</div>// CSS.three {     /* offset-x | offset-y | blur-radius | color */     box-shadow: 5px 5px 20px red;}

4. Adding spread-radius to the drop shadow

<div class='four'>Four</div>// CSS.four {     /* offset-x | offset-y | blur-radius | spread-radius | color */     box-shadow: 5px 5px 20px 5px red;}

5. Adding an inset to the div for drop shadow

<div class='five'>Five</div>// CSS.five {     /* inset | offset-x | offset-y | blur-radius | spread-radius | color */     box-shadow: inset 5px 5px 20px 5px red;}

Opacity (or RGBA)

Opacity is the degree to which the content behind an html element is hidden

<div class='one'>ONE</div><div class='two'>TWO</div>// CSS.two {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: auto;
background-color: rgba(255, 0, 0, 0.3);
color: red;
}
.one {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: auto;
background-color: rgb(255, 0, 0);
opacity: 0.3;
color: red;
}

You may think that opacity and rgba are the same but if you carefully examine the image above, you’ll notice that the word “ONE” is barely visible. This is because the opacity also applies to all children of the HTML element.

Rounded Corners

Before this became a CSS standard, a developer would need to create images of rounded corners and align them perfectly with their table and test with all major browsers to ensure that all users can experience the samething. Now that this has become a CSS standard, you will just need 1 line of code to apply rounded corners to your boxes.

<div class='one'></div>// CSS
.one
{
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: auto;
background-color: rgb(255, 0, 0);
color: red;
border-radius: 25px;
}

Tech Enthusiast and Software Engineer