Tag Archives: sheets

Using external style sheets (CSS)

In the previous tutorial, we look at how to use inline styling and internal style sheets to change the colour of text and apply some basic CSS formatting to a web page. However, what if you want to apply a theme to several pages across a web page? Won’t it be difficult to manually update the styling in every single page if you want to modify the theme? Well, we can use external style sheets to solve that problem.

By using external style sheets, we store the CSS properties and values inside a separate file eg. mystylesheet.css and we reference that style sheet in every HTML file we want to apply the style to. The image below shows how to reference a CSS file:

Referencing an external style sheet.
Referencing an external style sheet.

The image below shows how to add CSS properties and values to an external style sheet (.css file):

An external style sheet (.css file).
An external style sheet (.css file).

Watch the video below to see how to use external style sheets and then scroll down to see the sample code.

The sample code for the HTML file:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage using external stylesheets</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
 
<body>
 <h1>This is a heading.</h1>
 <h2>A smaller heading</h2>
 <p>This is a paragraph</p>
</body>
 
</html>

And here is the code for the external style sheet (the stylesheet.css file):

h1{
 color:red;
 border: solid 1px;
}
 
h2{
 background-color:yellow;
}
 
p{
 color:blue;
}

Using CSS to style your webpage

CSS stands for Cascading Style Sheets and is a style sheet language that is used to describe the look and style of web pages. CSS can be used to create a theme by modifying the layout, colours, and fonts.

Without any special styling or formatting, the web pages that we create don’t look very exciting. That’s where CSS comes in! We can use CSS to change the colour of text and backgrounds, use different font styles, and change the layout and overall theme of our site. This tutorial explains how to use CSS in a webpage.

There are three different ways of applying CSS:

  • Inline styling – the style attribute is applied within the HTML tag
  • Internal style sheet – style attributes are applied to selectors inside the head section of a webpage
  • External style sheets – style attributes are applied in a separate CSS file that can be used across a website

Below is an example of how to use inline styling within a HTML tag:

Inline styling
Inline styling

Below is an example of how to place the styling within the style tag inside the head section of a webpage:

Adding CSS using the style tag in the head section.
Adding CSS using the style tag in the head section.

This video tutorial will focus on using inline styling and internal style sheets. The next tutorial will explain how to use external style sheets. Watch the video below to see how to use CSS and then scroll down to see the sample code.

The sample code below shows how to use inline styling:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <h1 style="color:red">This heading is red.</h1>
 <h2 style="color: #FE2EF7; border: solid 1px">This heading is pink with a border</h2>
 <p style="color:blue">This text is blue.</p>
 <p style="color:green; background-color: yellow">This text is green on a yellow background</p>
</body>

</html>

The sample code below shows how to use an internal style sheet:

<!DOCTYPE html>
<html>
<head>
 <title>Adding CSS to a webpage using internal stylesheets</title>
 <meta charset="utf-8"/>
 <style type="text/css">
 p{
 color:blue;
 }
 </style>
</head>

<body>
 <p>This is a paragraph of text. Because a style has been applied using the p selector, this paragraph will be blue.</p>
</body>

</html>

Tip:

The sample code for inline styling uses the HTML colour code #FE2EF7 for the colour pink. You can use the names of colours  for basic colours such as ‘blue’ or ‘red’ but for other specific colours you will need to use the HTML colour code (a combination of letters and numbers after a hashtag). You don’t need to remember all the colour codes but it is good to remember  #000000 for black and #FFFFFF for white. You can see all the colour codes here.