Scribd
Upload
7 views2 pages

Sony 2

The document is an HTML example demonstrating text alignment with CSS styles. It includes left, center, and right-aligned text, each accompanied by explanations of their effective usage. The layout is designed with a container that has a background color and padding for visual appeal.

Uploaded by

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

Sony 2

The document is an HTML example demonstrating text alignment with CSS styles. It includes left, center, and right-aligned text, each accompanied by explanations of their effective usage. The layout is designed with a container that has a background color and padding for visual appeal.

Uploaded by

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

<!

DOCTYPE html>
<html>
<head>
<title>Text Alignment Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.container {
background-color: #e0e0d1;
padding: 20px;
text-align: center;
width: 80%;
margin: auto;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.left {
text-align: left;
color: #2e8b57; /* Green */
font-weight: bold;
font-size: 24px;
}
.center {
text-align: center;
color: #2e8b57; /* Green */
font-weight: bold;
font-size: 24px;
}
.right {
text-align: right;
color: #2e8b57; /* Green */
font-weight: bold;
font-size: 24px;
}
.text {
font-size: 16px;
font-weight: normal;
color: black;
}
</style>
</head>
<body>

<div class="container">
<p class="left">LEFT</p>
<p class="text" style="text-align: left;">
Left-aligned text works because it mirrors the way you read – from left
to right.
You know where each line ends and where the next begins.
</p>

<p class="center">CENTER</p>
<p class="text" style="text-align: center;">
Centered text should be used sparingly and for small text blocks.
</p>

<p class="right">RIGHT</p>
<p class="text" style="text-align: right;">
Right-aligned text can be difficult to use effectively and should be
reserved
for small text frames and text art elements.
</p>
</div>

</body>
</html>

You might also like