Introduction to CSS

CSS is a language that styles an HTML document. It is not a programming language, but a styling language. It describes how HTML elements should be displayed. CSS is used for website layout and design.

This tutorial teaches the functionality of CSS. We will cover following topics.

  • Creating CSS file
  • Methods for adding CSS
  • Color
  • Selectors
  • Fonts
  • Class and Id
  • Images
  • Margin and Padding
  • Text formatting
  • Links
  • Alignment

Adding CSS

You can add CSS to the elements using the style attribute. For example

<p style="color:red;">First Paragraph</p>

First Paragraph

Or you can add a CSS file to the existing html file using link tag in the head section of html

<link rel="stylesheet" type="text/css" href="style.css" />

Or you can style the elements using style tags in head tags as shown below

<html>
  <head>
  <style>
  /* put CSS here */
  </style>
...

Color

Change the color using color property. Two codes and their output are specified below

<p>First Paragraph</p>

First Paragraph

<p style="color:red;">First Paragraph</p>

First Paragraph

Selectors

You can use selectors if you want to make change to all the elements using selectors. You can write CSS in the style tags or in a different file. It will look as

<style>
p{
  color:red;
}
h2{
  color:green;
}
</style>

This will change all the paragraphs to red and h2 elements to green.

Class

Classes can be added to many HTML elements. And styling those classes will apply style to all the elements

<style>
  .blue-text{
    color:blue;
  }
</style>

So, when you add class to any element, the color will turn to blue

<h2 class="blue-text">Heading</h2>
<p class="blue-text">Para 1</p>

This will make heading and paragraph color to blue.

ID

Just like classes, id can be added to the element for styling. But id attributes should be unique for each element unlike class.

id is not reusable and should only be applied to one element. An id also has a higher importance than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied. (freecodecamp.org)

You can use id to modify the elements using

#bigFont{
  font-size:50px;
}

<p id="bigFont">Big Font</p>

Font-Size

Change the size of font using font-size.

<p style="font-size:20px;">Para 1</p>
<p style="font-size:25px;">Para 2</p>
<p style="font-size:30px;">Para 3</p>

Para 1

Para 2

Para 3

Font-Family

You can change the font using font-family

<p style="font-family:sans-serif;">First Para</p>
<p style="font-family:Monospace;">First Para</p>

First Para

First Para

Degrading Fonts

If a font is not available than you can tell browser to use another font as shown

<style>
  p{
    font-family:sans-serif, monospace;
  }
</style>

So, if the font sans-serif is not present, paragraph can use monospace font.

Images

Set the width of image using width. Sets the width of the image to 100px, and also decrease the height according to aspect ratio.

img{
  width:100px;
}

Set border using border property and add the radius using border-radius

img{
  width:100px;
  border:5px solid black;
  border-radius:50%;
}

This will make the image round and add the border of 5px around it.

Background-color

You can add background color to the element using the property background-color.

p{
  background-color:red;
}

Padding and Margin

Padding – Amount of space between content and border.

Margin – Amount of space between border and surrounding elements

There are 4 properties for each

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

You can specify all using a single property as shown going clockwise.

margin : <margin-top> <margin-right> <margin-bottom> <margin-left>

Add the html and css code

<style>
    div{
      border: 5px solid black;
      text-align:center;
    }
    .box1{
      background-color:yellowgreen;
      padding:30px;
    }
    .box2{
      background-color:aliceblue;
      padding:30px;
      margin:20px;
    }
    .box3{
      background-color:#069;
      padding:30px;
      margin:20px;
    }
</style>
<div class="box1">
      Box 1
    <div class="box2">
      Box 2
    </div>
    <div class="box3">
      Box 3
    </div>
 </div>
margin and padding
margin and padding
distribution of above code
distribution of above code

The above image shows the picture of how the content is laid out. The content is 318 x 18 px. Then the padding is of 30px on each side. It is surrounded by border of 5px on the side. Outside the border, there is a certain margin, here it is 20px. This makes the whole div.

Over-riding Class and ID

.class1{
  color:red;
}
.class2{
  color:blue;
}
<h1 class="class1 class2">Heading</h1>

No matter the sequence of the writing class=”class1 class2 ” class 2 will be applied on the heading, because it is written later.

If you want to override the classes, use id, it has higher precedence than class. It does not matter where the heading is written in the file.

You can override id using the style element and writing the css in line as shown

<h1 class="class1 class2" id="colorId" style="color:green;">Heading</h1>

In this, colorId overrides both the classes. And the inline-style overrides ID, so the color for the heading is green.

If you still want to use a particular class, the most powerful is !important

.class1{
  color:red !important;
}
.class2{
  color:blue;
}

The color of the heading will be red.

Variables

Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

The variable name must begin with two dashes (–) and is case sensitive

<style>
:root {
  --main-bg-color: lightgreen;  
}

#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;  
}
</style>

If there is some typing error in the variable name, it may not work. So, it is necessary to give a fallback value as shown below.

#div1 {
  background-color: var(--main-bg-color, green);
  padding: 5px;  
}

If –main-bg-color is not found, then green color is executed.

You can change the variable for the particular portion by redefining the variable as shown below

<style>
:root {
  --main-bg-color: lightgreen;  
}

#div1 {
  --main-bg-color:red;
  background-color: var(--main-bg-color);
  padding: 5px;  
}
</style>

So, now red color will be used for #div1.

Leave a Reply