Outline of Instruction: - Review of HTML Forms. - Introduction To CSS. - Practice Session With HTML and CSS

10/6/2010
WEB TECHNOLOGIES
LECTURE 4:
Web Technologies Lecture Slides by

Maxwell Dorgbefu Jnr.
Outline of Instruction
• Review of HTML Forms.
• Introduction to CSS.
• Practice session with HTML and CSS.
1
10/6/2010
Introduction to CSS
• A style sheet is a grouping of formatting instructions
that can control the appearance of many HTML pages
at once.
• CSS enables you to set a great number of formatting
characteristics that were never possible before with any
amount of effort.
• The technology behind style sheets is called CSS which
stands for Cascading Style Sheets.
• CSS is a language that defines style constructs such as
fonts, colors and positions which are used to describe
how information on a web page is formatted and
displayed.
Style Rules - 1
• A style rule is a formatting that can be applied to
an element on a web page such as a paragraph of
a text or a link.
• Style rules consists of one or more style
properties and their associated values.
• The cascading part of the name CSS refers to the
manner in which style sheet rules are applied to
elements in an HTML document.
2
10/6/2010
Style Rules - 1
• More specifically, styles in a CSS style sheet form a
hierarchy in which more specific styles override
more general styles.
• It is the responsibility of CSS to determine the
precedence of style rules according to this
hierarchy, which establishes a cascading effect.
How to include Style sheets

• To include or link a style sheet to HTML
documents, you include a <link> tag in the <head>
container of each document.
• Style sheets can be inserted in three main ways :
– External style sheet
– Internal style sheet
– Inline styles
3
10/6/2010
External Style Sheet

• An external style sheet is ideal when the style is
applied to many pages.
• With an external style sheet, you can change the
look of an entire Web site by changing one file.
• Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the <head>
section:
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" >
</head>
Internal Style Sheet

• An internal style sheet can be used if one single
document has a unique style.
• Internal styles are defined in the <head> section
of an HTML page, by using the <style> tag, like
this:
• <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
4
10/6/2010
Inline Styles
• An inline style can be used if a unique style is to be
applied to one single occurrence of an element.
• To use inline styles, use the style attribute in the
relevant tag.
• The style attribute can contain any CSS property.
• The example below shows how to change the text
color and the left margin of a paragraph:
• <p style="color:blue;margin-left:20px">This
is a paragraph.</p>
CSS Syntax
• A CSS rule has two main parts namely:
– Selector and
– Declarations
• The selector is normally the HTML element you
want to style.
• Each declaration consists of a property and a
value.
• The property is the style attribute you want to
change.
• Each property has a value.
5
10/6/2010
CSS Syntax
The id and class Selectors

• In addition to setting a style for a HTML element,
CSS allows you to specify your own selectors called
"id" and "class".
• To use the styles defined in the id and class
selectors, the id and class names are supplied to the
id and class attributes respectively in the HTML
elements for which we wish to apply the styles.
6
10/6/2010
The id Selector
• The id selector is used to specify a style for a single,
unique element.
• The id selector uses the id attribute of the HTML
element, and is defined with a "#".
• The style rule below will be applied to the element with
id="para1":
• Example
• #para1
{
text-align:center;
color:red;
}
Classes of Styles
• A class is a name given to a set of properties assigned
to different HTML elements.
• The class name always begins with a period(.).
• We have Generic and Tag-Level classes.
• Whiles a generic class can be applied to a variety of
tags, tag-level classes are applied to specific tags.
• The HTML code to create a sample class looks like this:
.hometop
{
color: #009900; /* green */
font-style: italic;
font-family: Times New Roman, serif;
text-align: center;
}
7
10/6/2010
Styling Background
• CSS background properties are used to define
the background effects of an element.
• CSS properties used for background effects:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
Background Color
• The background-color property specifies the
background color of an element.
• The background color of a page is defined in the
body selector:
• e.g
–body {background-color:#b0c4de;}
• The background color can be specified by:
– Name - a color name, like "red"
– RGB - an RGB value, like "rgb(255,0,0)"
– Hex - a hex value, like "#ff0000"
8
10/6/2010
Background Image
• The background-image property specifies an
image to use as the background of an element.
• By default, the image is repeated so it covers the
entire element.
• The background image for a page can be set like
this:
• Example
• body {background-image:url(‘logo.jpg');}
Styling Links - 1
• Links can be style with any CSS property (e.g. color,

font-family, background-color).
• Special for links are that they can be styled
differently depending on what state they are in.
• The four links states are:
– a:link - a normal, unvisited link
– a:visited - a link the user has visited
– a:hover - a link when the user mouses over it
– a:active - a link the moment it is clicked
9
10/6/2010
Styling Links - 2
• a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
• When setting the style for several link states,
there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
Practice Session
• Activity One: Create a simple HTML Page.
• Create a sample external CSS and link it to your
HTML page.
• Create a sample tabular data.
• Create a sample HTML form and its
corresponding action script for processing the
values entered into the form.
10
10/6/2010
• <HTML>
• <HEAD>
• <TITLE> Simple HTML page!</TITLE>
• <link rel="stylesheet" type="text/css" href="ite300.css">
• </HEAD>
• <BODY>
• <H1> THIS IS A TEXT I WISH TO SHOW YOU </H1>
• <HR width=“75%” >
• <P>
• This text and more constitute my paragraph.
• </P>
• </BODY>
• </HTML>
CSS File:ite300.css
• BODY{background-color:#FF0000;}
• P{color:blue;}
11

Outline of Instruction: - Review of HTML Forms. - Introduction To CSS. - Practice Session With HTML and CSS

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Outline of Instruction: - Review of HTML Forms. - Introduction To CSS. - Practice Session With HTML and CSS

Încărcat de

Drepturi de autor:

Formate disponibile

10/6/2010

Web Technologies Lecture Slides by

How to include Style sheets

External Style Sheet

Internal Style Sheet

The id and class Selectors

• Links can be style with any CSS property (e.g. color,

S-ar putea să vă placă și