What are HTML Styles

 | 

Styles in HTML tell the browser how the HTML content or the elements must be displayed. HTML styles can be defined either using inline styling or embedded styling or using an external style sheet.

Styles in HTML

HTML lacks behind when it comes to the presentation of the web documents. HTML styles are a set of rules that tell the browser on how an HTML element is displayed to the user.

Adding styles to HTML elements can be implemented by three methods.

Note that the inline styling has higher priority over the embedded way of styling and embedded styling has higher priority over the external style sheet way of styling.

This means if an HTML element is styled by all the above methods, the browser chooses the rules of the inline styling as its priority is much higher than the later.

Inline Styling

Inline styles are used to apply styling to the HTML elements by applying CSS rules directly to enclosing tag of the HTML element such as <p> or <div> by using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each property: value pair is separated by a semi-colon ; and it is advised that all the property: value pairs must be written in a single line.

All the suitable CSS rules can be applied to the HTML element using the inline styling. The following example showcases the inline styling to change the color, font size, font style of HTML text elements.

Sample Code

<h1 style="color:red;font-size:18px;">This is a heading.</h1>
<p style="color:green">This is a paragraph.</p>
<p style="font-style:italic">This is another paragraph.</p>

Output

This is a heading.

This is a paragraph.

This is another paragraph.

Inline styling is generally considered a bad practice as the style rules are directly embedded inside the HTML element which makes the presentation of the web document mixed. Inline styling is also considered bad for SEO of the web page.

Embedded Styling

Embedded style sheets are also known as internal style sheets. They only affect the document they are embedded with.

Embedded style sheets are usually defined in the <head> section of the HTML document. They can also be defined at the end of the <body> section.

There is no limit on the number of <style> elements that are defined in an HTML document.

Sample Code

<head>
  <style>
     p {color: red;
     background-color:#00fa9a;}
  </style>
</head>
<body>
  <p>This is a red line</p>
</body>

Output

This is a red line

Note that embedded style sheets are only used when styling is needed on specific pages but not on every page as the embedded styling isn’t always a good SEO practice.

External Style Sheets

Using external style sheet is the best way if the styling is to be done on multiple web pages. An external style sheet holds all the styling rules.

External style sheets can be attached to an HTML document in two ways.

Linking External Style Sheet

Any external style sheet can be linked to the HTML document using <link> tag in the <HEAD> section of the HTML document.

Sample Code

<head>
   <link rel="stylesheet" type="text/css" href="/static/sample/css/style.css">
</head>
<body>
   <p>This is a paragraph.</p>
</body>

Output

This is a paragraph.

Importing External Style Sheet

External style sheets can also be attached to the HTML document using @import statement. The @import statement instructs the browser to load the external style sheet. The @import statement is used within a <style> tag.

Sample Code

<head>
   <style>
       @import url("/static/sample/css/style.css");
    </style>
<body>
   <p>This is a paragaph.</p>
</body>

Output

This is a paragraph.

Any number of external style sheets can be attached to the HTML documents but it is suggested to use less number of external style sheets as many style sheets might hinder the page loading performance.

Foot Notes

Comments