Best Practices for Preparing Your Markup for Styling

Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write markup that makes it easy to poinpoint specific elements?

  • Apply classes liberally and consistently. Use classes for items that should be aligned in one direction or the other, and for any elements that appear repeatedly on a single web page.
  • Apply IDs to items that appear only once on a web page. For example, use an ID on the div that contains your web page content, on the ul that that contains the navigation menu, and on the div that contains your web page header.

Ways of Linking CSS Rules to an HTML Document

There are three ways of adding CSS rules to a web page:

  • Inline styles
  • Internal stylesheets
  • External stylesheets

In the vast majority of cases, external stylesheets should be used. However, there are instances where inline styles or internal stylesheets may be used.

Inline Styles

Inline styles are applied to specific HTML elements. The HTML attribute style is used to define rules that only apply to that specific element. Here’s a look at the syntax for writing inline styles.

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

That code would cause just that heading to render with red underlined text and 10 pixels of padding on all sides. There are very few instances where inline styles should be used. In nearly all cases they should be avoided and the styles added to a stylesheet.

Internal Stylesheets

The earlier examples in this tutorial make use of internal stylesheets. An internal stylesheet is a block of CSS added to an HTML document head element. The style element is used between the opening and closing head tags, and all CSS declarations are added between the style tags.

We can duplicate the inline styles from the code above in an internal stylesheet using this syntax.

        h1 {
            color: red;
            padding: 10px;
            text-decoration: underline;
    <h1>Example Heading</h1>

That code would produce the same results as the inline styles. However, the benefit to using internal stylesheets rather than inline styles is that all h1 elements on the page will be affected by the styles.

External Stylesheets

External stylesheets are documents containing nothing other than CSS statements. The rules defined in the document are linked to one or more HTML documents by using the link tag within the head element of the HTML document.

To use an external stylesheet, first create the CSS document.

Save with a name ending in .css such as styles.css
h1 {
    color: red;
    padding: 10px;
    text-decoration: underline;

Now that we have an external stylesheet with some styles, we can link it to an HTML document using the link element.

<link rel="stylesheet" type="text/css" href="styles.css">
    <h1>Example Heading</h1>

When this HTML document is loaded the link tag will cause the styles in the file styles.css to be loaded into the web page. As a result, all level 1 heading elements will appear with red text, underlined, and with 10 pixels of padding applied to every side.

When to Use Each Method

In nearly all cases external stylesheets are the proper way to style web pages. The primary benefit to using external stylesheets is that they can be linked to any number of HTML documents. As a result, a single external stylesheet can be used to define the presentation of an entire website.

Internal stylesheets may be used when designing a simple one-page website. If the website will never grow beyond that single initial page using an internal stylesheet is acceptable.

Inline styles are acceptable to use in two instances:

  1. When writing CSS rules that will only be applied to a single element on a single web page.
  2. When applied by a WYSIWYG editor such as the tinyMCE editor integrated into a content management system such as WordPress.

In all other cases, inline styles should be avoided in favor of external stylesheets.

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

Responsive Web Design – Modern Website Code for Beginners

When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile…

Beginner’s Guide to React

React is a JavaScript library that aims to simplify the development of visual interfaces. Developed at Facebook and released to the world in 2013, it drives some…

Server-Side Rendering (SSR) Made Easy With Angular Universal 9+

The Angular team recently, announced a pre-render builder in Angular Universal, in Jan 2020 to be specific. Angular Universal is for server-side rending (SSR); with these new…

Why Should I Use HTML5?

The most straight-forward answer to that question is simply that it is the current, “right” version of the language. But some people seem unconvinced by this fact….

What is HTML5?

HTML5 is the latest specification of the HTML language, and represented a major break with previous markup practices. The purpose of the profound changes to the language was…