How to style an HTML webpage


Styling a webpage is done by setting up rules that describe how the different elements of the document should be presented. This can be done in three different ways. You can use inline style, embedded style and/or external style sheets, to style your webpage. Let us look at them all as we style the same HTML element.

CSS: Cascading style sheets

Cascading style sheets (CSS), is the language we use to describe how we want to present our webpage. Without CSS, a webpage will in most cases still be a readable with very basic styles that ensures it is still somewhat readable. In this post we are going to apply a very basic layer of styling to demonstrate the three ways we can do this.

The styling we are going to apply is a font size of 20 pixels in height, and the text color blue. The two rules we will use to apply this style is the same for all three methods; font-size:20px, and color:blue;.

Turning this plain webpage:

Hello, World!

Into this fantastic webpage:

Hello, World!

Ok, I admit that the change is not that dramatic. Since we are not learning how to become a designer in this post, the styling will be kept to a minimum so we do not deviate from the topic, how to style a HTML webpage.

The HTML template

For this post I will style a Paragraph <p></p> with a font size and a color. I encourage you to follow along, it will be quite a simple excercise. If you have never written a line of code before, check out how to get started in only 5 minutes in my post Create an HTML webpage in 5 minutes.

We need a HTML template which can be used as the base to style our paragraph. Here is a very standard starting HTML document which will work well for this.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello, World! Please style me</p>
</body>
</html>

We now have our all the HTML needed, and we are ready to start styling.

Inline styling

Inline style is written directly inside the HTML element you wish you wish to style. Below you can see that we have added a style attribute to the paragraph tag <p style="... which contains the two CSS rules we mentioned earlier.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size:20px; color:blue;">Hello, World! Please style me</p>
</body>
</html>

Inline styling is limited in that it can only address a single tag at a time. This is great for manipulating single target styling using JavaScript, but inline style falls short for when targeting multiple tags.

Embedded styling

Embedded styling takes the styling a step further. Below you can see that we have now created a style tag <style type="text/css"> in the <head> of the document. Inside the style tag we can target which element to style by with a type selector, p in this case, and adding the two rules for font and color inside curly braces.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
font-size:20px;
color:blue;
}
</style>
</head>
<body>
<p>Hello, World! Please style me</p>
</body>
</html>

Embedded styling helps us manage our style by assembling it in once place. It lets us target any number of tags with only a single rule definition. Consider a document with 20 <p> tags. Having to change the font size and color in 20 places, which would be the case with inline style. With embedded styling we can define a single rule once which targets all <p> tags. This makes everyhing easier to manage.

Embedded is useful for small webpages, or demo pages that you wish to keep concise. Once we introduce multiple pages however, embedded pages become cumbersome to manage since you would have to update styling on each page of your website.

External styling

Enter External stylesheets. There is a reason why external stylesheets are the industry standard. External stylesheets work like embedded style, but we link to it and define it in its own file. This means that we can write all of our rules in a single file, and just link to it from all the webpages that you want the styles to affect.

Having you CSS defined in a single place makes changes easier as well. Now when we want ro update the style of all <p> tags, we can change it in a single file. All the files that link to this sheet will now have the updated style without doing anything else.

To demonstrate this we now need two files. Let us imagine the file with your HTML was called index.html, and we call our new external stylesheet style.css. First we must add the style rules to our new stylesheet style.css.

style.css

p {
font-size:20px;
color:blue;
}

Next we link to the external stylesheet, style.css in the <head> of our HTML document. If you have multiple HTML pages, you will also need to link to the stylesheet there as well.

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/stlye.css">
</head>
<body>
<p>Hello, World! Please style me</p>
</body>
</html>

Note that the href="/stlye.css" is the path to where the external stylesheet is located in your project. This example assumes that you have a folder which contains the two files, index.html and style.css.

If in doubt, use external stylsheets

Now we have learned the three different ways of styling our HTML markup. Three methods each with their own advantages and drawbacks. If you are not sure which one to chose, I would recommend using external stylesheet(s) from the start. They give the best scalability, and are easier to maintain since we only write CSS in the file.

You can even create multiple stylesheets if you wish separate your style rules even further. This can be relevant on large projects with many CSS rules. In fact, most large-scale web applications will have 10's even 100's of stylesheets, each controlling the style rules of single components. More on that another day.