Tag Archives: design

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.

Adding audio to a webpage

This tutorial explains how to add audio to a webpage using the HTML5 audio tag. Because this tag is new to HTML5, it may not be supported in some older browsers. It is also important to note that some audio file types may not be supported in different browsers.

At the time of writing this tutorial, the following browsers support these file types using the HTML5 audio tag:

  • Chrome: MP3, WAV, OGG
  • Internet Explorer: MP3
  • Firefox: MP3, WAV, OGG
  • Safari: MP3, WAV
  • Opera: MP3, WAV, OGG

Using MP3 files for audio would be the safest bet as it is supported by all the major browsers now. For this tutorial, I will demonstrate using the HTML5 audio tag with an MP3 file. You can get free audio files from a range of sources including the YouTube Audio Library and Freesound.

When you add audio to a page you can specify whether you want to allow the audio to automatically play, loop over, and if you also want to show or hide the audio player controls which will look like this:

audioplayer

The video below shows how you can use the HTML5 audio tag to add an audio file to a webpage. It also shows how to add controls and how to autoplay and loop audio files. Watch the video below and then scroll down to see the sample code.

The sample code below shows how to add an audio file to a webpage. All you need to do is replace the filename/filetypes with whatever you are using. You might also like to remove the autoplay, loop, or control features. Note that all three of these features are enabled in the example below.

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

<body>
<audio controls autoplay loop>
 <source src="your_audio_file.mp3" type="audio/mpeg"/>
 Your browser does not support the HTML5 audio tag. Consider updating to a newer browser.
</audio>
</body>

</html>

This tutorial video includes a portion of free music from the YouTube Audio Library. Music from the audio library can be used in your videos by you as long as you do not make it available, distribute or perform the music separately from your videos into which you have incorporated the music files, and as long as the music is not used in an illegal manner or in connection with any illegal content. Always read the terms and conditions.

Adding images to a webpage

This tutorial explains how to add images to your web pages using the HTML <img> tag. You can specify a number of attributes for an image including the following:

  • src – specifies the location or path of the image
  • width – specifies the width of the image
  • height – specifies the height of the image
  • alt – specifies alternative text to be displayed in case the image cannot load.

The structure of an <img> tag may be set out like the one below:

Here are a few important things to note:

  • You should aways use alt text in case the image cannot be loaded in the user’s browser

    This is what alt text looks like when an image can’t load:
    alttextAlt text often also shows up after a few seconds when the user hovers their mouse over an image.

  • The path and filename of the image specified in the src tag in your code must be exactly the same as the actual file
  • You should specify the width and height of the image so the correct space is set aside even if the image can’t be loaded
  • You can change the width/height of an image to make it smaller. However, it is a good idea to make the image the correct size in the first place to reduce the time it takes to download the image

Watch the video below to see how to use the <img> tag in your own web page and then scroll down to see the sample code.

This sample code shows how to add an image to a webpage. Copy this code into a new HTML file. Modify the width and height of the image in the code to suit your own image file and experiment with different size images.

<!DOCTYPE html>
<html>
<head>
 <title>My webpage</title>
 <meta charset="utf-8"/>
</head>
<body>
<img src="batman.png" alt="Batman" width="400" height="400"/>

<!-- Make sure you include the full file path of an image if it is located in a different folder eg. folder2/batman.png 
-->
</body>
</html>

How to make an image a link

If you want to make an image a link so that when the user clicks on image they are taken to another page, you can just place the image tag inside the link tag (instead of text for the link). As an example, the following code would take the user to ‘other_page.html’ when they click on the image which has the file name ‘your_image.png‘:

<a href="other_page.html"><img src="your_image.png"/></a>

After watching the video, answer the following questions for discussion before the next lesson:

  1. Which unit of measurement is used to specify the width/height of an image in the code? How could the use of this unit affect the way images are displayed on screens of different sizes?
  2. Are there any other units of measurement that can be used?
  3. What could cause an image to fail to load in a user’s browser?
  4. Why is it important to use images with smaller file sizes?
  5. What issues need to be considered before including images on a web page?
  6. Evaluate the effectiveness of using images to convey large amounts of information on a web page.

Now create your own web page using several of your own images combined with text. You can use the sample code above to get started.

Once you are ready to move on, click here to find out how to add audio to your web pages.

Creating lists in HTML

There are two different types of lists we will look at in this tutorial. The first type is an unordered list (bullet list) which is used to list items in no particular order. A bullet list is a dot-point list but you can customise the style of the list to use squares or arrows instead of dots, for example. The second type of list is an ordered list (numbered list) which uses numbers to order items in a list.

An unordered list looks like this:

Ordered list
Unordered list

An ordered list looks like this:

Ordered list
Ordered list

Unordered list items go between the <ul> and </ul> tags in the body section of your webpage. Ordered list items go between the <ol> and </ol> tags on your webpage. Each list item is surrounded by the <li> and </li> tags (you can use <li> in both unordered and ordered lists). Watch the video below and then scroll down to see the code. If you’d like to find out how to style lists with CSS code, you should check out the list styling tutorial.

The sample code below shows how to create ordered lists and unordered lists:

<!DOCTYPE html>
<html>
<head>
 <title>Lists</title>
 <meta charset="utf-8"/>
</head>

<body>
 <h3>My bullet list:</h3>
 <ul>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
 </ul>
 <h3>My numbered list:</h3>
 <ol>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
 </ol>

</body>

</html>

Paragraphs, line breaks and headings in HTML

In this tutorial we will look at some HTML tags that you can use to place text inside your webpage. All of these tags are used in the <body> section of the webpage. The following HTML tags (also known as elements) are discussed in this tutorial:

  • The <p> tag is for paragraphs
  • The <br/> tag is for line breaks
  • The <h1> to <h6> tags are used for different size headings

Watch the video below or scroll down to read the instructions on how to create paragraphs, line breaks, and headings.

The paragraph tag

The first tag we will use is the <p> tag to create a paragraph. Paragraph text goes between the <p> and </p> tags. Paragraphs are separated by a space.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paragraph example</title>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

The HTML code above would tell you web browser to display two paragraphs like this:

Two paragraphs
Two paragraphs

The line break tag

To put text in your webpage you don’t even need to use a <p> tag. You can actually just type the text straight in. However, if you add new lines for text inside your HTML document, it won’t actually show a new line in the web browser – all your text will be on one line. If you want to create a new line, then use the line break <br/> tag. This tag will create a new line where the text will continue on.

Use the code below to see how the <br/> tag adds a new line. Two things to note: The <br/> tag is a single tag so it does not require an opening and close tag combination. The <br/> tag does not add spacing between lines like the paragraph tag does.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line break example</title>
</head>
<body>
This is a line of text.<br/>This is another line of text.
</body>
</html>

You can see the difference between using line breaks and paragraphs below. Note that there is no spacing between the text that uses a line break, but there is space between the paragraphs.

Using line breaks
Using line breaks

The heading tags

There are a number of different tags you can use to create a heading because there are a number of different heading sizes. The largest heading size tag is <h1> and the smallest is <h6>. For example, if you want to create a large heading then you would place the text inside the <h1> and </h1> tags.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Headings examples</title>
</head>
<body>
<h1>This is the largest heading</h1>
<h2>This is a large heading
<h3>This is a medium heading</h3>
<h4>This is a small heading</h4>
<h5>This is a smaller heading</h5>
<h6>This is the smallest heading</h6>
</body>
</html>

This is what the different size headings would look like:

Headings of different sizes
Headings of different sizes