Scribd
Upload
6 views

IWT LabSheet 3 External CSS

Uploaded by

naveen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

IWT LabSheet 3 External CSS

Uploaded by

naveen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

BSc (Hons) in Information Technology

Year 1
Lab Exercise 3

IT – Internet and Web Technologies Semester 2, 2017

Objective: Understand how an external CSS is used in a web site.

Prerequisites: Basic knowledge in HTML and inline/internal CSS. Completed the previous
lab exercise.

Instructions
Download this Lab Sheet into your machine. Complete the Lab Exercises given.

External CSS

 External CSS is used when the style is required to be separated from the HTML
document itself which makes the HTML document more understandable, less complex.
 It is the ideal solution when the web pages in a web site has to follow the same exact
style.
 Contains only CSS code and saved with “.css” file extension.
 The same CSS is linked to each and every web page using a <link> tag.

Exercise 1

1. Open a new file in the Text Editor


2. Type the following in the new file and save it as “style.css”.

body {
background-color:aqua;
}

p {
font-family : Tahoma;
font-size : small ;
color:brown;
}

h1 {
font-style:italic;
}

1
3. Create a new html file named “Lab3.html” and type the following. Save and view the
output in a browser.
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Welcome to Student Information System</h1>
<p> Please log in to use the SLIIT Student Information system.
</p>
</body>
</html>

Note : the attributes “rel”, “type” & “href” must be provided with in the <link> tag in order to
link the External CSS with the HTML document.

CSS selectors

CSS selectors are used to style HTML elements group wise.

.class selector

Syntax : .<class name> {


css declarations ;
}

#id selector

Syntax : #<id> {
css declarations ;
}

element selector

Syntax : <element name> {


css declarations ;
}

2
Example :

.content {
font-family:Tahoma;
font-size:large ; Style.css
background-color:aqua;
color:blue;
}

#firstpara {
font-style:italic;
font-size:small;
}

#secondpara {
font-size:10px;
color:red;
}

p {
font-size:30px;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="content">
<p><b> This paragraph is not styled with any #id selectors</b></p>
<p id="firstpara"><b> This paragraph is styled with the #id selector
"firstpara" </b></p>
<p id="secondpara"><b> This paragraph is styled with the #id selector
"secondpara" </b></p>
</div>
<p> This paragraph is styled with element selector </p>
</body>
</html>

3
More Examples:
Style.css

4
Exercise:
Use the same script that you have created for the homework 2 (Lab sheet 2), remove the
internal .css from the head section. Create a new external .css file for styling (use the
previous style script) and include the relevant link tag within the head in the html file to
link an .html file with css. Upload .html, .css and images as a single folder to Courseweb.

You might also like