WEB TECHNOLOGY

SYLLABUS

UNIT – III

Cascading Style Sheets: Introducing CSS, Where you can Add CSS
Rules. CSS Properties: Controlling Text, Text Formatting, Text
Pseudo Classes, Selectors, Lengths, Introducing the Box Model.
More Cascading Style Sheets: Links, Lists, Tables, Outlines, The
:focus and :activate Pseudo classes Generated Content,
Miscellaneous Properties, Additional Rules, Positioning and Layout
wit, Page Layout CSS , Design Issues.
3.1 Introduction of CSS
CSS stands for Cascading Style Sheets. It is a simple design
language intended to simplify the process of making web pages
presentable. CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, as well as a
variety of other effects.
CSS works with HTML and other Markup Languages (such as
XHTML and XML) to control the way the content is presented.
Cascading Style Sheets is a means to separate the appearance of a
webpage from the content of a webpage.
3.1.1 Definition
Cascading Style Sheets (CSS) is a simple mechanism used to format
the layout of Web Pages and adding style (e.g., fonts, colors,
spacing...) to web documents that previously could only be defined
in a page's HTML. CSS describes how HTML elements are to be
displayed on screen, paper, or in other media. It can control the
layout of multiple web pages all at once.
3.1.2 Advantages
The advantages of CSS are:
CSS saves time - You can write CSS once and then reuse the
same sheet in multiple HTML pages.
Pages load faster – Increases Download Speed
Easy maintenance - To make a global change, all the elements in
all the web pages will be updated automatically.
 Superior styles to HTML – It is better look to your HTML page in
comparison to HTML attributes.
Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device.
Global web standards - Now HTML attributes are being
deprecated and it is being recommended to use CSS
3.1.3 What is the “Cascade” part of CSS?
The cascade part of CSS means that more than one style sheet can
be attached to a document, and all of them can influence the
presentation. For example, a designer can have a global style sheet
for the whole site, but a local one for say, controlling the link color
and background of a specific page. Or, a user can use own style
sheet if s/he has problems seeing the page, or if s/he just prefers a
certain look.
3.2 CSS Syntax
A CSS style rule is made of three parts:
1. Selector: A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1>, <p> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS properties.
They could be color, border, bgcolor etc.
3. Value: Values are assigned to properties. For example, color
property can have the value either red or #F1F1F1 etc.
The format or syntax of CSS is:

Selector {property:

Here h1 is a selector , color and font-size are properties and the

given value red, and 15px are the value of that property.
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.

3.2.1 Rules/ Principle of CSS

1. Every statement must have a selector and a declaration. The
declaration comes immediately after the selector and is contained in
a pair of curly braces.
2. The declaration is one or more properties separated by
semicolons.
3. Each property has a property name followed by a colon and then
the value for that property. There are many different types of
values, but any given property can only take certain values as set
down in the specification.
4. Sometimes a property can take a number of values, as in the
font-family. The values in the list should be separated by a comma
and a space.
5. Sometimes a value will have a unit as well as the actual value, as
in the 1.3em. You must not put a space between the value and its
unit.
6. As with HTML, white space can be used to make your style sheet
easier to

3.2.2Parts of style sheet

A style sheet consists of one or more rules that describe how

document elements should be displayed. A rule in CSS has two
parts: the selector and the declaration. The declaration also has two
parts, the property and the value. Let's take a look at a rule for a
heading 1 style: h1 { font-family: verdana, "sans serif"; font-size:
1.3em } This expression is a rule that says every h1 tag will be
verdana or other sans-serif font and the fontsize will be 1.3em. Let's
take a look at the different parts of this rule.

Parts of style sheet

A style sheet consists of one or more rules that describe how

document elements should be displayed. A rule in CSS has two
parts: the selector and the declaration. The declaration also has two
parts, the property and the value. Let's take a look at a rule for a
heading 1 style: h1 { font-family: verdana, "sans serif"; font-size:
1.3em } This expression is a rule that says every h1 tag will be
verdana or other sans-serif font and the fontsize will be 1.3em. Let's
take a look at the different parts of this rule.
Selector
{
property1: some value;
property2: some value;
}
The declaration contains the property and value for the selector.
The property is the attribute you wish to change and each property
can take a value. The property and value are separated by a colon
and surrounded by curly braces:

body { background-color: black}

If the value of a property is more than one word, put quotes around
that value: body { font-family: "sans serif"; } If you wish to specify
more than one property, you must use a semi-colon to separate
each property. This rule defines a paragraph that will have blue text
that is centered.

p { text-align: center; color: blue }

You can group selectors. Separate each selector with a comma. The
example below groups headers 1, 2, and 3 and makes them all
yellow. h1, h2, h3 { color: yellow}

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it

• Style visited and unvisited links differently
• Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {
property: value;
}

CSS Selectors:

A CSS selector selects the HTML element(s) you want to style.

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you
want to style.

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)

• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain
state)
• Pseudo-elements selectors (select and style a part of an
element)
• Attribute selectors (select elements based on an attribute or
attribute value)

This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element

name.

Example

Here, all <p> elements on the page will be center-aligned, with a red
text color:

p{
text-align: center;
color: red;
}
PROGRAM:

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

OUTPUT:

Every paragraph will be affected by the style.

Me too!

And me!
The CSS id Selector

The id selector uses the id attribute of an HTML element to select a

specific element.

The id of an element is unique within a page, so the id selector is

used to select one unique element!

To select an element with a specific id, write a hash (#) character,

followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with
id="para1":

#para1 {
text-align: center;
color: red;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

OUTPUT:

Hello World!

This paragraph is not affected by the style.

The CSS class Selector

The class selector selects HTML elements with a specific class

attribute.

To select elements with a specific class, write a period (.) character,

followed by the class name.

Example

In this example all HTML elements with class="center" will be red

and center-aligned:

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be
affected by a class.
Example

In this example only <p> elements with class="center" will be red

and center-aligned:

p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.

Example

In this example the <p> element will be styled according to

class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red andcenter-aligned paragraph.</p>
</body>
</html>

OUTPUT:

Red and center-aligned heading

Red and center-aligned paragraph.

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

*{
text-align: center;
color: blue;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

OUTPUT:

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same
style definitions.

Look at the following CSS code (the h1, h2, and p elements have the
same style definitions):
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example

In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

OUTPUT:

Hello World!

Smaller heading!

This is a paragraph

All CSS Simple Selectors:

Selector Example Example description

#id #firstname Selects the element with

id="firstname"

.class .intro Selects all elements with

class="intro"

element.class p.intro Selects only <p> elements with

class="intro"

* * Selects all elements

element P Selects all <p> elements

element,element,.. div, p Selects all <div> elements and

all <p>elements
How To Add CSS

When a browser reads a style sheet, it will format the HTML

document according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

External CSS

With an external style sheet, you can change the look of an entire
website by changing just one file!

Each HTML page must include a reference to the external style

sheet file inside the <link> element, inside the head section.

Example

External styles are defined within the <link> element, inside the
<head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

OUTPUT:

This is a heading
This is a heading
This is a paragraph.
This is a paragraph.

An external style sheet can be written in any text editor, and must
be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value and the unit
(such as margin-left: 20 px;). The correct way is: margin-left: 20px;
Internal CSS

An internal style sheet may be used if one single HTML page has a
unique style.

The internal style is defined inside the <style> element, inside the
head section.

Example

Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
OUTPUT:

This is a heading
This is a paragraph.

Inline CSS

An inline style may be used to apply a unique style for a single

element.

To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant
element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

OUTPUT:
This is a heading
This is a paragraph.
Text Formatting:
CSS Text
CSS has a lot of properties for formatting text.

TEXT FORMATTING

This text is styled with some of the text

formatting properties. The heading uses the text -
align, text-transform, and color properties. The
paragraph is indented, aligned, and the space
between characters is specified. The underline is
removed from this colored "Try it Yourself" link.

Text Color

The color property is used to set the color of the text. The color is
specified by:

• a color name - like "red"

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color

values.

The default text color for a page is defined in the body selector.

Example
body {
color: blue;
}

h1 {
color: green;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The
default text color for a page is defined in the body selector.</p>
<p>Another paragraph.</p>
</body>
</html>
OUTPUT:

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The

default text color for a page is defined in the body selector.

Another paragraph.

Text Color and Background Color:

In this example, we define both the background-color property and

the color property:

Example
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>
</body>
OUTPUT:

This is a Heading

This page has a grey background color and a blue text.

This is a div.

Text Alignment:

The text-align property is used to set the horizontal alignment of a

text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right
aligned text (left alignment is default if text direction is left-to-right,
and right alignment is default if text direction is right-to-left):

Example
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

When the text-align property is set to "justify", each line is stretched

so that every line has equal width, and the left and right margins
are straight (like in magazines and newspapers):
Example
div {
text-align: justify;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>

OUTPUT:

Heading 1 (center)

Heading 2 (left)
Heading 3 (right)

The three headings above are aligned center, left and right.

Text Direction:

The direction and unicode-bidi properties can be used to change the

text direction of an element:

Example

p{
direction: rtl;
unicode-bidi: bidi-override;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>

OUTPUT:
This is the default text direction.
This is right-to-left text direction.

Vertical Alignment:

The vertical-align property sets the vertical alignment of an element.

Example

Set the vertical alignment of an image in a text:

img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}

Text Decoration:

The text-decoration property is used to set or remove decorations

from text.

The value text-decoration: none; is often used to remove underlines

from links:

Example

a{
text-decoration: none;
}

The other text-decoration values are used to decorate text:

Example
h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

h4 {
 text-decoration: underline;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Some different text decorations</h1>
<h2>Overline text decoration</h2>
<h3>Line-through text decoration</h3>
<h4>Underline text decoration</h4>
<p><strong>Note:</strong> It is not recommended to underline text
that is not a link, as this often confuses
the reader.</p>
</body>
</html>

OUTPUT:

Some different text decorations

Overline text decoration

Line-through text decoration
Underline text decoration

Note: It is not recommended to underline text that is not a link, as

this often confuses the reader.

Text Transformation

The text-transform property is used to specify uppercase and

lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase

letters, or capitalize the first letter of each word:

Example
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Using the text-transform property</h1>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>
</body>
OUTPUT:

Using the text-transform property

THIS TEXT IS TRANSFORMED TO UPPERCASE.

this text is transformed to lowercase.

This Text Is Capitalized.

CSS Text Spacing

Text Indentation

The text-indent property is used to specify the indentation of the

first line of a text:

Example
p{
text-indent: 50px;
}

Letter Spacing

The letter-spacing property is used to specify the space between the

characters in a text.

The following example demonstrates how to increase or decrease

the space between characters:
Example
h1 {
letter-spacing: 5px;
}

h2 {
letter-spacing: -2px;
}

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

p{

white-space: nowrap;

</style>

</head>

<body>

<h1>Using white-space</h1>

<p>

This is some text that will not wrap.

This is some text that will not wrap.

This is some text that will not wrap.

This is some text that will not wrap.

This is some text that will not wrap.

This is some text that will not wrap.

This is some text that will not wrap.

This is some text that will not wrap.

This is some text that will not wrap.

</p>

<p>Try to remove the white-space property to see the

difference!</p>

</body>

</html>

OUTPUT:

Using white-space

This is some text that will not wrap.
wrap. This is some text that will not
will not wrap. This is some text that
that will not wrap. This is some text
text that will not wrap. This is some
This is some text that will not
wrap. This is some text that
will not wrap. This is some text
that will not wrap. This is some
text that will not wrap.

Try to remove the white-space property to see the difference!

Text Shadow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px)
and the vertical shadow (2px):
Text shadow effect!

Example
h1 {
text-shadow: 2px 2px;
}

Next, add a color (red) to the shadow:

Text shadow effect!

Example
h1 {
text-shadow: 2px 2px red;
}

Then, add a blur effect (5px) to the shadow:

Text shadow effect!

Example
h1 {
text-shadow: 2px 2px 5px red;
}

More Text Shadow Examples

Example 1

Text-shadow on a white text:

h1 {
color: white;
 text-shadow: 2px 2px 4px #000000;
}

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: red;

text-shadow: 2px 2px 4px #000000;

</style>

</head>

<body>

<h1>Text-shadow effect!</h1>

</body>

</html>

OUTPUT:

Text-shadow effect!
CSS Box Model:

All HTML elements can be considered as boxes.

The CSS Box Model

In CSS, the term "box model" is used when talking about design
and layout.

The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the
actual content. The image below illustrates the box model:
Explanation of the different parts:

• Content - The content of the box, where text and images

appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is
transparent

The box model allows us to add a border around elements, and to

define space between elements.

Example

Demonstration of the box model:

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

div {
background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every
HTML element. It consists of: borders, padding, margins, and the
actual content.</p>

<div>This text is the content of the box. We have added a 50px

padding, 20px margin and a 15px green border. Utenim ad minim
veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex
eacommodoconsequat.Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursinto
ccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.</div>

</body>

</html>
OUTPUT:

Demonstrating the Box Model

The CSS box model is essentially a box that wraps around every
HTML element. It consists of: borders, padding, margins, and the
actual content.

Width and Height of an Element

In order to set the width and height of an element correctly in all

browsers, you need to know how the box model works.

Important: When you set the width and height properties of an

element with CSS, you just set the width and height of the content
area. To calculate the full size of an element, you must also add
padding, borders and margins.

Example

This <div> element will have a total width of 350px:

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<imgsrc="klematis4_big.jpg" width="350" height="263"
alt="Klematis">
<div>The picture above is 350px wide. The total width of this
element is also 350px.</div>
</body>
</html>

OUTPUT:

Calculate the total width:

Here is the calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left

border + right border + left margin + right margin
The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top

border + bottom border + top margin + bottom margin

More Cascading Style Sheets:

➢ Links,
➢ Lists,
➢ Tables,
➢ Outlines,

Links:

With CSS, links can be styled in many different ways.

Text Link Text Link Link Button Link Button

Styling Links

Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).

Example
a{
color: hotpink;
}

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
a{
color: hotpink;
}
</style>
</head>
<body>
<h2>Style a link with a color</h2>
<p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
</body>
</html>

OUTPUT:
Style a link with a color

This is a link

In addition, links 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
Example

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;
}

/* visited link */

a:visited {

color: green;

/* mouse over link */

a:hover {

color: hotpink;

/* selected link */

a:active {

color: blue;

</style>

</head>

<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a

link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in

the CSS definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS

definition in order to be effective.</p>
</body>

</html>

OUTPUT:
Styling a link depending on state

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in

order to be effective.

Text Decoration

The text-decoration property is mostly used to remove underlines

from links:

Example
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
 text-decoration: underline;
}

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

text-decoration: none;

a:visited {

text-decoration: none;

a:hover {

text-decoration: underline;

a:active {

text-decoration: underline;

}
</style>

</head>

<body

<h2>Styling a link with text-decoration property</h2>

<p><b><a href="default.asp" target="_blank">This is a

link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in

the CSS definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS

definition in order to be effective.</p>

</body>

</html>

OUTPUT:

Styling a link with text-decoration property

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in

order to be effective.
Background Color

The background-color property can be used to specify a background

color for links:

Example
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

background-color: yellow;

}
a:visited {

background-color: cyan;

a:hover {

background-color: lightgreen;

a:active {

background-color: hotpink;

</style>

</head>

<body>

<h2>Styling a link with background-color property</h2>

<p><b><a href="default.asp" target="_blank">This is a

link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in

the CSS definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS

definition in order to be effective.</p>

</body>

</html>
OUTPUT:

Styling a link with background-color property

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in

order to be effective.

Link Buttons

This example demonstrates a more advanced example where we

combine several CSS properties to display links as boxes/buttons:

Example
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
CSS List:
Unordered Lists:

o Coffee
o Tea
o Coca Cola

▪ Coffee
▪ Tea
▪ Coca Cola

Ordered Lists:

1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or
letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists

• Set different list item markers for unordered lists
• Set an image as the list item marker
 • Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item

markers:

Example
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

Note: Some of the values are for unordered lists, and some for
ordered lists.
An Image as The List Item Marker

The list-style-image property specifies an image as the list item

marker:

Example
ul {
list-style-image: url('sqpurple.gif');
}

Position The List Item Markers

The list-style-position property specifies the position of the list-item

markers (bullet points).

"list-style-position: outside;" means that the bullet points will be

outside the list item. The start of each line of a list item will be
aligned vertically. This is default:

• Coffee - A brewed drink prepared from roasted coffee beans...

• Tea
• Coca-cola

"list-style-position: inside;" means that the bullet points will be

inside the list item. As it is part of the list item, it will be part of the
text and push the text at the start:

• Coffee - A brewed drink prepared from roasted coffee beans...

• Tea
• Coca-cola

Example
ul.a {
list-style-position: outside;
}

ul.b {
 list-style-position: inside;
}

Remove Default Settings

The list-style-type:none property can also be used to remove the

markers/bullets. Note that the list also has default margin and
padding. To remove this, add margin:0 and padding:0 to <ul> or
<ol>:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

List - Shorthand property

The list-style property is a shorthand property. It is used to set all

the list properties in one declaration:

Example
ul {
list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property

values are:

• list-style-type (if a list-style-image is specified, the value of this

property will be displayed if the image for some reason cannot
be displayed)
• list-style-position (specifies whether the list-item markers
should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)
If one of the property values above are missing, the default value for
the missing property will be inserted, if any.

Styling List WithColors

We can also style lists with colors, to make them look a little more
interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while
properties added to the <li> tag will affect the individual list items:

Example
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}
 Result:

1. Coffee

2. Tea
3. Coco cola

• Coffee
• Tea
• Coca Cola

Company Contact Country

AlfredsFutterkiste Maria Anders Germany

Berglundssnabbköp Christina Berglund Sweden

Centro comercialMoctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Königlich Essen Philip Cramer Germany

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

MagazziniAlimentariRiuniti Giovanni Rovelli Italy

 CSS Tables
The look of an HTML table can be greatly improved with CSS:

Table Borders

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and
<td> elements:

Firstname Lastname
Peter Griffin
Lois Griffin

Example
table, th, td {
border: 1px solid black;
}

Full-Width Table

The table above might seem small in some cases. If you need a table
that should span the entire screen (full-width), add width: 100% to
the <table> element:

Firstname Lastname
Peter Griffin
Lois Griffin
Example
table {
width: 100%;
}
Double Borders

Notice that the table in the examples above have double borders.
This is because both the table and the <th> and <td> elements have
separate borders.

To remove double borders, take a look at the example below.

Collapse Table Borders

The border-collapse property sets whether the table borders should

be collapsed into a single border:

Firstname Lastname
Peter Griffin
Lois Griffin

Example

table {
border-collapse: collapse;
}

If you only want a border around the table, only specify

the border property for <table>:
Example
table {
border: 1px solid black;
}
If you only want a border around the table, only specify the border
property for <table>:

Firstname Lastname
Peter Griffin
Lois Griffin

CSS Outline
An outline is a line drawn outside the element's border.

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the

borders, to make the element "stand out".
CSS has the following outline properties:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

CSS Outline Style

The outline-style property specifies the style of the outline, and can
have one of the following values:

• dotted - Defines a dotted outline

• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline
• ridge - Defines a 3D ridged outline
• inset - Defines a 3D inset outline
• outset - Defines a 3D outset outline
• none - Defines no outline
• hidden - Defines a hidden outline

The following example shows the different outline-style values:

Example

Demonstration of the different outline styles:

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Result:

CSS :focus Selector:

CSS Syntax
:focus {
css declarations;
}

Example

Select and style an input field when it gets focus:

input:focus {
background-color: yellow;
}
Definition and Usage

The :focus selector is used to select the element that has focus.

Tip: The :focus selector is allowed on elements that accept keyboard

events or other user inputs.

Version: CSS2

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<p>Click inside the text fields to see a yellow background:</p>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</body>
</html>

OUTPUT:

Click inside the text fields to see a yellow background:

First name:
Last name:

CSS :active Selector

CSS Syntax
:active {
css declarations;
}

Example

Select and style the active link:

a:active {
background-color: yellow;
}

Definition and Usage

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

Tip: The :active selector can be used on all elements, not only links.
Tip: Use the :link selector to style links to unvisited pages,
the :visited selector to style links to visited pages, and
the :hover selector to style links when you mouse over them.

Note: :active MUST come after :hover (if present) in the CSS
definition in order to be effective!

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<style>
a:active {
background-color: yellow;
}
</style>
</head>
<body>
<ahref="https://www.w3schools.com">w3schools.com</a>
<ahref="http://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :active selector styles the active link.</p>
</body>
</html>

OUTPUT:
w3schools.com wikipedia.org

Note: The :active selector styles the active link.

CSS Miscellaneous:

In this tutorial we'll learn about few more interesting CSS features.

Extending User Interface with CSS

In this chapter we'll discuss about some interesting user interface
related CSS3properties like resize, outline-offset, etc. that you can
use to enhance your web pages.

Resizing Elements
You can make an element resizable horizontally, vertically or on
both directions with the CSS3 resize property. However, this
property is typically used to remove the default resizable behavior
form the <textarea> form control.

Example

p, div, textarea{
width: 300px;
min-height: 100px;
overflow: auto;
border: 1px solid black;
}
p{
resize: horizontal;
}
div{
resize: both;
}
textarea{
resize: none;
}

Setting Outline Offset

In the previous section you've learnt how to set different properties
for outlines like width, color and styles. However, CSS3 offer one
more property outline-offset for setting the space between an
outline and the border edge of an element. This property can
accepts negative value that means you can also place outline inside
an element.

Example

p, div{
margin: 50px;
height: 100px;
background: #000;
outline: 2px solid red;
}
p{
outline-offset: 10px;
}
div{
outline-offset: -15px;
}
CSS Layout - The position Property

The position property specifies the type of positioning method used

for an element (static, relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used

for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

Elements are then positioned using the top, bottom, left, and right
properties. However, these properties will not work unless
the position property is set first. They also work differently
depending on the position value.

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left,
and right properties.

An element with position: static; is not positioned in any special

way; it is always positioned according to the normal flow of the
page:

This <div> element has position: static;

Here is the CSS that is used:

Example
div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative;

An element with position: relative; is positioned relative to its

normal position.

Setting the top, right, bottom, and left properties of a relatively-

positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left
by the element.

This <div> element has position: relative;

Here is the CSS that is used:

Example

div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;

An element with position: fixed; is positioned relative to the

viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.

A fixed element does not leave a gap in the page where it would
normally have been located.

Notice the fixed element in the lower-right corner of the page. Here
is the CSS that is used:

Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
This <div> element has position: fixed;

position: absolute;

An element with position: absolute; is positioned relative to the

nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).

However; if an absolute positioned element has no positioned

ancestors, it uses the document body, and moves along with page
scrolling.

Note: Absolute positioned elements are removed from the normal

flow, and can overlap elements.
Here is a simple example:

This <div> element has position: relative;

This <div> element has position: absolute;

Here is the CSS that is used:

Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

position: sticky;

An element with position: sticky; is positioned based on the user's

scroll position.

A sticky element toggles between relative and fixed, depending on

the scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like
position:fixed).

Note: Internet Explorer does not support sticky positioning. Safari

requires a -webkit- prefix (see example below). You must also
specify at least one of top, right, bottom or left for sticky positioning
to work.

In this example, the sticky element sticks to the top of the page
(top: 0), when you reach its scroll position.

Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;}

Positioning Text In an Image

How to position text over an image:

Example

Bottom Left
Top Left
Top Right
Bottom Right
Centered
CSS Website Layout

Website Layout

A website is often divided into headers, menus, content and a

footer:

Header
Navigation Menu

Content Main Content Content

Footer

There are tons of different layout designs to choose from. However,

the structure above, is one of the most common, and we will take a
closer look at it in this tutorial.

Header

A header is usually located at the top of the website (or right below
a top navigation menu). It often contains a logo or the website
name:
Example
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
</body>
</html>
Output:

Header

Design Issues:

• It was based on a table architecture system

• Styling was not free of content
• Unstructured design work
• Fewer media applications
• No proper functionality for high graphic elements
• Fewer animations
• Less dynamic design (mainly static)
• Low presentation reflexes