Explorar's blog
What Type Of Css Is The Best

What Type Of Css Is The Best

Knowing the type of CSS to use can be very confusing for a lot of beginners. And it's also good to know the types of CSS and how to use it.

Fred-Adeji Onose Emmanuel's photo
Fred-Adeji Onose Emmanuel
·

2 min read

CSS, Cascading Style Sheet, is used to style our HTML document. It is what changes the HTML document form looking like a web page in the 90’s to the various beautiful designs we now see. There are various ways in which we can add CSS to our documents and they are:

  • Inline CSS

  • Internal CSS

  • External CSS.

INLINE CSS

Inline CSS is used inside the HTML tag. It is used to style that particular HTML element. This is usually cumbersome especially when you have many HTML elements you would like to style. AS you would have to type the particular style for each HTML tag and not to forget it makes the code looks very messy.

Here is an example of what Inline CSS looks like

<p style="color:red;>
Inline CSS
</p>

The above inline CSS is used to change the color of the paragraph to red

INTERNAL CSS

Internal CSS is used in the HTML document but not inside the particular HTML tag. It is placed inside the head tag of the HTML document. Every CSS will be typed inside the Style tag

Example of what Internal CSS looks like:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Type of CSS</title>

    <style>
        p{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <p>
        Internal CSS
    </p>
</body>
</html>

EXTERNAL CSS

External CSS is exactly like internal CSS but the only difference between them is that Internal CSS is inside the HTML document while the External CSS is placed in another document and is linked to the HTML document using a link tag.

Example of External CSS is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Type of CSS</title>
   <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <p>
        External CSS
    </p>
</body>
</html>

Here the link tag is using a Stylesheet called tyle.css in our CSS folder.

##WHICH OF THEM IS THE BEST

External CSS is actually highly recommended as it makes the code not look too messy.

Inline CSS can be used when testing a particular style on a particular tag. Inline CSS has the highest priority meaning if you use both an Inline and an External CSS on a particular tag, the inline CSS will be displayed.

2Articles1WeekHTML5HTMLCSSBeginner Developers