HtmlCssMonk

Types of CSS | Learn Basic CSS

desk, work, laptop

DESCRIPTION

CSS is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color, … etc property of elements on a web page.

Types of CSS

There are three types of CSS which are given below –

  • Inline CSS
  • Internal or Embedded CSS
  • External CSS

Inline CSS

Inline CSS contains the CSS property in the body section attached with element. This kind of style is specified within an HTML tag using the style attribute.

Example –

<!DOCTYPE html>
<html>

<head>
  <title>Inline CSS</title>
</head>

<body>
  <p style="color:#252725; font-size:50px; 
                font-style:bold; text-align:center;">
    HtmlCssMonk
  </p>
</body>

</html>

This Code will produce the following result on your webpage –


Disadvantages of Inline CSS

  • You cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
  • These styles cannot be reused anywhere else.
  • These styles are tough to be edited because they are not stored at a single place.
  • It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
  • Inline CSS does not provide browser cache advantages.

Internal CSS

Internal CSS contains the CSS property in the head section. This kind of style is specified when a page is designed uniquely.

Example –

<!DOCTYPE html>
<html>

<head>
  <title>Internal CSS</title>
  <style>
    .main {
      text-align: center;
    }

    .HCM {
      color: #2e2f2e;
      font-size: 50px;
      font-weight: bold;
    }

    .monk {
      font-style: bold;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="HCM">HtmlCssMonk</div>

    <div class="monk">
      Learn Like a Monk
    </div>
  </div>
</body>

</html>

This Code will produce the following result on your webpage –


External CSS

External CSS contains a CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages.

Example –

Below given file is a CSS file –

body {
  background-color: rgb(154, 167, 207);
}
.main {
  text-align: center;
}
.HCM {
  color: #454745;
  font-size: 50px;
  font-weight: bold;
}
#monks {
  font-style: bold;
  font-size: 20px;
}

Below given file is a HTML file –

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="monk.css" />
</head>

<body>
  <div class="main">
    <div class="HCM">HtmlCssMonk</div>
    <div id="monks">
      Learn Like a Monk
    </div>
  </div>
</body>

</html>

This Code will produce the following result on your webpage –


Next topic – Selectors in CSS

Previous topic – Introduction to CSS


Leave a Comment

Your email address will not be published. Required fields are marked *