Stylize Your Content: A Guide to Style Sheets

While having the ability to create content using HTML is powerful, so too is being able to stylize said HTML. This is where cascading styles comes in. We will briefly look at how the 3 methods of applying styles: inline, internally and externally. And we will take a look at some use cases where you might use a combination of the three.

Inline Styles

Inline styles may be the easiest to see as we apply the styles inline with the HTML. Let's look at an example:

<p style="font-weight: 700;">This is an example of some bold content.</p>

This example uses the font-weight style attribute and a weight of 700 (bold) to achieve this:

This is an example of some bold content.

While inline can be useful for a small specific singular use, it generally is better to use a class or id here instead and use a style sheet, either internal or external.

Internal Styles

Internal styles refers to a style sheet which is applied internally to a specific document, in this case a page. Internal styles appear in the head section of the page and the styles are reference in the document. Let's look at an example.

<p class="bold">This is an example of some bold content</p>

In this example, instead of declare the paragraph bold inline, we use a class name instead. Then in the head of the document we would use something like this:

<style>
p.bold { font-weight: 700; }
</style>

The beauty of separating the use of the style from being inline is that you can reuse the style and only need to make a global document change in one spot to affect the document.

External Styles

Building on from the Internal styles, external styles allows for the same styling to be applied across content, rather than within just a certain piece of content. The power here is the ability to use a single style across multiple pieces of content.

External styles are declared in the head of the page, as internal styles are, except the reference is to a external file. We do this using a self closing link tag.

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