CSS Text/Font Style

What is CSS Text/Font Style?

CSS Text and Font Style properties are used to control the appearance of text on a webpage. They allow you to change the font family, font size, font weight, font style, text color, text alignment, spacing, decoration, and other text-related properties. Using these properties makes webpages more attractive and easier to read.

Why Use CSS Text/Font Style?

Text styling improves readability and creates a professional appearance. It helps organize content, highlight important information, and maintain a consistent design throughout a website. Good typography also improves the overall user experience.

Syntax of CSS Text/Font Style

<!DOCTYPE html>
<html>
<head>
<style>

h1{
    font-family:Arial;
    font-size:36px;
    color:blue;
}

</style>
</head>

<body>

<h1>Welcome to Academic Block</h1>

</body>
</html>

Step 1: Change the Font Family

Use the font-family property to specify which font should be displayed. If the first font is unavailable, the browser uses the next font in the list.

<!DOCTYPE html>
<html>
<head>
<style>

h1{
    font-family:Georgia, serif;
}

p{
    font-family:Verdana, sans-serif;
}

</style>
</head>

<body>

<h1>Heading Font</h1>

<p>This paragraph uses the Verdana font.</p>

</body>
</html>

Step 2: Style the Text

CSS provides several properties to customize text, including font-size, font-weight, font-style, text-align, and text-decoration.

<!DOCTYPE html>
<html>
<head>
<style>

h1{
    font-size:36px;
    font-weight:bold;
    text-align:center;
}

p{
    font-size:18px;
    font-style:italic;
    text-decoration:underline;
}

</style>
</head>

<body>

<h1>CSS Text Style</h1>

<p>This text is italic and underlined.</p>

</body>
</html>

Common CSS Text and Font Properties

The following example demonstrates some of the most commonly used text and font properties in CSS.

<!DOCTYPE html>
<html>
<head>
<style>

.heading{
    font-family:Tahoma;
    font-size:34px;
    color:#0056b3;
    text-align:center;
}

.bold{
    font-weight:bold;
}

.italic{
    font-style:italic;
}

.uppercase{
    text-transform:uppercase;
}

.spacing{
    letter-spacing:3px;
}

.shadow{
    text-shadow:2px 2px 4px lightgray;
}

</style>
</head>

<body>

<h1 class="heading">CSS Font Styling</h1>

<p class="bold">Bold Text</p>

<p class="italic">Italic Text</p>

<p class="uppercase">uppercase text</p>

<p class="spacing">Letter Spacing Example</p>

<p class="shadow">Text Shadow Example</p>

</body>
</html>

Example of CSS Text/Font Style

<!DOCTYPE html>
<html>
<head>
<style>

body{
    font-family:Arial, sans-serif;
    background:#f5f9ff;
    padding:30px;
}

h1{
    color:#0056b3;
    text-align:center;
    text-transform:uppercase;
}

p{
    font-size:18px;
    line-height:1.8;
    color:#444;
}

.highlight{
    color:crimson;
    font-weight:bold;
}

button{
    font-size:18px;
    padding:10px 20px;
    background:#007BFF;
    color:white;
    border:none;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    background:#0056b3;
}

</style>
</head>

<body>

<h1>CSS Text and Font</h1>

<p>
Learn CSS with
<span class="highlight">Academic Block</span>.
</p>

<button>Learn More</button>

</body>
</html>

Advantages of CSS Text/Font Style

Better Readability

Easy Reading

Improves the readability of webpage content.

Professional Design

Modern Appearance

Creates attractive and professional webpages.

Content Highlighting

Better Focus

Emphasizes important information using typography.

Consistent Layout

Uniform Design

Maintains consistent text styling throughout a website.

Improved User Experience

Easy Navigation

Well-formatted text is easier to understand.

Common Mistakes

Beginners often misspell font names, forget quotation marks around font names containing spaces, use very small font sizes, apply too many font families on one page, or choose colors with poor contrast.

<!DOCTYPE html>
<html>
<head>
<style>

/* Incorrect */

h1{
    font-size:30;
}

/* Correct */

h1{
    font-size:30px;
}

</style>
</head>

<body>

<h1>Academic Block</h1>

</body>
</html>

Best Practices

Choose readable fonts for body text.
Limit the number of font families on a webpage.
Use relative font sizes when possible for responsive design.
Maintain sufficient contrast between text and background.
Use consistent typography throughout the website.
Avoid excessive use of bold, italic, or uppercase text.
Set appropriate line-height and letter-spacing for readability.
Test text appearance on different devices and screen sizes.

Web Resources on CSS Text/Font Style

1. MDN Web Docs : font-style CSS property
2. MDN Web Docs : font CSS property
3. Web.dev : Text and typography
4. Dev.to : Typography and Font Styling in CSS.

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.