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.
- Open ‘Notepad++’ from your desktop
- Click ‘File’ & ‘Close’ to close any files that appear. You should now see a blank document.
- 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>
- 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.
- Open ‘Notepad++’ from your desktop
- Click ‘File’ > ‘New’.
- 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.
- Click ‘File’ > ‘New’.
- 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
- 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.
- 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;
}
- 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'