How many ways can you insert CSS in HTML?

Blog  |     |  

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

<!DOCTYPE html>
<html>
   <body>
      <h1 style="color:blue;margin-left:30px;">This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<html>
   <head>
      <style>
         body {
         background-color: linen;
         }
         h1 {
         color: maroon;
         margin-left: 40px;
         }
      </style>
   </head>
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

 External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
   </head>
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the “mystyle.css” looks:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value and the unit (such as margin-left: 20
px;). The correct way is: margin-left: 20px;

Icon: Warning Finding Source of Errors in CSS:

When your styles are not applied as you expect or parts of the page vanish, start looking for errors in the source code.

Common Errors:

  1. Spelling: Critical  everywhere! The browser will NOT guess what you meant.
    • Tag names (H! is not H1.)
    •  Property names (textalign is not text-align)
    • Values available (text-align cannot have value ‘top’. But vertical-align can.)
    • Class name or ID when applied must match (mayclass is not myclass).
  2. There must be a colon : between the property and its value and a semicolon ; at the end after the value, like
    float:left; margin-right:5px;
  3. No space between the number and the unit of measure. Write 10px and not 10 px.
    Some browsers will just ignore the style if there is a space in between the number and the unit.
  4. Close all of the parts: quotes ” around values, the final brackets like > or } for tags and styles, final tags like </h1> or  </style>
  5. Duplicate selectors: If you style the same property for an element or class twice, the browser will have to decide what to do. Making browsers think is risky! The results may be very different from browser to browser and not at all what you meant. The order becomes important again.
  6. LINK an external style sheet to the web page or you will not be able to use its styles on that page.
  7. URL in the LINK for an external style sheet must be correct!
Spread the love