Skip to content

Styling sheet will help to arrange the things in a specific way to look at our website more beautiful. To do this, there are many languages are available. Some of them are below.

  1. CSS (Cascading Style Sheet)
  2. Sass (Syntactically Awesome Style Sheet)
  3. Less (Leaner CSS)

Cascading Style Sheet (CSS)

  • It is a language to specify how the things should look in our website.
  • It allowed us to attach the style such as colors, font, spacing, etc. to our HTML documents.

TRIVIA: Who created CSS?

Answer: Hakon Wium Lie

How to add CSS

There are three ways we can add CSS into our HTML documents.

  • Inline
<tag style="PROPERTY:VALUE"/>
  • Internal
<style>css</style>
  • External
<link href="style.css">

1. Inline

This will be applied in the same line as the HTML element. It is useful when you work with a single HTML element. However, this is NOT useful if you are dealing with multi page and multiple HTML elements . Hence, it is NOT recommended for those cases. 

<body style="background-color:red">
<p>Satheesh Pandian</p>
</body>

inline

2. Internal

This will be applied via style tag in the HTML document under head element. The main difference between inline and internal is that inline can be applied anywhere in the HTML document, whereas internal can be applied only under head element. However, it can have the selector element that applies the internal CSS rule to that selector element.
This can be useful if you are working in a single HTML document and NOT useful for multi page website. 

<head>
    <style>
        body {
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>Satheesh Pandian</p>
</body>

internal

3. External

The main difference between internal and external is that all style components are stored in external file and will be invoked in HTML file and apply the style. This will be applied using link element under head section in the HTML document. This is useful for multi page website.

<head>
    <link href="style.css" rel="stylesheet" /> <! –– rel means relationship -->
</head>
<body>
    <p>Satheesh Pandian</p>
</body>

body{
    background-color: yellow
}

external