🚀 𝗔𝗜 𝗖𝗲𝗿𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗖𝗼𝘂𝗿𝘀𝗲 😍| 𝗕𝗲𝗰𝗼𝗺𝗲 𝗮𝗻 𝗔𝗜 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿

This AI engineering course online is structured around AI fundamentals, full-stack development, real-world AI projects

💫2000+ Students Placed
🎥 Live Classes + Session Recordings
👨‍💻 1:1 Mentorship & Doubt Support
💼 Interview Preparation & Placement Assistance

𝗕𝗼𝗼𝗸 𝗮 𝗙𝗥𝗘𝗘 𝗗𝗲𝗺𝗼👇:-
​
https://pdlink.in/4fWJVID

🔥 Take the next step towards building your career in AI!

🌐 Web Development Roadmap — Part 28

CSS Text & Fonts

CSS text and font properties help you control how text looks on a webpage.

You can change font styles, sizes, thickness, alignment, spacing, and decoration.

1. font-family

The font-family property defines which font is displayed.

h1 {
    font-family: Arial, sans-serif;
}

p {
    font-family: Georgia, serif;
}

Common font families:

• Arial
• Times New Roman
• Georgia
• Verdana
• Courier New
• Tahoma

You can also provide fallback fonts:

body {
    font-family: Arial, Helvetica, sans-serif;
}

If the first font isn't available, the browser tries the next one.

2. font-size

Controls the size of the text.

h1 {
    font-size: 32px;
}

p {
    font-size: 18px;
}

You can use different units such as px, em, and rem.

3. font-weight

Controls how thick or bold the text appears.

h1 {
    font-weight: bold;
}

p {
    font-weight: normal;
}

Common values:

+-------+------------+
| Value | Meaning    |
+-------+------------+
| 100   | Thin       |
| 300   | Light      |
| 400   | Normal     |
| 500   | Medium     |
| 600   | Semi-bold  |
| 700   | Bold       |
| 900   | Extra bold |
+-------+------------+

The availability of each weight depends on the font.

4. font-style

Controls whether text appears normal, italic, or oblique.

p {
    font-style: italic;
}

Common values:

• normal
• italic
• oblique

5. text-align

Controls the horizontal alignment of text.

h1 {
    text-align: center;
}

Common values:

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

6. text-decoration

Adds or removes decorative lines from text.

h1 {
    text-decoration: underline;
}

Common values:

• underline – Line below text
• overline – Line above text
• line-through – Line through text
• none – Removes decoration

Example:

a {
    text-decoration: none;
}

This is commonly used to remove the default underline from links.

7. text-transform

Controls the capitalization of text.

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

For example, hello world becomes:

• Uppercase: HELLO WORLD
• Lowercase: hello world
• Capitalize: Hello World

8. line-height

Controls the vertical space between lines of text.

p {
    line-height: 1.6;
}

A suitable line height makes paragraphs easier to read.

9. letter-spacing

Controls the spacing between individual characters.

h1 {
    letter-spacing: 2px;
}

10. word-spacing

Controls the spacing between words.

p {
    word-spacing: 5px;
}

11. text-indent

Adds indentation to the first line of a paragraph.

p {
    text-indent: 30px;
}

12. Google Fonts

Google Fonts provides a large collection of fonts that you can use in websites.

For example, you can use the Roboto font.

Add this inside the HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Then apply it using CSS:

body {
    font-family: "Roboto", sans-serif;
}

13. Real-World Example

Let's design a simple heading and paragraph.

HTML:

<div class="content">
    <h1>Learn Web Development</h1>

    <p>
        Start your journey with HTML, CSS and JavaScript.
    </p>
</div>

CSS:

.content {
    font-family: Arial, sans-serif;
    text-align: center;
}

h1 {
    font-size: 32px;
    font-weight: 700;
    color: blue;
    letter-spacing: 1px;
}

p {
    font-size: 18px;
    line-height: 1.6;
    color: gray;
}

This creates a clean heading and readable paragraph.

Double Tap ❤️ For Part-29