🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Learn to Style HTML With Inline, Internal and External Sheets

Reading time 3 min
Published Jun 11, 2019
Updated Jan 21, 2020

TL;DR — There are three options for styling HTML elements. You can style HTML elements by using the inline CSS. The internal CSS is for styling whole pages. The external stylesheet can set rules for entire websites when you know how to link HTML to CSS.

Style HTML

Options for styling HTML elements

Inline CSS allows you to add styles to specific HTML elements.
The internal CSS stylesheet allows you to include CSS code in <head> section of a markup document.
External stylesheet works by linking a .css file, containing all the CSS rules, to an HTML document.

Inline CSS

You can use inline style CSS to modify HTML elements. It uses the style attribute.

Warning: inline CSS styling is not a good practice. It is difficult to manage and update. Additionally, combining HTML with CSS leads to messy and difficult-to-read code.

Example
<p style="color: blue;">This is a paragraph.</p>

Note: use inline CSS to make minor modifications to your elements. However, consider other practices as the main styling method.

Internal CSS

Another way to include CSS in HTML is to use an internal stylesheet. It contains CSS rules for the entire page. The <style> element contains a block of styling rules and is placed in the <head> element of HTML files.

Example
<head>
   <style>
      h1 {
         color: red;
         margin-left: 20px;
      }

      p {
         color: blue;
      }
   </style>
</head>

Note: this stylesheet is applied to style HTML documents, meaning that it changes individual pages. Pages styled with internal CSS load slower than with other options.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

External CSS

An external CSS style sheet is a separate file that contains a list of CSS rules and has the .css extension. You need to link it to an HTML document.

Example
h1 {
   color: red;
   margin-left: 20px;
}

p {
   color: blue;
}

How to link HTML to CSS after you created the external stylesheet?

You need to use the <link> element and put it in the <head> of HTML pages.

Remember: the .css file cannot have any HTML tags. Also, there is no set number for external CSS stylesheets that can be linked to HTML documents.

Cascading order

When you specify more than one CSS rule to an element, the style for that item follows the cascading rule. Number one has the highest priority:

  1. Inline style
  2. Internal and External stylesheets
  3. Browser default

The inline CSS style, defined by using the style attribute, overrides the style declared on the internal or external stylesheet for that element.

Tip: the cascading rule can be useful whenever you're using an external .css file on a few pages and need to tweak one or two elements.

Style HTML: useful tips

  • The best practice for styling HTML documents is the external stylesheet. It lets you set CSS rules for several files and is very easy to update.
  • You can use any text editor to create an external stylesheet. This process is similar to creating an HTML file.