BEAUTIFUL CSS PRESENTATION EASY TO MADE

WHAT IS CSS
TYPES OF CSS
PARTS OF CSS
TEXT PROPERTIES
DIV TAG

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-
left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>

<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

The color property is
used to set the color of
the text.

<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>
</body>
</html>

The direction property is used to
change the text direction of an
element

<html>
<head>
<style>
div.ex1 {
direction: rtl;
}
</style>
</head>
<body>
<div>This is default text direction.</div>
<div class="ex1">This is right-to-left text direction.</div>
</body>
</html>

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

<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>

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

<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>A link with no underline: <a
href="http://www.w3schools.com">W3Schools.com</a>
</p>
</body>
</html>

The text-transform property is
used to specify uppercase and
lowercase letters in a text.

<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>

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

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools"
width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools"
width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="w3schools_logo.gif"
alt="W3Schools" width="270" height="50" /> image with a text-
bottom alignment.</p>
</body>
</html>

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>
<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>

The letter-spacing property
is used to specify the space
between the characters in
a text.

<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
</body>
</html>

The line-height property is
used to specify the space
between lines

<!DOCTYPE html>
<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>

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>
</body>
</html>

The text-shadow property
adds shadow to text

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px #FF0000;
}
</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>

The white-space property
specifies how white-space
inside an element is
handled.

<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
</p>
</body>
</html>

<html>
<head>
<style>
</style>
</head>
<body>
<div>This is default text
direction.</div>
<div>This is right-to-left text
direction.</div>
</body>
</html>

BEAUTIFUL CSS PRESENTATION EASY TO MADE

BEAUTIFUL CSS PRESENTATION EASY TO MADE

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (14)

Similar to BEAUTIFUL CSS PRESENTATION EASY TO MADE

Similar to BEAUTIFUL CSS PRESENTATION EASY TO MADE (20)

Recently uploaded

Recently uploaded (20)

BEAUTIFUL CSS PRESENTATION EASY TO MADE