HTML Styles

Style sheets describe how documents are presented on screens, in print or in other media.

CSS (Cascading Style Sheets) has been developed to improve the appearance of HTML pages. Using CSS, you can specify the page layout, the amount of white space between text lines, the colors for the text and backgrounds, the font size and more things.

Without CSS and With CSS

To show you the difference between for not using CSS and using CSS in an HTML document, I provided the both example below.

Without CSS

Although in this document, there are header, navigation, footer, sidebar content but it’s not clear to users for not using CSS.

An HTML page without CSS

An HTML page without CSS

With CSS

And after using CSS, now it’s clear to users which one header, which one footer, which one sidebar, even the design is more attractive to the users.

An HTML page with CSS

An HTML page with CSS


The Methods of Using Styles

There are three methods of using style information to an HTML document (from the highest to lowest priority).

  • Inline styles
  • Internal style sheet
  • External style sheet

Inline Styles

Inline styles are used into HTML elements directly through the <style> attribute. The attribute is placed into the start tag and includes a series of CSS property and value pairs like ─

style="property: value"

Each “property: value” pair is separated by a semicolon (;).

Example Try this Code
<h1 style="color:red">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="background-color:black; color:white;">
  Some text with black background.
</div>

Inline styles are the highest priority of the three methods. Even the style sheets of other two methods can be overridden with this one.

Warning: Using inline styles are generally considered as a bad practice. Because they only work on that element you used for. So this should be used only when you are interested to make a particular change in any HTML element.

Internal Style Sheet

Internal or embedded style sheet only affect the document they are embedded in. So we can apply this style sheet rules to a single document.

Internal style sheet rules are put in the <head> section of the document using the <style> tag.

Any number of <style> elements are permitted in the <head> section.

Example Try this Code
<head>
  <style>
    body {background-color: gray;}
    h1 {color: yellow}
    p {color: white;}
  </style>
</head>

External Style Sheet

An external style sheet contains all the style rules in a separate document that can be included in all the HTML pages. The external style sheet is a good idea to be used to change the look of an entire website.

There are two ways to include an external style sheet ─

  • Using <link> element.
  • Using @import rule.

Linking External Style Sheets

An external style sheet can be included using <link> element in the <head> section.

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

Description:

The <link> element above is specified with the following attributes:

  • The value of href attribute is the location of a style sheet file. The value of href is a URI.
  • The value of the type attribute indicates the language of the linked (style sheet) resource. This allows the user agent to avoid downloading a style sheet for an unsupported style sheet language.
  • The value of rel attribute specifies that the style sheet is persistent, preferred, or alternate.

Importing External Style Sheets

The @import rule is another way for including an external style sheet. Even other CSS rules can be included in the <style> element with this @import rule.

Any number of <link> elements and @import rules are permitted in the <head> section.

<head>
  <style>
    @import url("css/style.css");
    p {
      color: red;
      font-size: 14px;
    }
  </style>
</head>
Warning: Make sure the @import rules are included at the beginning of the style sheet, otherwise any style rule used in the imported style sheet can conflict with other rules.