What is CSS?

CSS, Cascading Style Sheets, is a stylesheet language that is used to beautify the content of a web page with some colours and other modes of styling. It was first released in 1996 in an attempt to ensure separation of content of a web page from the its styling. Today, the latest and most updated version of CSS that is being used is 3 and is commonly known as CSS3.

blog
by Jibran Advani
Published on:
3 August 2021Last updated:
3 August 2021

First and foremost, it is important to take a note to the point that CSS is stylesheet language and it is not considered a proper programming language. This is because it was not designed for programming purpose back in the day. CSS was developed and released with the sole of premise of separating the content from its related styles so that code maintenance could become easier and development time and developer experience could be increased.

The word cascading comes the word cascade, the literal meaning of which is to flow down. In CSS context, this means that styles written are CSS are read from top to bottom and in the case of conflicting styles, the styles written at the bottom are considered the final styles. However, this is not the end of the story. There are some other considerations which are also taken into account while determining the final styles which will be discussed in a another article.

How to install CSS?

CSS is something that comes packed with browsers by default and it does not need to get separately installed on the system. The thing one needs to get installed is the web browser which is the environment in which HTML gets rendered and styles relating to that HTML are also applied using default CSS values of the browser. Whatever operating system one is using, the operating system also comes with some default browser like edge for Windows, safari for Mac etc.

How one can write CSS?

There are three ways one can write CSS, which are listed below:

  1. Inline CSS (written under html tag as an attribute to that tag.)
  2. Internal CSS (written in the same html file under style tag where styles for that particular page defined.)
  3. External CSS (written in a seperate file which is then linked to respective html files where one wants to use those style.)

It is always recommended to write external CSS as it ensures better separation of concerns and avoids repeating the same styles multiple times in different html files of a single project or in different elements in an html page. However, it is considered fine to use internal CSS where styles are minimal like 20 to 40 style. In no way, inline CSS is considered a good practice.

How to write basic CSS?

The basic syntax of writing CSS can be explained in the below list:

  1. selector (which could be any html tag one wants to style)
  2. declaration block (this is where styles are to be defined)
    1. property (the property one wants to style)
    2. value (the value which one wants to set for a selected property)

In terms of code, suppose one wants to change the colour of a paragraph element to red. It can be done with below code following above steps:

1p {
2  color: red;
3}
4

Inline CSS

It is never recommended to use inline CSS in an html document. However, for the sake of illustration, below is the example of inline css which simply turns the color of the element, in which CSS is used, to red.

1<p style="color:red;">This is a red paragraph.</p>
2

Internal CSS

Below is the example that shows how to use CSS within the same html file.

1<!DOCTYPE html>
2<html>
3  <head>
4    <style>
5      h1 {
6        color: red;
7        margin-left: 20px;
8      }
9    </style>
10  </head>
11  <body>
12    <h1>This is a heading</h1>
13    <p>This is a paragraph.</p>
14  </body>
15</html>
16

External CSS

This is the recommended method of writing CSS. In this method, one has to create a seperate CSS file and link that file to any html file wherever one wants to use those style.

Suppose one has created a folder on the desktop by the name styling-html and within that folder, a new file is created by the name of index.html with the following code:

index.html (without styles)
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Site</title>
5  </head>
6  <body>
7    <h1>This is a heading</h1>
8    <p>This is a paragraph.</p>
9  </body>
10</html>
11

After that a new file is created within the same directory by the name of styles.css with the following code:

styles.css
1h1 {
2  color: purple;
3}
4
5p {
6  color: green;
7}
8

The style file as mentioned above, has been created but it does not have any impact on index.html file simply because index.html have no clue that certain custom styles also exist. In order let index.html know of styles, one needs to link styles.css file to index.html with the below line (provided same directory structure was followed). The below code needs to be entered in head element of the index.html.

1<link rel="stylesheet" type="text/css" href="./styles.css" />
2

After entering the above line of code, the final look of index.html should be as follows:

1<!DOCTYPE html>
2<html>
3  <head>
4    <link rel="stylesheet" type="text/css" href="./styles.css" />
5    <title>My Site</title>
6  </head>
7  <body>
8    <h1>This is a heading</h1>
9    <p>This is a paragraph.</p>
10  </body>
11</html>
12

And after this if this file i.e. index.html is run in the browser, it should display the heading with purple colour and paragraph with with green colour.

Conclusion

The points to remember mentioned in this post are as follows:

  • CSS stands for Cascading Style Sheets.
  • It is a stylesheets language that is used beautify the content on a web page.
  • CSS files need to be saved with .css extension at the end of a file name.
  • There are three methods of writing styles for html and the recommended method is to use external CSS file.
  • The basic syntax of writing CSS is selector → declaration block → property → value.