HTML Styles

HTML style attribute is used to style the HTML elements such as color, font size, and more. There are mainly three methods that exist that support HTML styles. These are namely Inline styles, Embedded style, and External stylesheet.

CSS Inline style

-Inline style can be done by inserting the style attribute in the HTML start tag and then writing style property and value within the style attribute. Each property of style is separated with a semicolon(;).

This is generally bad code practice since Each property: value pair is separated by a semicolon (;).All style properties and values should be in one line and separated with semicolons. It does not have a line break and this is a big problem.

    
    <h2 style="color:grey;font-size: 20px;">Inline style concept </h2>

When any website contains more than one web page then it is very tedious work during code update after a long time. Because it takes more time due to having more than one embedded style exist on every web page. Hence not focus more on this method and use an external style sheet. An external style sheet is more flexible and takes less time to update any CSS code after the requirement.

Source Code

          <h2 style="color:grey;font-size: 20px;">Inline style concept </h2>

Try it now

Note: In this example CSS inline style is used inside the HTML element style attribute.

Embedded style

Embedded style sheet can be applied within the HTML <head> section of the HTML document.

    
   h5{color:green;font-size: 20px;}

Source Code

          h5 {
  color: green;
  font-size: 20px;
}

Try it now

Note: In this example CSS embedded style is applied inside the HTML <head> section.

External style sheet

External style sheet can be applied using <link> element and this link placed within opening <head> and cloasing </head> section of the HTML web page.

Please note that href attribute refers to the address of the external style sheet. This external style sheet consists of various CSS properties and values.

       
  <head>
<link rel="stylesheet" type="text/css" href="external-style.css">
  </head>

Source Code

          <head>
   <link rel="stylesheet" type="text/css" href="../code-support/css/stylesheet/external_style.css">
</head>

Try it now

Note: In this example CSS external style sheet is applied inside the HTML <head> section via <link> element.

Which one is the best HTML style and why?

External style sheet style is best among the mentioned HTML styles. Since it is a separate style file and contains all the CSS of the website. Working on a single file is much easier than more than one file because it takes less time while others take much time.

These external style sheets can also be imported within another style sheet.

       
      <style type="text/css">  @import url('url of external style sheet'); h1{   color: red;   font-size: 20px;    font-weight: bold;  }
      </style>

Example

Source Code

          @import url("../code-support/css/stylesheet/external_style.css");
h4 {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

Try it now

Note: In this example, the external style sheet has been imported from another style sheet.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4