Lecture Notes Of Class 5: Text Styling in CSS
Objective:
Learn how to style text using CSS.
Topics:
1. color
o
The color property in CSS is used to change the
color of the text.
o
Example:
css
Copy code
p {
color: blue;
}
2. font-family
o
The font-family property is used to specify the
font of the text.
o
You can use web-safe fonts or custom fonts by
importing them.
o
Example:
css
Copy code
h1 {
font-family: 'Arial', sans-serif;
}
3. font-size
o
The font-size property determines the size of the
text.
o
You can set the size in different units like px, em,
%, etc.
o
Example:
css
Copy code
p {
font-size: 16px;
}
4. text-align
o
The text-align property is used to align the text
horizontally within an element (left, center, right, justify).
o
Example:
css
Copy code
h1 {
text-align: center;
}
5. text-decoration
o
The text-decoration property is used to apply
decoration to text, such as underline, overline, line-through, or none.
o
Example:
css
Copy code
span {
text-decoration: underline;
}
Lab
Exercise:
Goal:
Style different text elements (<h1>, <p>, <span>) in an HTML
page using the above properties.
Steps:
1. Create an
HTML file (index.html):
html
Copy code
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Text Styling Exercise</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to CSS Styling</h1>
<p>This is a paragraph styled with
CSS properties. Notice how the text looks different from the default style.</p>
<span>This is a span element with a
special style.</span>
</body>
</html>
2. Create a
CSS file (styles.css):
css
Copy code
/* Style
the h1 element */
h1 {
color: #4CAF50; /* Green color */
font-family: 'Arial', sans-serif;
font-size: 32px;
text-align: center;
}
/* Style
the p element */
p {
color: #555; /* Dark gray color */
font-family: 'Times New Roman', serif;
font-size: 16px;
text-align: justify;
}
/* Style
the span element */
span {
color: red;
font-family: 'Courier New', monospace;
font-size: 18px;
text-decoration: underline;
}
Expected
Outcome:
- The <h1>
will have green text, center-aligned, with a large font size.
- The <p>
will have dark gray text, justified alignment, with a more standard font
size.
- The <span>
will have red, underlined text with a monospace font.
No comments:
Post a Comment