Scribd
Upload
3 views

css-font-text-styles.html

This document is an HTML file that demonstrates CSS font and text styling. It includes styles for the body, headings, and paragraphs, showcasing various properties such as font size, weight, style, decoration, and alignment. The content features a welcome message and example paragraphs with different text styles.

Uploaded by

madhusudhan.pallela
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
3 views

css-font-text-styles.html

This document is an HTML file that demonstrates CSS font and text styling. It includes styles for the body, headings, and paragraphs, showcasing various properties such as font size, weight, style, decoration, and alignment. The content features a welcome message and example paragraphs with different text styles.

Uploaded by

madhusudhan.pallela
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

EXPERIMENT 5

5.C.PROGRAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Font and Text Styles</title>
<style>
/* Styling the body */
body {
font-family: Arial, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}

/* Styling a heading with multiple font properties */


h1 {
font-size: 36px; /* Font size */
font-weight: bold; /* Font weight */
font-style: italic; /* Font style */
text-decoration: underline; /* Text decoration */
text-transform: uppercase; /* Text transformation */
text-align: center; /* Text alignment */
color: #4CAF50; /* Text color */
margin-top: 50px;
}

/* Styling a paragraph with different text properties */


p {
font-size: 18px; /* Font size */
font-weight: normal; /* Font weight */
font-style: normal; /* Font style */
text-decoration: line-through; /* Text decoration */
text-transform: capitalize; /* Text transformation */
text-align: justify; /* Text alignment */
color: #555; /* Text color */
margin: 20px;
}

/* Styling another paragraph with bold text and center alignment */


.important-text {
font-size: 20px; /* Font size */
font-weight: bold; /* Font weight */
font-style: normal; /* Font style */
text-decoration: none; /* Text decoration */
text-transform: none; /* Text transformation */
text-align: center; /* Text alignment */
color: #FF5733; /* Text color */
margin: 20px;
}
</style>
</head>
<body>
<h1>Welcome to CSS Font Styling!</h1>
<p>This paragraph has a <strong>normal font weight</strong>, <em>capitalize
text</em>, and <del>line-through text decoration</del>. The text is aligned to be
justified.</p>
<p class="important-text">This is an important piece of text, styled with bold
font, no decoration, and centered alignment.</p>
</body>
</html>

You might also like