UNIVERSITY OF EDUCATION, WINNEBA
BAGABAGA COLLEGE OF EDUCATION, TAMALE
JBT 352: Web & Mobile Devt. in Education
LESSON THREE – CASCADING STYLE SHEETS (CSS)
ISSAH BAAKO
Cascading Style Sheets
CSS (Cascading Style Sheets) is a stylesheet language used to
design the webpage to make it attractive.
Thereason for using this is to simplify the process of making web
pages presentable.
It allows you to apply styles to web pages.
More importantly, it enables you to do this independent of the
HTML that makes up each web page.
Why do we learn CSS?
Stylingis the essential property for any website. It
increases the standards and overall look of the website
that makes it easier for the user to interact with it.
A website can not be made without CSS, as styling is
MUST since no user would want to interact with a dull and
shabby website.
So in Web Development, learning CSS is mandatory.
Benefits of CSS
• Base for web development: HTML and CSS are the basic skills that
every web developer should know. It is the basic skill that is required
for building a website.
• Makes your website look attractive: A website that’s dull and plain
will not attract the user most probably, so adding some style would
surely make your website presentable to the user.
Benefits of CSS
• Makes the design come live: A web developer is responsible for
making the design given to him as a live product. It is used for styling
to develop the design of the website.
• Increases user experience of website: A website with a simple yet
beautiful User Interface would help the users to go through the
website easily. It is used to make the user interface better.
Basic Format of CSS in HTML
Basic Format: It is the basic structure of HTML webpage
and we use CSS style inside webpage.
In a web page, we use internal CSS (i.e. adding CSS code
inside <head> tag of HTML code).
CSS allows you to create rules that specify how the
content of an element should appear.
Basic HTML Structure with CSS in <head> tag
<!DOCTYPE html>
<html>
<head>
<!-- Head section of web page -->
<title></title>
<!-- Stylesheet of web page -->
<style></style>
</head>
<body>
<!-- Body section of web page -->
</body>
</html>
HTML webpage with CSS styles
<!DOCTYPE html>
<html>
<head>
<title>
Simple webpage
</title>
<!-- Stylesheet of web page -->
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Welcome to BACE Computer Lab</h1>
<p>A computer science portal for students</p>
</body>
</html>
CSS Syntax Rules
CSS works by associating style
rules with HTML elements.
These rules govern how the
content of specified elements
should be displayed.
A CSS rule contains two parts:
a selector and a declaration.
This rule indicates that all <p> elements
should be shown in the Arial typeface.
Selectors indicate which element the rule
applies to. The same rule can apply to more
than one element if you separate the element
names with commas.
Declarations indicate how the elements
referred to in the selector should be styled.
Declarations are split into two parts (a
property and a value), and are separated by
a colon.
CSS Declarations
CSSdeclarations sit inside curly brackets and each is made up of
two parts: a property and a value, separated by a colon.
You
can specify several properties in one declaration, each
separated by a semi-colon.
This
rule indicates that all h1, h2, and h3 elements should be
shown in the Arial typeface, in a yellow color.
Propertiesindicate the aspects of the element you want to change.
For example, color, font, width, height and border.
Values specify the settings you want to use for the chosen
properties. For example, if you want to specify a color property then
the value is the color you want the text in these elements to be.
CLASS EXERCISE
Createa basic HTML webpage and apply CSS styles to
improve the appearance and beatification of your page.
You can use the following declaration rules among others:
border: 1px solid black;
font-family: Arial:
Color: green;
border-collapse: collapse;
Summary
CSS treats each HTML element as if it appears inside its own box
and uses rules to indicate how that element should look.
Rules are made up of selectors (that specify the elements the rule
applies to) and declarations (that indicate what these elements
should look like).
Different types of selectors allow you to target your rules at
different elements.
Summary
Declarations are made up of two parts: the properties of the
element that you want to change, and the values of those properties.
For example, the font-family property sets the choice of font, and
the value arial specifies Arial as the preferred typeface.
CSS rules usually appear in a separate document, although they
may appear within an HTML page.
LISTS in HTML LESSON FOUR
Introduction
There are lots of occasions when we need to use
lists. HTML provides us with three different types:
Ordered lists are lists where each item in the list is numbered. For
example, the list might be a set of steps for a recipe that must be
performed in order, or a legal contract where each point needs to be
identified by a section number.
Ordered lists show sequence and the order in which something has to
happen.
Introduction
Unordered lists are lists that begin with a bullet point
(rather than characters that indicate order).
Definition lists are made up of a set of terms along with
the definitions for each of those terms.
Ordered Lists (OL)
The ordered list is created with the <ol> element.
It is created by placing the items between the <li>
tag.
Each item in the list is placed between an opening
<li> tag and a closing </li> tag. (The li stands for
list item.)
Example:
Output in Web page
Example for Ordered Lists
Write HTML codes to produce the output below:
1. Right-click on the desktop
2. Scroll to New in the pop-up menu
3. Choose/click on Folder in the sub-menu
4. Type the name of the folder
Unordered Lists (UL)
The unordered list is created with the <ul> element.
Each item in the list is placed between an opening
<li> tag and a closing </li> tag. (The li stands for
list item.)
Example:
Output in Web page
Example for Unordered Lists
Write HTML codes to produce the output below:
The following are computer devices:
• Mouse
• Microphone
• Keyboard
• Pen drive
Definition Lists (DL)
The definition list is created with the <dl> element and usually
consists of a series of terms and their definitions.
Inside the <dl> element you will usually see pairs of <dt> and
<dd> elements.
<dt> This is used to contain the term being defined (the
definition term).
<dd> This is used to contain the definition detail.
Output in Web page
Example for Definition Lists
Write HTML codes to produce the output below:
Keyboard
A peripheral used to input data by pressing keys
Monitor
A device used to display information visually
Mouse
A peripheral device used to point to items on a
monitor
SUMMARY
There are three types of HTML lists: ordered, unordered, and
definition.
XX Ordered lists use numbers.
XX Unordered lists use bullets.
XX Definition lists are used to define terminology.
XX Lists can be nested inside one another.
CLASS EXERCISE
Create a basic HTML webpage to demonstrate
the use of ordered lists, unordered lists and
definition lists.
STYLING LISTS USING CSS
Introduction
Thelists elements are used to show items on a web page in web
development.
Listscan show sequence or order, in a bulleted list or a
definition lists.
Thestyle of a list can be changed or set using Cascading Style
Sheets’ styling techniques.
We are going to demonstrate how to style lists using CSS
Lists overview
Lists
are a general-purpose container for collections of things.
They come in three varieties.
Ordered lists, Unordered lists and Definition lists
Ordered lists are numbered to show order.
Ordered lists are lists in which each item is numbered or
labeled with a counter of some kind (like letters or roman
numerals)
Lists overview
Unordered lists are not numbered and by default are
presented with bullets for each list item.
Unordered lists are often used as a general-purpose container
for any list-like collection of items.
They’realso used for things like collections of navigation links
and even pull-down menus.
Definitionlists are used for glossaries and other items that pair
a label with some kind of description.
Lists overview
All three list types have their specific elements:
Ordered lists use <ol> and </ol>
Unordered lists use <ul> and </ul>
Definition
list uses <dl> and </dl>, <dt> and </dt>, <dd>
and </dd>
Ordered and Unordered list types use <li> and </li> for the
items in the list
Ordered List Numbering Styles
Changing/Customizing the style of Ordered Lists
We can specify types of numbering in the <ol> tag
using the style attribute, like this:
<ol style="list-style-type: lower-alpha;">
<ol style="list-style-type: upper-alpha;">
<ol style="list-style-type: lower-roman;">
<ol style="list-style-type: upper-roman;">
<ol style="list-style-type: decimal;">
CLASS WORK
Demonstrate how to create ordered lists
with alpha, and roman naming styles
Unordered Lists Styles
Unordered lists are often referred to as bulleted lists.
Instead of being numbered, each element in the list has the
same marker.
The markup to create an unordered list looks just like an
ordered list except that the list is created by using
<ul>...</ul> tags rather than <ol>.
The elements of the list are placed within <li> tags, just
as with ordered lists.
Customizing Unordered List
As with ordered lists, unordered lists can be customized
using the list-style-type property.
"disc"—A disc or bullet; this style is the default.
"square"—It gives a square bullet.
"circle"—This value should generate an unfilled
circle.
Customizing Unordered List
We can specify types of bullets in the <ul> tag using
the style attribute, like this:
<ul style="list-style-type: disc;">
<ul style="list-style-type: square;">
<ul style="list-style-type: circle;">
CLASS WORK
Demonstrate how to create unordered lists with
disc, circle and square styles
WORKING WITH LINKS
Introduction
Websites are organized with hypertext links that link
pages and websites to create interactivity for users.
Links facilitate navigation and movement on websites.
We will learn how to create hyperlinks to link pages on
the web.
Creating Links
To create a link in HTML, you need two things:
The name of the file (or the URL) to which you want to link
The text that will serve as the clickable link
Only the text included within the link tag is actually
visible on your page.
When your readers click the link, the browser loads the
URL or file associated with the link .
Tocreate a link in an HTML page, you use the HTML link tag
<a>...</a>. The <a> tag is also called an anchor tag
The <a> tag uses attributes to define the link.
So, rather than the opening <a> tag having just the tag name
inside brackets, it looks something like the following:
<a href="menu.html">The Twelve Caesars</a>
Linksare created using the <a> element. Users can click on
anything between the opening <a> tag and the closing </a>
tag.
You specify which page you want to link to using the href
attribute.
href =hyperlink reference
<a href="http://www.imdb.com">IMDB</a>
Linksare created using the <a> element which has an attribute
called href.
The value of the href attribute is the page that you want people
to go to when they click on the link.
The text between the opening <a> tag and closing </a> tag is
known as link text.
Where possible, your link text should explain where visitors will
be taken if they click on it
When you link to a different website, the value of the href
attribute will be the full web address for the site, which is known
as an absolute URL.
Output
CLASS WORK
Create links for visitors of your website to visit the following websites
directly from a web page:
Google
Yahoo
Bagabaga college
Tamale college
University of Education, Winneba.
Gmail
