Tag Archives: style

Adding navigation menu buttons to your web page

In this tutorial you will learn how to add buttons to improve your navigation menu using CSS. The menu buttons will change colour when the mouse hovers over them or when a page has been visited.

This tutorial also provides you with a CSS layout template that you can use to add a header, content area, and footer in addition to the navigation menu. You can read through the page to see how each section of the code works or jump down the page to see the entire HTML and CSS code.

This is what the web page layout looks like (click the image to see the live site):

css_layout_buttons
CSS layout with menu buttons – click the image to view the live web page

This is what the menu hover effect looks like when the user’s mouse hovers over a button:

menu_gif

Step 1 – Adding the menu links to the HTML code

The first step to creating the navigation is to add the links to the other web pages on your site in the HTML code of the web page. The menu will be inside a div with an ID of “nav”. The links on the menu will then be inside an unordered list – each link will ne an individual list item. Here is what the HTML code looks like for the nav div:

<div id="nav">
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="support.html">Support</a></li>
     <li><a href="contact.html">Contact us</a></li>
  </ul>
</div>

Step 2 – Adding the CSS code for the nav div

From here you need to add the CSS code that will style this menu. The nav div will be the first part that we will add CSS code for. The CSS code for the nav div below includes a dark blue/purple background colour, a height of 300 pixels and width of 150 pixels (this could be changed to a % value too). It is also set to float: left so that the menu is on the left side but this could be left out if you want a horizontal menu. Lastly, 5 pixels of padding is added.

#nav{
 background-color:#334a94;
 height:300px;
 width:150px;
 float:left;
 padding:5px;
}

Step 3 – Adding the CSS code for the unordered list

Then we add the style information for the list <ul> element. The list-style-type is set to none so that there are no bullets (dot points) on the list. The width of the unordered list is set to 100% so it takes up all of the width of the div, and the background colour is set to a dark blue/purple colour here. You could add margin and padding if you want or leave them as 0.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

Step 4 – Adding the CSS code for links inside each list item.

Here we add a style that will apply to any link that is a list item on a list. Remember, the <li> tag is used to create list items and the <a> tag is used for links. For this style, we change the font to Calibri, size 14 with a font-style of none. Display is set to block (change to inline if you want a horizontal menu), the colour of the text is white, some padding is added, and text-decoration is set to none so that the links are not underlined.

li a {
  font-family:Calibri;
  font-size: 14pt;
  font-style:none;
    display: block;
    color: #FFFFFF;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

Step 5 – Add the CSS code for visited links

By adding the “li a:visited” CSS code, we are applying a style to only links on a list that link to a page that has been visited by the user.

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

Step 6 – Adding the CSS code for hover links

We can apply a style to links when the mouse hovers over a link (button). On this menu, we have applied a style that will change the background colour of a button to a light purple colour and the font colour to black whenever the mouse hovers over a button.

li a:hover {
    background-color: #786ED4;
    color: #000000;
}

And that’s it! You can change the code to suit your theme and try making a horizontal menu instead of a vertical menu. If you want the entire HTML code and CSS code you can copy it below.

The entire HTML file code:

<!DOCTYPE html>
<html>
<head>
 <title>Basic CSS Layout</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>
 
<div id="header">
 <h1>My website</h1>
</div>
 
<div id="nav">
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="support.html">Support</a></li>
     <li><a href="contact.html">Contact us</a></li>
  </ul>
</div>
 
<div id="section">
 <h2>Welcome to my website</h2>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
 
<div id="footer">
 Copyright....2015.
</div>
</body>
</html>

The entire CSS file (theme.css) code

#header{
 background-image:url("background.png");
 background-color:#334a94;
 height:100px;
 color:#FFFFFF;
 text-align:left;
 padding-left:20px;
 padding-top:20px;
 font-family:Arial;
}
 
#nav{
 background-color:#334a94;
 height:300px;
 width:150px;
 float:left;
 padding:5px;
}
 
#section{
 width:500px;
 float:left;
 padding:10px;
}

h2{
  font-family:"Tahoma";
}

p{
  font-family:"Palatino Linotype";
}
 
#footer{
 background-color:#334a94;
 color:#FFFFFF;
 clear:both;
 text-align:center;
 padding:20px;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #334a94;
}

li a {
  font-family:Calibri;
  font-size: 14pt;
  font-style:none;
    display: block;
    color: #FFFFFF;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a:visited {
    background-color: #4CAF50;
    color: #FFFFFF;
}

li a:hover {
    background-color: #786ED4;
    color: #000000;
}

Note that for the header section a background image is specified. If you do not have a background.png file in the same directory as the CSS code, then the image will not appear but the dark blue/purple background colour will show instead. Click here if you’d like to download a blue/purple gradient background image to use as your header background. easter_egg_button

Linear gradients

In this tutorial you will learn how to add a linear gradient background to a div. A linear gradient is where one colour gradually changes into another colour.

A linear gradient can change colours gradually from left to right, right to left, top to bottom, or the bottom to top of a div. A gradient involves at least two different colours but can include multiple colours. Below is an example of a linear gradient that involves three colours (dark green, yellow, light green).

Screen Shot 2015-05-14 at 8.25.45 pm

The example above is obviously a dramatic example. Make sure you use colours that work well together and that work well with the rest of the theme on your website. Using different shades of a colour for a gradient can be used to give a div a little depth or a nice shadow effect if used effectively.

Watch the video below to see how to create linear gradients and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Linear gradients</title>
 <link rel="stylesheet" href="resources/stylesheet14.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners and a linear gradient.</p>
 </div>
</body>
</html>

Here is the sample CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
 background-image:linear-gradient(to bottom, #175E0C, #DBF022, #37DE1C);
}

Rounded corners on a div

This tutorial explains how to add rounded corners to divs on a web page. The image below shows an example of a div with rounded corners.

Screen Shot 2015-05-14 at 7.26.54 pm

You may like to add rounded corners to images, buttons, divs or other elements on your page. They don’t just have to be added to divs.

Watch the video below and then scroll down to see the sample code:

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Rounded corners</title>
 <link rel="stylesheet" href="resources/stylesheet13.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners</p>
 </div>
</body>
</html>

Here is the CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
}

Here is the CSS code that shows how to specify the border radius for each individual corner:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-top-left-radius:20px;
 border-top-right-radius:20px;
 border-bottom-left-radius:20px;
 border-bottom-right-radius:20px;
}

Styling lists

In one of the earlier tutorials we looked at how to create lists in a HTML web page. In this tutorial we will look at how to style both ordered and unordered lists using CSS code. We can style lists by changing circles to other shapes such as squares or arrows, or we can make lists ordered by letter instead of number, as an example.

Take a look at the example below where the order list has been styled to use letters instead of numbers, and the unordered list has been styled to use squares instead of circles.

Screen Shot 2017-04-14 at 4.41.21 pm

By adding the code display:inline; for the li element in your CSS code you can also show list items horizontally instead of vertically, as seen below.

Screen Shot 2017-04-14 at 4.43.34 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling lists</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet12.css" type="text/css"/>
</head>
<body>
 <h2>Cities</h2>
 <ol class="cities">
 <li>Sydney</li>
 <li>Melbourne</li>
 <li>Brisbane</li>
 <li>Perth</li>
 </ol>

 <h2>Countries</h2>
 <ul class="countries">
 <li>Australia</li>
 <li>France</li>
 <li>Canada</li>
 <li>New Zealand</li>
 </ul>
</body>
</html>

And here is the sample CSS code:

ol{
 list-style-type:lower-alpha;
 color:blue;
}

ul{
 list-style-type:square;
 color:green;
}

You can also add the following to your CSS code if you want list items to display horizontally:

li{
display: inline;
}

CSS nth-child selector

In a couple of the previous tutorials we looked at child selectors and pseudo classes. In this tutorial, we will move on to the nth-child selector. The nth-child selector is used to select every element that is the nth child of a parent. For example, you could apply a style to every 2nd paragraph (every 2nd child) in a div. When using the nth-child selector, ‘n’ can be a number, a keyword or a formula.

In the example below we can change the colour of every 5th paragraph inside a div called ‘mydiv’. Because ‘n’ is 5, every 5th element will be selected.

#mydiv p:nth-child(5){
 color:red;
}

Here is an example of a keyword being used to apply a background-color style to odd paragraphs inside a div:

#mydiv p:nth-child(odd){
 background-color:green;
}

Watch the video below to see some of the different numbers, keywords, and formulas that can be used with the CSS nth-child selector. Then scroll down to see the sample code.

Here is the HTML sample code:

<!DOCTYPE html>
<html>
<head>
 <title>CSS nth-child() selector</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet11.css" type="text/css"/>
</head>
<body>
 <div id="mydiv">
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 <p>The quick brown fox jumped over the lazy dog</p>
 </div>
</body>
</html>

And here is the CSS code showing just the ‘even’ selection example from the video:

#mydiv p:nth-child(even){
 background-color:black;
 color:white;
}

Make sure you watch the video to see more examples of the numbers, keywords and formulas you can use with the nth-child selector. This video is also available here on my YouTube channel.

Styling your links

By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.

The different link states that we can apply styles to are:

  • a:link (an unvisited link)
  • a:visited (a visited link)
  • a:hover (when the mouse is hovering over a link)
  • a:active (while the mouse is clicking on a link

Take a look at the animated example below. We have links which are orange and with no underline. However, when the user moves their mouse over these links they change to a dark blue colour and are underlined.

styledlinks

Watch the video below and then scroll down to see the sample HTML & CSS code and some further notes.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Styling links</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet10.css" type="text/css"/>
</head>
<body>
<h1>Styling links</h1>
<p>By default, links on your website will usually be blue and when the pages are linking to have been visited, the links will turn purple. However, we can customise the style of links. For example, we can change the colour or text decoration when a link has been visited, when the mouse hovers over a link, or when the mouse is clicking on a link.</p>
 
<a href="#one">One</a><br>
<a href="#two">Two</a><br>
<a href="#three">Three</a><br>
<a href="#four">Four</a><br>
<a href="#five">Five</a><br>
 
<h1> <a name="one"></a>One</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="two"></a>Two</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="three"></a>Three</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<h1> <a name="four"></a>Four</h1>
<p>The quick brown fox jumped over the lazy dog.</p>
 
<img src="resources/canada.jpg" width="300" height ="200"/><a name="five"></a>
 
 
</body>
</html>

And here is the CSS code:

a:link{
 color:#FF8000;
 text-decoration:none;
}
 
a:visited{
 color:#FF8000;
 text-decoration:none;
}
 
a:hover{
 color:#B45F04;
 text-decoration:underline;
}
 
a:active{
 color:#DF3A01;
 text-decoration:underline;
}

Just a few rules to take note of:

  • There is an order when specifying the style for several links
  • When specifying the style for several links, a:hover must come AFTER a:link and a:visited
  • a:active must always come after a:hover

Pseudo classes

Pseudo classes are used to specify a special state of a particular element. For example, the first letter in every paragraph could be a different size, or a link changes colour when the mouse cursor moves over it. Pseudo classes are built into CSS. You can’t just make your own pseudo classes. In this tutorial we will look at styling first letters and first sentences of paragraphs, how to style the first and last child of a parent, and also how to add content before and after the existing content in an element.

Watch the video below to see how to use pseudo classes in your CSS, then scroll down to see the sample code for the different examples.

The HTML code below is for the first example in the video (styling the first letter and styling the first sentence in paragraphs):

<!DOCTYPE html>
<html>
<head>
 <title>Pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet8.css" type="text/css"/>
</head>
<body>
 
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</p>
 
</body>
</html>

And here is the CSS code for the first example:

p:first-letter{
 font-size:150%;
 font-weight:bold;
 color:red;
}
 
p:first-line{
 color:blue;
}

This is the HTML code for the second example (styling first child and last child, and styling before and after):

<!DOCTYPE html>
<html>
<head>
 <title>More pseudo classes</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet9.css" type="text/css"/>
</head>
<body>
<p>This is a paragraph</p>
<div id="parent">
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
 <p>The quick brown fox jumped over the lazy dog.</p>
</div>
</body>
</html>

And here is the CSS code for the second example:

#parent p:first-child{
 color:green;
 text-decoration:underline;
 font-weight:bold;
}
 
#parent p:last-child{
 color:red;
 text-decoration:none;
 font-style:italic;
}
 
#parent p:before{
 content:"-->";
}
 
#parent p:after{
 content:"<--";
}

 

Child selectors

In this tutorial we will have a look at the parent/child relationship in CSS. All elements in an HTML document can be both parents and children, except for the body which can only be a parent. A div can be a child of the body or another div. A paragraph, heading, or other element can also be a child of the body or another div.

For example, if you place a <h1> heading inside a div, then the div is the heading’s parent and the body would be the div’s parent. This is called the parent/child relationship in CSS. We can use child selectors in CSS to apply styles to elements that are a child of another element such as a div or table. The image below illustrates the parent/child relationship in CSS.

The parent/child relationship in CSS.
The parent/child relationship in CSS.

The video below shows how to use child selectors in CSS to apply styles to child elements in an HTML web page. Watch the video below and then scroll down to see the HTML and CSS code.

Here’s the HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Child selectors</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet7.css" type="text/css"/>
</head>
<body>
<div>
 <p>This paragraph has a parent div.</p>
</div>
<p>This paragraph does not have a div as a parent.</p>
<div id="myparagraph">
 <p>This paragraph is a child of another div.</p>
</div>
<p>This is another paragraph without a parent div.</p>
</body>
</html>

And here’s the CSS code:

p{
 color:blue;
}
 
div p{
 color:red;
}
 
#myparagraph p{
 color:green;
}

ID Selector

In the previous tutorial, we looked at a few different types of CSS Selectors and we used the class selector to apply a style to all elements that used that class name. In this tutorial, we will look at the ID selector.

The ID selector is used when we want to apply a style to a single element. An ID is unique for each element. We can use a class for multiple elements but we should only ever use an ID for a single element. If we use the same ID for multiple elements, problems will start to occur especially when using JavaScript code.

An HTML element can be given an ID like in the example HTML code below:

<p id="blue">This text is blue</p>

The ID style is specified in the CSS code and a hashtag (#) is placed before the ID name.

#blue{
       color:blue;
}

Watch the video below to see how you can use IDs in your HTML and CSS. Then scroll down to see the sample code.

Here is the sample HTML code (it references a CSS file called stylesheet6.css in the resources directory):

<!DOCTYPE html>
<html>
<head>
 <title>IDs</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet6.css" type="text/css"/>
</head>
 
<body>
 <p id="blue">This is a blue paragraph</p>
 <p id="green">This is a green paragraph</p>
 <p id="red">This is a red paragraph</p>
</body>
 
</html>

And here is the sample CSS code:

#blue{
 color:blue;
}
 
#green{
 color:green;
}
 
#red{
 color:red;
}

We will be looking at more selectors in upcoming tutorials. Happy coding!

Background images and colours

This tutorial explains how to add a background image to divs and the body section of your web page. It also explains how to have fixed background images (that don’t scroll with the content of your web page) and change the placement of background images. You will also see how to add background colours behind background images.

In the example image below, there is a div inside the body of the page. The body has a background image (a greyish gradient) while the div has a light green background.

Screen Shot 2017-04-14 at 4.30.34 pm

Watch the video below and then scroll down to see the sample code.

Below is the sample code for the HTML file. If you add more content to your page so that the page can scroll down, you will notice that the background image doesn’t move because it is set to a fixed position in the CSS code. Note that the HTML code refers to CSS in a separate stylesheet file (called stylesheet4.css and stored in a resources folder).

<!DOCTYPE html>
<html>
<head>
 <title>Background images</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet4.css" type="text/css"/>
</head>
 
<body>
 
 <div>
 <h1>This is a heading</h1>
 <p>This is a paragraph</p>
 </div>
 
</body>
 
</html>

Here is the sample code for the CSS file (it’s called stylesheet4.css and stored in a resources folder):

body{
 background-image:url("nepal.png");
 background-color:blue;
 background-repeat:no-repeat;
 background-attachment:fixed;
}
 
div{
 width:450px;
 height:300px;
 background-image:url("canada.jpg");
 background-repeat:no-repeat;
 background-position:center top;
}

Divs and Spans

The div and span tags are made for CSS. A div is a section or a ‘division’ in a web page. A div can be thought of as a block. On the other hand, a span is used to group inline elements in an HTML web page. For example, a span could be used to change the style of just a few words from a paragraph or heading.

Divs and spans are unnoticed and do not change the way a page displays until you use CSS to apply styles to them. If a div or span exists in a HTML document but no style is applied to it in a CSS style sheet, then the appearance of the web page will not change.

Take a look at the example below. A div contains a line of text and some of that text is within a span. This means the text in the div can have a specific style (eg. green background and border), while text inside the span (which is inside the div) can have a different style (eg. light blue background and red border).

Screen Shot 2017-04-14 at 4.27.21 pm

The video below shows how to add divs and spans to a web page. It also shows how to change the border, background colour, width and height of a div; and how to change the text colour, background colour and text decoration inside span tags. Scroll further down to see the sample code.

The HTML code below shows how to add divs and spans. Note that the HTML code references an external CSS style sheet. Make sure you make a CSS file and give it the same name as the reference in the HTML file. The CSS file in this example is called stylesheet.css.

<!DOCTYPE html>
<html>
<head>
 <title>Div and Span</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet3.css" type="text/css"/>
</head>
 
<body>
 <div>
 <h1>This is a heading</h1>
 <p>This <span>is a</span> paragraph</p>
 </div>
</body>
 
</html>

The CSS code below shows how to specify the width and height of a div and how to add borders and background colours to divs, and text colour, decorations, and background colours to spans.

div{
 border:2px solid #00FF00; /* green */
 background-color:#FFFF00; /* yellow */
 width: 400px;
 heigth: 200px;
}
span{
 color:#2E64FE; /* blue */
 background-color:#FFFFFF; /* white */
 text-decoration:underline;
}

CSS Font properties

In this tutorial we will look at how to use CSS font properties in an external style sheet. We will look at how to change the font-weight (eg. normal or bold), font-style (eg. normal or italic), font-size (eg. 12pt, 10px, 1em or 100%), font-family (eg. Arial or Tahoma), font-variant (eg. normal or small-caps), and the line-height. We will also look at how to add comments to our CSS.

There are two ways that we can change the values for different font properties:

  • On multiple lines
  • On one line

When we specify the font properties over multiple lines, it will look like this:

Font properties on individual lines in CSS file.
Font properties on individual lines in CSS file.

When we specify the font properties on one line it looks like this (note that there are required property values and some order to the values – watch the video to find out more):

Font property values on one line in a CSS file.
Font property values on one line in a CSS file.

Watch the video below and then scroll down to find out more about web-friendly fonts and to see the sample code.

The sample code below is for a CSS file with the font property values specified on multiple lines:

p{
 font-family: Georgia;
 font-weight: bold;
 font-style: italic;
 font-size: 1em;
}

Here is the code for a CSS file with the font property values specified on one line – much neater, right? A line of comments has been added to show the order of the values.

p{
 font: italic bold 1em Georgia; /* font-style, font-weight, font-size, font-family */
}

And here is the code for the HTML file that references the stylesheet.css file:

<!DOCTYPE html>
<html>
<head>
 <title>CSS font properties</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
 
<body>
 <h1>This is a heading.</h1>
 <h2>This is a smaller heading</h2>
 <p>This is a paragraph</p>
 <p>This is a paragraph</p>
</body>
 
</html>

Font-size units:

It is important to have an understanding of the four different units for the font-size property. The four different units are:

  • em – the em is scalable and is used in web documents. An em is equal to the current font-size of the web document. For example, if the document size is 12pt, then 1em will be equal to 12pt. 2em would therefore be equal to 24pt. You can also use decimals eg. 1.5 em. Ems are popular on the web because they are mobile-friendly and are used in ‘responsive’ web design.
  • px – Pixels (px) are fixed-size units that are designed for media that will be read on a screen. 1 pixel is the equivalent of one dot on the computer screen. The downside of pixels is that they do not scale to fit mobile devices or screen readers for the visually impaired.
  • pt – Points (pt) are usually used for print media and are also fixed-size units that cannot scale to fit mobile devices. 1 pt = 1/72 of an inch.
  • % – Percent (%) unit is like the em unit as it is also scalable. Eg. the current font size of 12pt = 100%.

In summary, the em and % units are really what you want to use for the font-size property, especially if you wish to develop mobile-friendly or responsive websites.  Stay away from px and pt as they do not scale for mobile devices. Try getting used to using em and % instead. Find out more information on font-size units here.

And lastly, here is an overview of some of the web-safe fonts that you can include in CSS:

Serif fonts:

  • Georgia, serif
  • Palatino Linotype
  • Book Antiqua
  • Palatino, serif
  • Times New Roman

Sans-serif fonts:

  • Arial
  • Helvetica, sans-serif
  • Arial Black
  • Gadget sans-serif
  • Comic Sans MS
  • Impact
  • Charcoal
  • Lucida Sans Unicode
  • Tahoma
  • Geneva
  • Trebuchet MS
  • Verdana

Monospace fonts:

  • Courier New
  • Courier, monospace
  • Lucida Console
  • Monaco, monospace

Text shadows

Another effect you might like to use (not mentioned in the video) is a text shadow using the text-shadow property. The text-shadow property has four different attributes separated by spaces.

The first attribute is the horizontal shadow (how much the shadow is to the left or right of the text). A positive number (eg. 3px) will display a shadow to the right of the text and a negative number (eg. -3px) will display a shadow to the left.

The second attribute is the vertical shadow (how much the shadow is above or below the text – this can also be a positive or negative number).

The third attribute is the blur radius (how much blur you want for the shadow). And the last attribute is the colour for the shadow.

Here is some sample CSS code for a text-shadow with a horizontal shadow of 3px, vertical shadow of 3px, blur radius and 5 and the colour blue for the shadow.

text-shadow: 3px 3px 5px blue;

And this is what it would look like:

text-shadow-effect-css

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.

HTML & CSS Layout Template

You can use the code below to set up an HTML document with a CSS layout including header, footer, sidebar, horizontal navigation menu, and single-column main content area.

Here is a preview of what the template looks like. Click on the image to see a demo page.

 

You can copy and paste the source code below into your own HTML file and save it as yourfilename.html before viewing it in a browser.

<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My page title</title>
<!-- This is a basic HTML template with a CSS layout -->
<style>
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 color:#333
}
 
p {
 padding: 10px;
}
 
#wrapper {
 margin: 0 auto;
 width: 1000px;
}
 
#header {
 float: left;
 height: 75px;
 width: 1000px;
 background: #6352FF;
}
 
#menu {
 float: left;
 height: 40px;
 width: 1000px;
 background: #96C7FF;
}
 
#content {
 float: left;
 background: #FFFFFF;
 width: 850px;
}
 
#leftcolumn {
 background: #C9D8FF;
 width: 150px;
 float: left;
}
 
#footer {
 height: 40px;
 width: 1000px;
 background: #6352FF;
 clear: both;
}
 
ul#menutabs {
list-style: none;
margin: 0;
padding: 8px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap
}
ul#menutabs li {
display: inline;
margin: 0 3px;
}
ul#menutabs a {
text-decoration: none;
padding: 0 0 3px;
border-bottom: 2px solid #FFF;
color: #8D9091;
 }
ul#menutabs a#current {
border-color: #0024B5;
color:#0029CC
}
ul#menutabs a:hover {
border-color: #0024B5;
color: #666
}
 
 
</style>
</head>
<body>
 <div id="wrapper">
 <div id="header">
 <h1>This is the Header</h1>
 </div>
 <div id="menu">
 <ul id="menutabs">
 <li><a id="current" href="#">Home</a></li>
 <li><a href="link1.html">Link 1</a></li>
 <li><a href="link2.html">Link 2</a></li>
 <li><a href="link3.html">Link 3</a></li>
 <li><a href="link4.html">Link 4</a></li>
</ul>
 </div>
 <div id="leftcolumn">
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 <p>The sidebar content goes here.</p>
 </div>
 <div id="content">
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 <p>The main content goes here.</p>
 </div>
 <div id="footer">
 <p>This is the Footer</p>
 </div>
 </div>
</body>
</html>