Types of CSS

Types of CSS | Web Development

In the previous article, we have learned about the basics of CSS and we have also discussed that there are three types of CSS or we can say there are three ways in which we can write CSS on our HTML page.

So let’s see each type in detail and how each type works:

  • Inline CSS: Inline CSS by name suggests that the styling of the HTML element will be in the same line as the element. We can do this by using the style attribute in the element itself. Let’s take an example to understand it properly:
<!DOCTYPE html>
<html>
<body>
	<p style = "color:#007A4D; font-size:30px; text-align:center; background-color: #99ffeb;">Developers Dome</p>
</body>
</html>

Output:

Developers Dome

  • Internal CSS: Internal CSS is used when the entire HTML document has to be styled uniquely and In this, the style sheet is embedded in the <head> section of HTML document using the <style> element. So, it is also called Embedded CSS.

Let’s take an example to understand Internal CSS more clearly:

<!DOCTYPE html>
<html>
<head>
<style>
body {
      background-color:  #99ffeb;
}

h1 {
    color: #007A4D;
    text-align:center;
}

p {
   color: green;
   text-align:center;
}
</style>
</head>
<body>

<h1>Developers Dome</h1>
<p>Junction for all coders</p>

</body>
</html>

Output:

Developers Dome

Junction for all coders

  • External CSS: In External CSS as mentioned in the name, an external style sheet is linked to the <head> section of the HTML document. The sheet is linked using the link element with href attribute which contains the exact location of the style sheet.

Let’s take an example to understand External CSS:

HTML Document:

<!DOCTYPE html>
<html>
<head>
      <link rel="stylesheet" href="style.css"/>
</head>
<body>

<h1>Developers Dome</h1>
<p>Junction for all coders</p>

</body>
</html>

CSS style sheet (style.css):

body {
      background-color:  #99ffeb;
}

h1 {
    color: #007A4D;
    text-align:center;
}

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

Output:

Developers Dome

Junction for all coders

Hope this article will guide you to recognize all about the types of CSS that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.

Leave a Reply