Scribd
Upload
26 views7 pages

IT1100 IWT - Labsheet 03

Here are the key differences between the three main methods of applying styles in CSS: - External style sheets are ideal when the same styles need to be applied across multiple pages as they can control the entire site from one .css file. They are also easier to maintain and update. - Internal styles are defined within the <style> element in the <head> of the HTML page. They are best for single pages that require unique styling. - Inline styles are applied directly to HTML elements using the style attribute and have the highest specificity but are not reusable and clutter the HTML. They should generally be avoided except for rare exceptions. The external and internal stylesheet methods allow separation of design from content while inline styles mix both

Uploaded by

thedarkhell123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views7 pages

IT1100 IWT - Labsheet 03

Here are the key differences between the three main methods of applying styles in CSS: - External style sheets are ideal when the same styles need to be applied across multiple pages as they can control the entire site from one .css file. They are also easier to maintain and update. - Internal styles are defined within the <style> element in the <head> of the HTML page. They are best for single pages that require unique styling. - Inline styles are applied directly to HTML elements using the style attribute and have the highest specificity but are not reusable and clutter the HTML. They should generally be avoided except for rare exceptions. The external and internal stylesheet methods allow separation of design from content while inline styles mix both

Uploaded by

thedarkhell123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

BSc (Hons) in Information Technology

Year 1, Semester II, 2024


IT1100 – Internet and Web Technologies

Lab Exercise 03 – Add styles to a web page

Objectives
By the end of this lab session, you will be able to design your web page using styles.

Introduction

• CSS Stands for "Cascading Style Sheet" and used to format the layout of Web pages.
• It can control the layout of multiple web pages all at once.
• External style sheets are stored in CSS files. (This method is the preferred one)
• Internal Styles and Inline styles include in HTML file.
o Internal Styles
Internal styles are defined inside of <style> element which is inside <head>
element.
This method uses if only a single page has a unique style.
o Inline Styles
Inline styles define inside the exact element. This uses when that specific element
has a unique style.
• Class and Id
Both classes and Ids work as selectors in HTML. The advantage of these are they can use
same HTML tag but view or display it in different ways.
o Class
In CSS class selector is a name proceed by a (.).
Following is an example of class selector.
In HTML In CSS
.classExample{
<div class=”classExample”> Background-color: white;
}
o Id
In css class selector is a name proceed by a (#).
Following is an example of class selector.

In HTML In CSS
<div class=”idExample”> #idExample{
Background-color: white; }
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 03 – Add styles to a web page

Exercise 1: Following will be the outcome of the today’s lab session.

• Go to the IWT folder structure which you created on last week.


• Create a file named styles.css inside the “IWT/styles” folder.
• Open both styles.css and index.html files.
• Fill the following boxes with the relevant style codes for the given activities.
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 03 – Add styles to a web page

• Connect the style sheet to index.html using following example.


https://www.w3schools.com/tags/tag_link.asp

• Add a background image to index.html


o Go to following link and download a suitable image and save it inside the images
folder.
https://www.google.com/search?q=background+image&source=lnms&tbm=isch&sa
=X&ved=0ahUKEwiZ_o6ouqrhAhWMfSsKHVMlDocQ_AUIDigB&biw=1600&bih=718

o Set the image as the background image of your web page.


https://www.w3schools.com/cssref/pr_background-image.asp

• Logo
o Create a CSS class named “logo” in styles.css. Use following example in order to
center your Logo.
https://www.w3schools.com/howto/howto_css_image_center.asp

o Call the class named logo (created in the previous step) to the <img> tag in
index.html. (Introduction to classes and Ids are containing in the introduction
section of this lab sheet)
• Headers
o Change the font type and font size of the headers using following example.
https://www.w3schools.com/css/css_font.asp
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 03 – Add styles to a web page

• Horizontal Line
o Format the horizontal line in index.html as 1px thick (Using a border) and Color of
the horizontal line as black.
https://www.w3schools.com/howto/howto_css_style_hr.asp

• Horizontal Navigation bar.

o Style the menu list (unordered list in index.html) to display horizontally.


(Here you have to style the list which you created last week and make it horizontal)
https://www.w3schools.com/css/css_navbar.asp
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 03 – Add styles to a web page

• Table
o Add the complete table inside a <div> tag.
o Add a class named “productData” in styles.css in order to change the background
color of the table.
o Call the “productData” inside the div tag.
https://www.w3schools.com/cssref/pr_background-image.asp

o Align the text in product name column to center.


o Align the text in product description column to left.
https://www.w3schools.com/cssref/pr_text_text-align.asp

o Change the font color of some words in product description.


https://www.w3schools.com/tags/att_font_color.asp
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 03 – Add styles to a web page

o Set top margin to 15px and other three margins as 10px.


https://www.w3schools.com/css/css_margin.asp

o Add a border and make that border’s style, ‘groove’.


o Make the border color, dark-blue.
https://www.w3schools.com/css/css_border.asp

o Add a padding of 3px.


https://www.w3schools.com/css/css_margin.asp

• Footer
o Align the texts center.
o Change the font style of the text.
BSc (Hons) in Information Technology
Year 1, Semester II, 2024
IT1100 – Internet and Web Technologies

Lab Exercise 03 – Add styles to a web page

Exercise 2:

Compare three methods of using style sheets.

You might also like