HTML Style

HTML style applies to the HTML elements to make a better presentation layout. 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 style attribute in the HTML start tag and then write 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 property and value should be in one line and separated with semicolons. It does not have a line break and this is a big problem.

Statement   <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.

Example

General Syntax

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

Source Code

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

Code Explanation

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.

General Syntax

    <head>
   <style type="text/css">
      h5 {
         color: green;
         font-size: 20px;
      }
   </style>
</head>

Code Explanation

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 closing </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.

General Syntax

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

Code Explanation

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 mention 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.

Statement
   @import url('url of external style sheet'); h1{   color: red;   font-size: 20px;    font-weight: bold;  }

Example

General Syntax

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

Code Explanation

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

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS