Using Advanced Styles

Lesson 12

Introducing Stylesheets

CSS – Cascading style sheets and defines how HTML elements are displayed.

The most current version of CSS is version 3.0, and there are three types of CSS available to use

  • Internal Stylesheets
  • Inline stylesheets (discussed in Lesson 5)
  • External stylesheets

There are also three parts to CSS

  • Selector
  • Property
  • Value

An example would be: body{font-family: Arial;}

  • Selector = ‘Body’
  • Property = ‘Font-family’
  • Value = ‘Arial’

Inline Styles

CSS – Cascading style sheets and defines how HTML elements are displayed.

The most current version of CSS is version 3.0, and there are three types of CSS available to use

  • Internal Stylesheets
  • Inline stylesheets (discussed in Lesson 5)
  • External stylesheets

There are also three parts to CSS

  • Selector
  • Property
  • Value

An example would be: body{font-family: Arial;}

  • Selector = ‘Body’
  • Property = ‘Font-family’
  • Value = ‘Arial’

Let’s give this a try.

  1. Open ‘Notepad++’ from your desktop
  2. Click ‘File’ & ‘Close’ to close any files that appear. You should now see a blank document.
  3. Type the following code:

<!doctype html>
<html>
<head>
<title>Lesson 9</title>
<style>
H1 {
text-align: center;
}
P {
color: red;
}
</style>
</head>
<body>
<h1>Welcome User</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
venenatis, mi ac tincidunt pulvinar, enim arcu hendrerit arcu, sit amet
mollis arcu est et mauris. </p>
</body>
</html>

  1. Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:

In this example, we used internal stylesheets using the ‘style’ tag.

<style>
H1{text-align:center;}
P{color:red;}
</style>

The above code was placed inside the opening <head> and closing </head> tags.

The styles we applied affected the following elements on the page:

  • <h1>Welcome User</h1> – The style specified for <h1> was text-align which aligned the heading to the centre.
  • <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis, mi ac tincidunt pulvinar, enim arcu hendrerit arcu, sit amet mollis arcu est et mauris. </p>. The style used for the <p> tag was ‘color’ which rendered the font colour between the <p> tags as Red.

You can also use ‘id’ as the selector, and reuse the same id in any element on the page. For example:

<!doctype html>
<html>
<head>
<title>Lesson 9</title>
<style>
H1{text-align:center;}
P{color:red;}
#firstpara{ color:blue;}
</style>
<body>
<h1>Welcome User</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
venenatis, mi ac tincidunt pulvinar, enim arcu hendrerit arcu, sit amet
mollis arcu est et mauris. </p>
<p id="firstpara"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi venenatis, mi ac tincidunt pulvinar, enim arcu
hendrerit arcu, sit amet mollis arcu est et mauris. </p>
</body>
</html>

External Stylesheets

External stylesheets are as the name suggests, a separate CSS file located elsewhere on the website. This is linked to the HTML page using the <link> tag. An external stylesheet is saved with a .css extension.

Styles defined in this external stylesheet can be used across the entire website and help provide a consistent look and feel for your website. Using external stylesheets allow you to separate your content from your styling.

  1. Open ‘Notepad++’ from your desktop
  2. Click ‘File’ > ‘New’.
  3. Click ‘File’ > ‘Save as’ change ‘Save as type’ to Cascading Style Sheets File’ from the drop down and name your file style.css > click ‘Save. Remember to save this in the same location as your .html file.
  4. Click ‘File’ > ‘New’.
  5. Click ‘File’ > ‘Save as’ change ‘Save as type’ to HyperText Markup Language file’ from the drop down and name your file ExternalStyleSheet.html > click ‘Save. Remember to save this in the same location as your .css file
  6. Now add the following code:

<!doctype html>
<html>
<head>
<title>Lesson 9</title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<h1 id="heading1">Welcome User</h1>
<p id= "firstpara"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi venenatis, mi ac tincidunt pulvinar, enim arcu
hendrerit arcu, sit amet mollis arcu est et mauris. </p>
<p id="secondpara"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi venenatis, mi ac tincidunt pulvinar, enim arcu
hendrerit arcu, sit amet mollis arcu est et mauris. </p>
</body>
</html>

The following code is used to reference the external CSS file:

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

The ‘href’ attribute shows the path to the CSS file as the value; the ‘rel’ attribute defines the files relation with our file, which is stylesheet.

Now let’s add some styles to our CSS file.

  1. Switch to your style.css file and add the following code.:

body{
background-color:green;
}
h1{
color:red;
font-family:Arial;
}
#firstpara{
color:blue;
}
#secondpara{
color:brown;
}

  1. Save both your files and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:

Take me to the last lesson 'Your first web page'

Scroll to Top