Scribd
Upload
21 views

Cascading Style Sheets

Uploaded by

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

Cascading Style Sheets

Uploaded by

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

Image Map &

Cascading Style Sheets (CSS)

SASIKUMAR M
Image map
The <map> tag is used to define a client-side image-map. An
image-map is an image with clickable areas
<html>
<body>
<img src="book.png" alt=“books" usemap="#bookmap">
<map name="bookmap">
<area shape="poly" coords="76,0,35,28,50,72,100,75,112,128“
alt="poly" href="fig1.html">
<area shape="rect" coords="23,85,128,127" alt="rectangle"
href="fig2.html">
<area shape="circle" coords="74,168,30"
alt="circle" href="fig3.html">
</map>
</body>
</html>
Audio controls
<html>
<body>
<audio controls >
<source src="lion.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Video frame
<html>
<body>
<video controls>
<source src="birthday songs.mp4"
type="video/mp4">
</video>
</body>
</html>
Iframe Example
<html> <head> <title>HTML Iframe Example </title> </head>
<body>
<iframe src="logo.html" height="100" width="1350"
title="Iframe Example" ></iframe><br>
<iframe src="ref.html" height="525" width="100"
title="Iframe1 Example" align="left"></iframe><br>
<iframe src="audioframe.html" height="200" width="100"
title="Iframe2 Example" align="right" ></iframe><br>
<iframe src="videoframe.html" height="400" width="200"
title="Iframe3 Example" align="right" ></iframe><br>
<iframe height="450" width="900“
title="Iframe4 Example" name="iframe_a"
align="center"></iframe>
</body>
</html>
Logo.html
<html>
<head>
<title> logo</title>
</head>
<body>
<marquee> welcome </marquee>
</body>
</html>
Ref.html
<html><head><title> reference </title> </head>
<body>
<a href="rose.html"
target="iframe_a">rose</a><br>
<a href="car.html" target="iframe_a">car</a><br>
<a href="breakfast.html"
target="iframe_a">breakfast</a><br>
<a href="vegetable.html"
target="iframe_a">vegetable</a><br>
<a href="dessert.html"
target="iframe_a">dessert</a><br>
</body>
</html>
Introduction to CSS
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed
on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of
multiple web pages all at once
• External style sheets are stored in CSS files
Why Use CSS?
• CSS is used to define styles for web pages, including
the design, layout and variations in display for
different devices and screen sizes.
CSS Syntax and Selectors
• A CSS rule-set consists of a selector and a declaration block:

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.
Selectors
• Type Selectors
– Give a color to all level 1 headings
h1 { color: #36CFFF; }
• Universal Selectors
– the universal selector quite simply matches the
name of any element type −
* { color: #000000; }
• Descendant Selectors
– to apply a style rule to a particular element only
when it lies inside a particular element.
ul em { color: #000000; }
Descendent selector
<html>
<head>
<style type=“text/css”>
ul em { color:red; }
</style>
</head>
<body>
<p>An em element is displayed like this:</p>
<em>Some emphasized text</em>
<ul><em><li> tea </li> <li> coffee </li> </em></ul>
<ul> <li> apple </li><li> mango </li></ul>
</body>
</html>
Selectors Contd.
• Class Selectors
– style rules based on the class attribute of the
elements.
.black { color: #000000; }
h1.black { color: #000000; }
<p class="center bold">
This para will be styled by the
classes center and bold. </p>
Example
<html>
<head>
<style type="text/css">
//h1.center{ text-align: center; color: red; }
p.center { text-align: center; color: red; }
p.large { font-size: 400%; }
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned,
and in a large font-size.</p>
</body>
</html>
Selectors Contd.
ID Selectors
• style rules based on the id attribute of the
elements
#black { color: #000000; }
h1#black { color: #000000; }
#black h2 { color: #000000; }
Child Selectors
– the descendant selectors
body > p { color: #000000; }
• Attribute Selectors
– apply styles to HTML elements with particular attributes. The style
rule below will match all the input elements having a type attribute
with a value of text −
– input[type = "text"]{ color: #000000; }
• There are following rules applied to attribute selector.
• p[lang] - Selects all paragraph elements with a lang attribute.
• p[lang="fr"] - Selects all paragraph elements
whose lang attribute has a value of exactly "fr".
• p[lang~="fr"] - Selects all paragraph elements
whose lang attribute contains the word "fr".
• p[lang|="en"] - Selects all paragraph elements
whose lang attribute contains values that are exactly "en", or
begin with "en-".
Selectors Contd.
Multiple Style Rules
h1 { color: #36C; font-weight: normal;
letter-spacing: .4em; margin-bottom: 1em;
text-transform: lowercase; }
Grouping Selectors
h1, h2, h3 { color: #36C; font-weight: normal;
letter-spacing: .4em; margin-bottom: 1em;
text-transform: lowercase; }

#content, #footer, #supplement { position: absolute;


left: 510px;
width: 200px; }
Embedded CSS - The <style> Element

• CSS rules into an HTML document using the <style> element.


• This tag is placed inside <head>...</head> tags
Example
<html> <head>
<style type = "text/css" media = "all">
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>
Attributes
Attribute Value Description
Type text/css Specifies the style sheet language as a
content-type (MIME type). This is
required attribute.
Media screen Specifies the device the document
tty will be displayed on. Default value
tv is all. This is an optional attribute.
projection
handheld
Print
braille
aural
all
Example
Example all <p> elements will be center-aligned, with a red text color:
<html>
<head>
<style type=“text/css”>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Welcome to CSS</p>
</body>
</html>
<html>
<head>
<style type=“text/css”>>
#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>
Class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.)
character, followed by the name of the class.
<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 and center-aligned paragraph.</p>
</body> </html>
HTML elements can also refer to more than one class.
<html> <head>
<style>
p.center { text-align: center; color: red; }
p.large { font-size: 300%; }
</style> </head>
<body>
<h1 class="center">This heading will not be
affected</h1>
<p class="center">This paragraph will be red and
center-aligned.</p>
<p class="center large">This paragraph will be red,
center-aligned, and in a large font-size.</p>
font-Size
font-size:medium|xx-small| x-
small|small|large| x-
large|xx-large |smaller|larger|
length|initial| inherit;
Font-size
Value Description
medium Sets the font-size to a medium size. This is default

xx-small Sets the font-size to an xx-small size


x-small Sets the font-size to an extra small size

small Sets the font-size to a small size


large Sets the font-size to a large size
x-large Sets the font-size to an extra large size

xx-large Sets the font-size to an xx-large size


smaller Sets the font-size to a smaller size than the parent element

larger Sets the font-size to a larger size than the parent element

length Sets the font-size to a fixed size in px, cm, etc.

% Sets the font-size to a percent of the parent element's font size

initial Sets this property to its default value.

inherit Inherits this property from its parent element.


Multiple Style Rules
<html>
<head>
<title> Multiple style Selectors </title>
<style type="text/css">
h1 { color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase; }

</style>
</head>
<body>
<h1>Hello World!</h1>
<h2> Hai Welcome</h2>
</body>
</html>
Group selectors
<html>
<head>
<title> Grouping Selectors </title>
<style type="text/css">
h1,h2,p { color: #foo;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase; }

</style>
</head>
<body>
<h1>18X107 Web Design Laboratory</h1>
<h2> Hai Welcome</h2>
<p> BSC COMPUTER SYSTEMS and DESIGN </p>
</body>
</html>
• Three Ways to Insert CSS
–External style sheet
–Internal style sheet
–Inline style
Inline styles
• 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.
<h1 style="color:blue;margin-left:30px;">
This is a heading
</h1>
Inline style sheets
<html>
<head>
<title> Inline Cascading Style Sheets </title>
</head>
<body>
<h1 style="color:blue; margin-left:230px;">
Welcome to HTML page
</h1>
<h2> Hai, How Are You?</h2>
<p> This session is Web Design Lab Design </p>
<ul type="circle">
<li> coffee </li>
<li> tea </li>
</ul>
</body>
</html>
Internal Style Sheet
• An internal style sheet may be used if one single
page has a unique style.
• Internal styles are defined within the <style>
element, inside the <head> section of an HTML page:
<head>
<style type=“text/css”>
body { background-color: red; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
External Style Sheet
• With an external style sheet, change the look of an
entire website by changing just one file.
• Each page must include a reference to the external
style sheet file inside the <link> element.
• The <link> element goes inside the <head>
section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css“ >
</head>
Mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Html page 1
<html>
<head>
<title> External Style Sheet1
</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1> Welcome to HTML page </h1>
<h2> Hai, How Are You?</h2>
</body>
</html>
Html page2
<html>
<head>
<title> External Style Sheet2
</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1> Web Design lab session </h1>
<h2> Hai, How Are You?</h2>
</body>
</html>
Html page3
<html>
<head>
<title> External Style Sheet3
</title>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1> Welcome Ist year BSC CSD students </h1>
<h2> Hai, How Are You?</h2>
</body>
</html>
CSS Comment
<html> <head>
<style type=“text/css”>
p { color: red;
<!-- This is a single-line comment -->
text-align: center; }
</style>
</head>
<body> <p>Hello World!</p>
<!-- HTML comment -not displayed in browser -->
</body> </html>
CSS - Measurement Units

% - Defines a measurement as a percentage relative to another


value, typically an enclosing element.
p {font-size: 16pt; line-height: 125%;}
Cm - Defines a measurement in centimeters.
div {margin-bottom: 2cm;}
em - A relative measurement for the height of a font in
em spaces. Because an em unit is equivalent to the size of a
given font, if assign a font to 12pt, each "em" unit would be
12pt; thus, 2em would be 24pt.
p {letter-spacing: 7em;}
Ex This value defines a measurement relative to a font's x-height.
The x-height is determined by the height of the font's
lowercase letter x.
p {font-size: 24pt; line-height: 3ex;}
Contd.
In Defines a measurement in inches.
p {word-spacing: .15in;}
mm Defines a measurement in millimeters.
p {word-spacing: 15mm;}
Pc Defines a measurement in picas. A pica is equivalent to 12
points; thus, there are 6 picas per inch.
p {font-size: 20pc;}
Pt Defines a measurement in points. A point is defined as 1/72nd
of an inch.
body {font-size: 18pt;}
Px Defines a measurement in screen pixels.
p {padding: 25px;}
Vh 1% of viewport height. h2 { font-size: 3.0vh; }
Vw 1% of viewport width h1 { font-size: 5.9vw; }
Vmin 1vw or 1vh, whichever is smaller p { font-size: 2vmin;}
CSS3 Modules
• CSS3 Modules are having old CSS specifications as
well as extension features.
– Selectors
– Box Model
– Backgrounds and Borders
– Image Values and Replaced Content
– Text Effects
– 2D/3D Transformations
– Animations
– Multiple Column Layout
– User Interface
Background color
<h1 style="background-color: DodgerBlue;“ >
Hello World</h1>
<p style="background-color:Tomato;">
Welcome</p>
Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Hello World </p>
<p style="color:MediumSeaGreen;“>Welcome</p>
Example
<html>
<head>
<title> Inline Cascading Style Sheets
</title>
</head>
<body>
<h1 style="color:blue; margin-left:230px;"> Welcome to HTML page </h1>
<!-- Background-color property -->
<h2 style="background-color: DodgerBlue;" > Hello World</h2>
<!-- text color (foregroud color) property -->
<p style="color:tomato;"> This session is Web Design Lab Design </p>
<ul type="circle">
<li> coffee </li>
<li> tea </li>
</ul>
</body>
</html>
Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
<h1 style="background-color:rgb(255, 99, 71);">Hello</h1>
<h1 style="background-color:#ff6347;">Hello</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">Hello</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">
Hello</h1>
Example
<html>
<head>
<title> Inline Cascading Style Sheets </title>
</head>
<body>
<!-- border color -->
<h1 style="border:2px solid Tomato;"> Hello World </h1>
<h1 style="border:2mm solid DodgerBlue;"> Hello World </h1>
<h1 style="border:2pt solid Violet;"> Hello World</h1>
<!-- Color Values-->
<!-- hsl - high, saturation , lightness-->
<!-- rgba - reg green blue alpha(0 to 1) opacity-->
<h1 style ="background-color:rgb(233,99,71);"> BSC CSD Students </h1>
<h1 style ="background-color:#ff6347;"> BSC CSD Students </h1>
<h1 style ="background-color:hsl(9,100%,64%);"> BSC CSD Students </h1>
<h1 style ="background-color:rgba(233,99,71,0.4);"> BSC CSD Students </h1>
</body>
</html>
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:
<html> <head> <style type=“text/css”>
body {
background-image: url("paper.gif");
}
</style> </head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background</p>
</body> </html>
Contd.

Properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat; // repeat-x | repeat-y
background-position: right top;
margin-right: 200px;
background-attachment: fixed; // fixed | relative
}
</style>
</head>
<body>
Border styles
• The border-style property specifies what kind of border to display.
– dotted - Defines a dotted border
– dashed - Defines a dashed border
– solid - Defines a solid border
– double - Defines a double border
– groove - Defines a 3D grooved border. The effect depends on the border-
color value
– ridge - Defines a 3D ridged border. The effect depends on the border-
color value
– inset - Defines a 3D inset border. The effect depends on the border-color
value
– outset - Defines a 3D outset border. The effect depends on the border-
color value
– none - Defines no border
– hidden - Defines a hidden border
Example
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid
double;}
<html> <head> <style>
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;}
p.solid {border-style: solid;} p.double {border-style: double;}
p.groove {border-style: groove;} p.ridge {border-style: ridge;}
p.inset {border-style: inset;} p.outset {border-style: outset;}
p.none {border-style: none;} p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style> </head> <body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p> <p class="outset">An outset border.</p>
<p class="none">No border.</p> <p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p> </body> </html>
Border Width
• The border-width property specifies the width of the
four borders.
• The width can be set as a specific size (in px, pt, cm, em,
etc) or by using one of the three pre-defined values:
thin, medium, or thick.
• The border-width property can have from one to four
values (for the top border, right border, bottom border,
and the left border).
border-style: solid;
border-width: 5px;
border-width: 2px 10px 4px 20px;
border-color: red green blue yellow;
border-radius: 5px; //rounded border
CSS Border Properties
Property Description
Border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
Margin - Individual Sides
• CSS has properties for specifying the margin for each side of an
element:
– margin-top
– margin-right
– margin-bottom
– margin-left
• All the margin properties can have the following values:
– auto - the browser calculates the margin
– length - specifies a margin in px, pt, cm, etc.
– % - specifies a margin in % of the width of the containing element
– inherit - specifies that the margin should be inherited from the parent element
Example
p{
margin: 25px 50px 75px 100px;
}
Example
<html> <head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style> </head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a
bottom margin of 100px, and a left margin of 80px.</div>
</body> </html>
CSS padding
• The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
• With CSS, full control over the padding. There are properties
for setting the padding for each side of an element (top,
right, bottom, and left).
– padding-top
– padding-right
– padding-bottom
– padding-left
• All the padding properties can have the following values:
– length - specifies a padding in px, pt, cm, etc.
– % - specifies a padding in % of the width of the containing element
– inherit - specifies that the padding should be inherited from the
parent element
Example
<html> <head> <style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style> </head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a
bottom padding of 50px, and a left padding of 80px.</div>
</body> </html>
CSS Dimension Properties
Property Description
Height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
Width Sets the width of an element

• div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Box Model
• All HTML elements can be considered as boxes. 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:
• Different parts in Box Model:
– 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
Example
<html><head> <style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</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 actual content of the box. We have added a 25px padding,
25px margin and a 25px green border. </div>
</body> </html>
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
– outline-width: thin;// medium|thick|thin
• outline-offset: 15px;//The outline-offset property adds space between
an outline and the edge/border of an element.
• The space between an element and its outline is transparent.
<html> <head> <style>
p.ex1 {
border: 1px solid black; outline-style: solid; outline-
color: red;}
p.ex2 { border: 1px solid black; outline-style: double;
outline-color: green;}
p.ex3 {
border: 1px solid black; outline-style: outset;
outline-color: yellow;}
</style> </head> <body>
<h2>The outline-color Property</h2>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A double green outline.</p>
<p class="ex3">An outset yellow outline.</p>
</body> </html>
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:
<html> <head> <style>
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
</style> </head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
Text-decoration
<html> <head> <style>
div.a { text-decoration-line: underline; text-decoration-style: solid; }
div.b { text-decoration-line: underline; text-decoration-style: wavy; }
div.c { text-decoration-line: underline; text-decoration-style: double; }
div.d { text-decoration-line: overline underline; text-decoration-style:
wavy; text-decoration-color: blue; }
</style>
</head>
<body>
<h1>The text-decoration-style Property</h1>
<div class="a">This is some text with a solid underline.</div> <br>
<div class="b">This is some text with a wavy underline.</div> <br>
<div class="c">This is some text with a double underline.</div> <br>
<div class="d">This is some text with a wavy over- and underline.</div>
</body></html>
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:
<html> <head> <style>
p.uppercase { text-transform: uppercase; }
p.lowercase { text-transform: lowercase; }
p.capitalize { text-transform: capitalize; }
</style> </head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
Text Indentation
• The text-indent property is used to specify the indentation of the
first line of a text:
<html><head> <style>
p{
text-indent: 50px;
}
</style> </head> <body>
<h1> Welcome paragraph Indentation</h1>
<p> Hai,How Are you </p>
<h1> sub section paragraph Indentation</h1>
<p>In my younger and more vulnerable years my father gave
me some advice
that I've been turning over in my mind ever since.
</p></body>
</html>
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:
<html> <head> <style>
h1 { letter-spacing: 3px; }
h2 { letter-spacing: -3px; }
</style> </head> <body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body> </html>
Line Height
• The line-height property is used to specify the space between
lines:
<html> <head> <style>
p.small { line-height: 0.7; }
p.big { line-height: 1.8; }
</style> </head>
<body>
<p> This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to
120%.<br> </p>
<p class="small"> This is a paragraph with a smaller line-
height.<br>
This is a paragraph with a smaller line-height.<br> </p>
<p class="big"> This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br> </p>
</body> </html>
Text Direction
• The direction property is used to change the
text direction of an element:
<html> <head> <style>
p.ex1 { direction: rtl; }
</style> </head>
<body>
<p>This is the default text direction.</p>
<p class="ex1"><bdo dir="rtl"> This is right-to-
left text direction</bdo></p>
</body> </html>
word-spacing
• The word-spacing property is used to specify
the space between the words in a text.
<html> <head> <style>
h1 { word-spacing: 10px; }
h2 { word-spacing: -5px; }
</style> </head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body> </html>
Text-shadow
• The text-shadow property adds shadow to text.
• The following example specifies the position of the
horizontal shadow (3px), the position of the vertical
shadow (2px) and the color of the shadow (red):
<html> <head> <style>
h1 { text-shadow: 3px 2px red; }
</style> </head>
<body>
<h1>Text-shadow effect</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier do not
support the text-shadow property.</p>
</body>
</html>
Font
• The font-family property should hold several font names as a "fallback" system. If the browser
does not support the first font, it tries the next font, and so on.
• p{
font-family: georgia, garamond, serif;">
}
• h1 {
font-size: 40px; //em
}

h2 {
font-size: 30px;
}

p{
font-size: 14px;
}
• p.normal {
font-weight: normal; //bold/italic
}

p.thick {
font-weight: bold;
}
• p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}
Font Variant
• The font-variant property specifies whether or not a text should
be displayed in a small-caps font.
• In a small-caps font, all lowercase letters are converted to
uppercase letters. However, the converted uppercase letters
appears in a smaller font size than the original uppercase letters
in the text.
• p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}
Font Awesome Icons
• <html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/
libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>


<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>
Bootstrap Icons
• <html>
<head>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>


<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>
Google Icons
• <html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/
icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>
Links
• 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 mouse over it
• a:active - a link the moment it is clicked
Example
<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>
<p><b><a href=“fig1.html “>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>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
lists
<html> <head> <style>
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; }
</style> </head>
<body>
<p>Example of unordered lists:</p>
<ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>
<ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>
<ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>
</body> </html>
List-style-type values
Value Description
disc Default value. The marker is a filled circle
armenian The marker is traditional Armenian numbering
circle The marker is a circle
cjk-ideographic The marker is plain ideographic numbers
decimal The marker is a number
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)

georgian The marker is traditional Georgian numbering


hebrew The marker is traditional Hebrew numbering
hiragana The marker is traditional Hiragana numbering
hiragana-iroha The marker is traditional Hiragana iroha numbering
katakana The marker is traditional Katakana numbering
katakana-iroha The marker is traditional Katakana iroha numbering
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
none No marker is shown
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek The marker is upper-greek
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
<html>
<head>
<style>
ul { list-style-image: url(diamond.png); }
</style> </head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
List-style-position
• 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
• The "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
<html> <head> <style>
ol { background: #ff9999; padding: 20px;
list-style-position:inside; }
ul { background: #3399ff; padding: 20px; }
ol li { background: #ffe5e5; padding: 5px; margin-left:
35px; }
ul li { background: #cce5ff; margin: 5px; }
</style> </head> <body>
<h1>Styling Lists With Colors:</h1>
<ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>
<ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>
</body>
</html>
Table
<html> <head> <style>
table, th, td { border: 1px solid black; }
</style> </head>
<body> <h2>Add a border to a table:</h2>
<table> <tr> <th>Firstname</th>
<th>Lastname</th> </tr>
<tr> <td>Peter</td> <td>Griffin</td>
</tr>
<tr> <td>Lois</td> <td>Griffin</td> </tr>
</table> </body></html>
Menus in DHTML
<html> <head> <meta name="viewport" content="width=device-width,
initial-scale=1"> <style>
.dropbtn { background-color: #3498DB; color: white; padding: 16px;
font-size: 16px; border: none;
cursor: pointer; }
.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-
color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { color: black; padding: 12px 16px; text-
decoration: none; display: block; } .dropdown a:hover {background-
color: #ddd;}
.show {display: block;}
</style>
</head>
Contd.
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown"> <button onclick="myFunction()"
class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a> <a href="#about">About</a>
<a href="#contact">Contact</a> </div>
</div>
<script> /* When the user clicks on the button, toggle between hiding and showing the
dropdown content */
function myFunction()
{ document.getElementById("myDropdown").classList.toggle("show"); }
// Close the dropdown if the user clicks outside of it window.onclick = function(event) { i(!
event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content"); var I; for (i
= 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show');
} } }}
</script> </body> </html>
overflow
• The CSS overflow property controls what happens to
content that is too big to fit into an area.
• The overflow property specifies whether to clip the
content or to add scrollbars when the content of an
element is too big to fit in the specified area.
• The overflow property has the following values:
– visible - Default. The overflow is not clipped. The content
renders outside the element's box
– hidden - The overflow is clipped, and the rest of the content
will be invisible
– scroll - The overflow is clipped, and a scrollbar is added to see
the rest of the content
– auto - Similar to scroll, but it adds scrollbars only when
necessary
Example
<html>
<head>
<style type=“text/css”>
div {
background-color: #eee; width: 200px; height: 50px;
border: 1px dotted black; overflow: auto; }
</style>
<!--overflow: visible |hidden|scroll|auto -->
</head>
<body>
<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders
outside the element's box:</p>
<div>You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an
element's box.</div>
</body>
</html>
CSS positioning
<html>
<head>
<style>
h2 { position: absolute; left: 100px; top: 150px; }
</style> </head>
<body>
<h1>The position Property</h1>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed
anywhere on a page. The heading below is placed 100px from
the left of the page and 150px from the top of the page.</p>
</body>
</html>
Property Values
Value Description
static Default value. Elements render in order, as they appear in the
document flow
Absolute The element is positioned relative to its first positioned (not
static) ancestor element
Fixed The element is positioned relative to the browser window
Relative The element is positioned relative to its normal position, so
"left:20px" adds 20 pixels to the element's LEFT position
Sticky The element 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).
Initial Sets this property to its default value.
Inherit Inherits this property from its parent element.
<html>
<head>
<style> h2.pos_left { position: relative; left: -30px; }
h2.pos_right { position: relative; left: 50px; } </style> </head>
<body>
<h1>The position Property</h1>
<p>Relative positioning moves an element RELATIVE to its original
position.</p>
<p>The style "left: -30px;" subtracts 30 pixels from the element's original left
position.</p>
<p>The style "left: 50px;" adds 50 pixels to the element's original left
position.</p>
<h2 class="pos_left">This heading is moved left according to its normal
position</h2>
<h2 class="pos_right">This heading is moved right according to its normal
position</h2>
</body> </html>
Multi-Column Layout
• The CSS multi-column layout allows easy definition of
multiple columns of text - just like in newspapers:
– column-count
– column-gap
– column-rule-style
– column-rule-width
– column-rule-color
– column-rule
– column-span
– column-width
Multi-column Properties
Property Description
column-count Specifies the number of columns an element should be
divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-*
properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span
across
column-width Specifies a suggested, optimal width for the columns
columns A shorthand property for setting column-width and
column-count
Example
<html>
<head>
<style type=“text/css”>
.newspaper { column-count: 3; column-gap: 40px; }
h2 { column-span: all;}
</style>
</head>
<body>
<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
Multiple background
<html>
<head>
<style type=“text/css”>
#example1 {
background-image: url(rose.png), url(boy.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</div>
</body>
</html>
Linear Gradient
<html>
<head>
<style type=“text/css”>
#grad1 { height: 200px; background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow, green);}
#grad2 { height: 200px; background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);}
#grad3 { height: 200px; background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red 10%, green 85%, blue 90%);}
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>
<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>
<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>
<h2>3 Color Stops (not evenly spaced):</h2>
div id="grad3"></div>
</body>
</html>
Radial Gradient
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<h1>Repeating Radial Gradient</h1>
<div id="grad1"></div>
</body>
</html>
Rounded corners
<html> <head> <style>
#rcorners1 { border-radius: 25px; background: #8AC007;
padding: 20px; width: 200px; height: 150px; }
#rcorners2 { border-radius: 55px; border: 2px solid
#8AC007; padding: 20px; width: 200px; height: 50px; }
#rcorners3 { border-radius: 25px; background: url(car.png);
background-position: left top; background-repeat: repeat;
padding: 20px; width: 200px; height: 150px; }
</style> </head>
<body> <p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body> </html>
Border image
<html> <head>
<style>
#borderimg1 { border: 10px solid transparent; padding: 15px;
border-image-source: url(rose.png);
border-image-repeat: round; border-image-slice: 30; border-image-width:
10px; }
#borderimg2 { border: 10px solid transparent; padding: 15px;
border-image-source: url(dessert.png);
border-image-repeat: round; border-image-slice: 30; border-image-width:
20px; }
#borderimg3 { border: 10px solid transparent; padding: 15px; border-image-
source: url(fruits.png);
border-image-repeat: round; border-image-slice: 30; border-image-width: 30px; }
</style>
</head>
<body>
<p id = "borderimg1">This is image border example.</p>
<p id = "borderimg2">This is image border example.</p>
<p id = "borderimg3">This is image border example.</p>
</body>
</html>
Multi background images
<html>
<head>
<style>
#multibackground { background-image: url(rose.png), url(boy.png);
background-position: left top, left top; background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>Web Design Lab</h1>
<p>
WEb lab originated from the idea that there exists a class of <br>
readers who respond better to online content and prefer to learn new<br>
skills at their own pace from the comforts of their drawing rooms. <br>
The journey commenced with a single tutorial on HTML in 2006 and elated <br>
by the response it generated, we worked our way to adding fresh tutorials <br>
to our repository which now proudly flaunts a wealth of tutorials and <br>
allied articles on topics ranging from programming languages to web designing <br>
to academics and much more..
</p>
</div>
</body>
</html>
Animation
• Animation is process of making shape changes and creating motions
with elements.
@keyframes
• Keyframes will control the intermediate animation steps in CSS3.

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation
Example
<html>
<head>
<style>
div {
width: 100px; height: 100px; background-color: #ff0000;
animation-name: example; animation-duration: 4s;
animation-iteration-count: 3; animation-direction: reverse;
}
@keyframes example {
from {background-color: #ff0000;}
to {background-color: #00ff00;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier
versions.</p>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>
Example
<html>
<head>
<style>
div {
width: 100px; height: 100px; background-color: red;
position: relative; animation-name: example; animation-duration: 4s;
animation-delay: 2s; animation-direction: reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Animation direction
• The animation-direction property specifies
whether an animation should be played
forwards, backwards or in alternate cycles.
– normal - The animation is played as normal
(forwards). This is default
– reverse - The animation is played in reverse
direction (backwards)
– alternate - The animation is played forwards first,
then backwards
– alternate-reverse - The animation is played
backwards first, then forwards
Animation
<html> <head> <style>
div {
width: 100px; height: 50px; background-color: red; font-weight: bold; position: relative;
animation: mymove 5s infinite; }
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove { from {left: 0px;} to {left: 300px;} }


</style>
</head>
<body>
<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9
and earlier versions.</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>
Animation -Fullmode
• CSS animations do not affect an element before the first keyframe is
played or after the last keyframe is played. The animation-fill-mode
property can override this behavior.
• The animation-fill-mode property specifies a style for the target element
when the animation is not playing (before it starts, after it ends, or both).
• The animation-fill-mode property can have the following values:
• none - Default value. Animation will not apply any styles to the element
before or after it is executing
• forwards - The element will retain the style values that is set by the last
keyframe (depends on animation-direction and animation-iteration-
count)
• backwards - The element will get the style values that is set by the first
keyframe (depends on animation-direction), and retain this during the
animation-delay period
• both - The animation will follow the rules for both forwards and
backwards, extending the animation properties in both directions
Animation-Full property
<html>
<head>
<style>
div {
width: 100px; height: 100px; background: red;
position: relative; animation-name: example; animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<p>Let the div element retain the style values from the last keyframe when the animation ends:</p>
<div></div>
<p><strong>Note:</strong> The animation-fill-mode property is not supported in Internet Explorer 9 and
earlier versions.</p>
</body>
</html>
User Interface -Resize
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>Welcome to PSG TECH</div>
</body>
</html>
User Interface
<html>
<head>
<style>
div {
margin: 100px; padding: 10px; width: 300px;
height: 200px; border: 5px solid pink;
outline: 5px solid green; outline-offset: 55px;
}
</style>
</head>
<body>
<div>Welcome to PSG TECH</div>
</body>
</html>
Property
CSS Animation
Description
Properties
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards,
backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete
one cycle
animation-fill-mode Specifies a style for the element when the animation is not
playing (before it starts, after it ends, or both)
animation-iteration-co Specifies the number of times an animation should be played
unt
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-funct Specifies the speed curve of the animation
ion
Tooltip text
<html>
<style>
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden; width: 120px; background-color: black;
color: #fff; text-align: center; border-radius: 6px; padding: 5px 0;
/* Position the tooltip */
position: absolute; z-index: 1; }
.tooltip:hover .tooltiptext { visibility: visible; }
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and
continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
Vertical Menu
<html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> .vertical-menu { width: 200px; }
.vertical-menu a { background-color: #eee; color: black; display: block; padding:
12px; text-decoration: none; }
.vertical-menu a:hover { background-color: #ccc; }
.vertical-menu a.active { background-color: #4CAF50; color: white; }
</style>
</head>
<body>
<h1>Vertical Menu</h1>
<div class="vertical-menu">
<a href="#" class="active">Home</a>
<a href=“fig1.html">Link 1</a>
<a href=“fig2.html">Link 2</a>
<a href=“fig3.html">Link 3</a>
</div>
</body>
</html>
Horizontal Menu
<html> <head>
<style>
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden;
background-color: #333; }
li { float: left; }
li a { display: block; color: white; text-align: center; padding: 14px 16px; text-
decoration: none; }
li a:hover { background-color: #111; }
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="fig1.html">News</a></li>
<li><a href="fig2.html">Contact</a></li>
<li><a href="fig3.html">About</a></li>
</ul>
</body>
</html>
Entity Character reference
Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;

' single quotation mark &apos; &#39;


(apostrophe)
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
Example
<html>
<head>
<title>HTML Entities</title>
</head>
<body>
&lt;div id = &quot;character&quot;&gt;
</body>
</html>
Output
<div id = "character">
Web Design Lab - CA1 Pattern
• Date of Exam: 02/12/2020 AN session (2 to 5
PM)
• Text formatting commands and list tags (5)
• Anchor tag (href) with Image tag with alignment
(5)
• Table Design(5)
• Image map with list tags (5)/form design (5)
• MCQ (5)
• Total:25 marks

You might also like