1. No category

Topics to be Covered

Topics to be Covered
CSS Classes
 CSS Background
 CSS Font
 CSS Text
 CSS Links

CSS Classes

The class selector is used to specify a style for a group of
elements.

Unlike the id selector, the class selector is most often used on
several elements.

This allows you to set a particular style for any HTML elements
with the same class.

The class selector is defined with a ".“

The class selector uses the HTML class attribute.
CSS code
.test1{color: red; font-size: 20px; }
HTML Code
<html>
<body>
<p>This is a normal paragraph.</p>
<h3 class="test1">This is a heading</h3>
<p class="test1">This is a paragraph that uses the
test1 CSS code!</p>
</body></html>
This is a normal paragraph.
This is a heading.
This is a paragraph that uses the test1 CSS code!
CSS BACKGROUND
CSS background properties are used to define
the background effects of an element.
 CSS properties used for background effects:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
h4 { background-color: white; }
 p { background-color: #1078E1; }
 ul { background-color: rgb( 149, 206, 145); }

choosing if a background will repeat and which
directions to repeat in.
 precision positioning
 scrolling/static images

Eg. h4{ background-image:url(smallPic.jpg); }
By default, image will repeat horizontally and
vertically.

p { background-image: url(smallPic.jpg); backgroundrepeat: repeat; }

h4 { background-image: url(smallPic.jpg); backgroundrepeat: repeat-y;}

ol { background-image: url(smallPic.jpg); backgroundrepeat: repeat-x;}

ul { background-image: url(smallPic.jpg); backgroundrepeat: no-repeat;}
<html>
<head>
<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
Note: Background attachment’s value can be set to
scroll also
Background Attachment (Contd.)
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
Background Image Positioning

If you would like to define where exactly an
image appears within an HTML element, you
may use CSS's background-position.

There are three different ways of defining
position: length, percentages, and keywords.
Background Image Positioning

p { background-image: url(smallPic.jpg);
background-repeat: no-repeat;
background-position: 20px 10px; }

h4 { background-image: url(smallPic.jpg);
background-repeat: no-repeat;
background-position: 30% 70%; }

ol { background-image: url(smallPic.jpg);
background-repeat: no-repeat;
background-position: top center; }
Background- Shorthand Property

To shorten the code, it is also possible to specify all the properties in one single
property. This is called a shorthand property.

The shorthand property for background is simply "background“.

When using the shorthand property the order of the property values are:





background-color
background-image
background-repeat
background-attachment
background-position

It does not matter if one of the property values is missing, as long as the ones that
are present are in this order.

Eg. body {background:#ffffff url('img_tree.png') no-repeat right top;}
Background Image Positioning

When using pixels, the location of the image will be
(A)px from the left of the screen and (B)px from the
top of the screen, where A and B are integers.

When using percentages, the location of the image
will be (A)% from the left of the screen and (B)% from
the top of the screen, where A and B are integers.

Available positioning keywords are: top, right, bottom,
left, and center.
CSS TEXT
Text Color

The color property is used to set the color of
the text.

Eg. h4 { color: red; }
Text Alignment

Text can be centered, or aligned to the left or
right, or justified.

Eg. h1 {text-align:center;}
Text Decoration

a {text-decoration:none;}

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}
Text Decoration Example
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<a>hyperlink</a>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
Text Transformation
<html>
<head>
<style type="text/css">
.uppercase {text-transform:uppercase;}
.lowercase {text-transform:lowercase;}
.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 Transformation
THIS IS SOME TEXT.
this is some text.
This Is Some Text.
Text Indent
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>
<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. 'Whenever you feel like
criticizing anyone,' he told me, just remember that all the people in this
world haven't had the advantages that you've had.'</p>
</body>
</html>
Text Indent
In my younger and more vulnerable years
my father gave me some advice that I've been
turning over in my mind ever since. 'Whenever
you feel like criticizing anyone,' he told me, just
remember that all the people in this world
haven't had the advantages that you've had.'
Text Wrapping

p { white-space: nowrap; }

p { white-space: normal; }

p { white-space: pre; }
Word Spacing

p { word-spacing: 10px; }

Eg. This paragraph has a word-spacing value
of 10px.
Letter Spacing

p { letter-spacing: 3px; }

Eg. T h i s
CSS FONT
Font Family
Generic Family
Font Family
Description
Serif
Times New Roman
Georgia
Serif fonts have small
lines at the ends on
some characters
Sans Serif
Arial
Verdana
"Sans" means without these fonts do not have
the lines at the ends of
characters
Monospace
Courier New
Lucida Console
All monospace
characters have the
same width
Font Family
Eg. p{font-family:"Times New Roman", Times, serif;}
Font

Font-style




Normal
Italic
Oblique
Font-weight






Normal
Bold
Bolder
Lighter
100
…
900
CSS Links
CSS Links
a:link {color:#FF0000;} /* unvisited link*/
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states,
there are some order rules:
a:hover
MUST come after a:link and a:visited
a:active MUST come after a:hover
Practice Question
Add different styles to hyperlinks
When Mouse is over the link
 One hyperlink should change background color
 Another hyperlink should change color
 Another hyperlink should change font size
 Another hyperlink should change font family
 Another hyperlink should change text decoration

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz