CSS Essentials

Few important rules that will make our lives easier!

4 min readFeb 17, 2022

Things you will learn:

CSS Selectors
Specificity
CSS box model

CSS Selectors:

Type Selectors: It is the name of the element. You simply select the element and add CSS to it.

h1 { 
     color: orange;
     text-align: center:
}p { 
    color: green;
}

Descendant Selectors: Getting access to elements inside other nested elements. In the example below, the “p” element is the descendant of the header element, and we only one to select “ I love coding!”. The web browser looks inside the header first and then selects “p” as shown in the code. You can drill as much as you want to, check out number 2 below.

HTML<header>
  <h1> Example </h1>
  <p> I love <span>coding!<span> </p>
</header>CSS1. header p {
    color: pink;
}2.  header p span {
    color: blue;
}

Class Selectors: It is used when you are adding class to HTML elements.

HTML
<p class="intro"> Hi my name is...</p>CSS.intro {
      color: blue;
}

Specificity:

It is how the web browser decides which set of CSS instructions to listen to, for example:

HTML
<body>
 <p> I love love coding!<p>
 <footer>
  <p class="highlight"> This is footer</p>
 </footer>
<body>CSS
body{
  color: blue;
} p {
  color: orange;
}

Overriding an inherited value is simple.
all the “p” elements will be orange.

Now in the example below we are trying to just color the “p” inside the footer. This code will not work, since the selector is explicitly set on the “p” element. The “p” is actively targeting all the “p “element in the browser.

Incorrect:

CSS
body{
  color: blue;
}p {
  color: orange;
}footer {
 color: pink;
}

Correct:

Instead we need to use the “ descendant” selector to be more specific.

CSS
body{
  color: blue;
}p {
  color: orange;
}footer p {
 color: pink;
}

Remember:

Descendant selectors are more specific than the type selectors.
Deeply nested selectors are more specific than simple descandant selectors. body footer p { color: red } will override footer p { orange }.
Class selectors are more specific than type or descendant selectors .highlight { color: yellow } will override body footer p { color: red }
Descendant Selector which referrence a Class is more specific than a solitary class selector. .footer .highlight { color: purple } will override highlight { color: yellow }.
When two rules have identical specificity, whichever comes last in the page will be selected. example p {color: blue} and p {color: yellow}, the yellow one will be selected.
The ordering of the stylesheet matters

CSS Box Model

Let’s write some code to create a box!

Box A: Add background color to
Padding: Padding will be 30px from top of the box and sits on the left side, where the content begins.
Then we add border, first we state the thickness of thr border and then mention the color
Box B : Add a background color

HTML
<body>
  <div class="box-a"> BoxA </div>
  <div class="box-a"> BoxB </div>
</body>CSS.box-a {
    background-color: pink;
    padding: 30px;
    border: 3px solid purple;
}.box-b {
  background-color: #E75480;
}

Two boxes stack on top of each other

Now we want to create a space between these two boxes

Box A: We will use margin to create space towards the bottom.

HTML
<body>
  <div class="box-a"> BoxA </div>
  <div class="box-a"> BoxB </div>
</body>CSS.box-a {
    background-color: pink;
    padding: 30px;
    border: 3px solid purple;
    margin-bottom: 20px;}.box-b {
  background-color: #E75480;
}

A box is nothing more than the area that takes up space in a web browser.

Padding: To create space inside of the box
Border: Drawing outline around the outer edge
Margin: To create space outside of the box

Width & Height

Padding and Border affects the true size of the element. Changing height and width for the boxes will not make these boxes identical since Box A has a lot more going on.

To make two of the boxes identical we can simple add a property called “box-sizing” that will calculate the actual height and width of the box.

.box-a { 
  background-color: pink;
  padding: 30px;
  border: 3px solid purple;
  margin-bottom: 20px;
  width: 200px;
  height: 150px;
  box-sizing: border-box;
 }.box-b {
  background-color: #E75480;
  width: 200px;
  height: 150px;
}

credits: Udemy course: Web Design for beginners by Brad Schiff

CSS Essentials

Few important rules that will make our lives easier!

Written by Saima Rahman