CSS Text , Font & Background Properties – A Complete Guide for Beginners and Professionals

Payal PorwalPayal Porwal
11 min read

Table of contents

Cascading Style Sheets (CSS) is the backbone of web design, enabling developers to style and layout their HTML content. With the evolution of CSS3, developers now have access to enhanced features for animations, responsive designs, and advanced styling. In this guide, we’ll cover every property in CSS and CSS3, complete with explanations, examples, and possible values for each. By the end, you’ll also find a consolidated table of all CSS properties and their values for quick reference.

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of HTML elements. It allows you to apply styles such as colors, layouts, spacing, and more. CSS3, the latest version, introduced new properties like animations, transitions, and grid layouts to meet modern design needs.

Structure of a CSS Rule

A CSS rule consists of:

  1. Selector: Identifies the HTML element(s) to style.

  2. Declaration: Specifies the style to apply. It contains a property and a value.

Example:

selector {
    property: value;
}

For example:

p {
    color: blue;
    font-size: 16px;
}

CSS Properties and Examples

Let’s explore CSS and CSS3 properties grouped by category:

Text and Font Properties

Text and font properties in CSS are essential for controlling the presentation of textual content on a webpage. Let’s explore these properties in greater detail with real-world practical examples to demonstrate how they work and the effects they produce.

1) color Property

The color property changes the color of the text.

Possible Values:

  • Color names: Predefined names like red, blue, green.

  • HEX values: Color defined using hexadecimal codes like #FF5733.

  • RGB values: Specify red, green, and blue components, e.g., rgb(255, 87, 51).

  • HSL values: Specify hue, saturation, and lightness, e.g., hsl(9, 100%, 60%).

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            color: red; /* Using color name */
        }
        p.hex {
            color: #3498db; /* Using HEX */
        }
        p.rgb {
            color: rgb(46, 204, 113); /* Using RGB */
        }
        p.hsl {
            color: hsl(210, 100%, 50%); /* Using HSL */
        }
    </style>
</head>
<body>
    <h1>This is a red heading</h1>
    <p class="hex">This is a paragraph with HEX color.</p>
    <p class="rgb">This is a paragraph with RGB color.</p>
    <p class="hsl">This is a paragraph with HSL color.</p>
</body>
</html>

2) font-family Property

The font-family property specifies the font used for the text. It can include a primary font and a fallback font.

Possible Values:

  • Font names like "Arial", "Georgia".

  • Generic font families like sans-serif, serif, monospace.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.serif {
            font-family: "Times New Roman", serif; /* Serif font with fallback */
        }
        p.sans-serif {
            font-family: Arial, sans-serif; /* Sans-serif font with fallback */
        }
        p.monospace {
            font-family: "Courier New", monospace; /* Monospace font with fallback */
        }
    </style>
</head>
<body>
    <p class="serif">This is text in a serif font.</p>
    <p class="sans-serif">This is text in a sans-serif font.</p>
    <p class="monospace">This is text in a monospace font.</p>
</body>
</html>

3) font-size Property

The font-size property determines the size of the text.

Possible Values:

  • Absolute values: px (pixels), e.g., 16px.

  • Relative values: em, rem, percentages.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.px {
            font-size: 16px; /* Fixed size in pixels */
        }
        p.em {
            font-size: 1.5em; /* Relative to the parent element */
        }
        p.rem {
            font-size: 2rem; /* Relative to the root element */
        }
        p.percent {
            font-size: 120%; /* Relative to the parent element's size */
        }
    </style>
</head>
<body>
    <p class="px">This text has a size of 16px.</p>
    <p class="em">This text is 1.5 times the size of its parent.</p>
    <p class="rem">This text is 2 times the size of the root element.</p>
    <p class="percent">This text is 120% of the parent's size.</p>
</body>
</html>

4) font-style Property

The font-style property specifies the style of the text (e.g., normal, italic, or oblique).

Possible Values:

  • normal: Default style.

  • italic: Italicized text.

  • oblique: A slanted version of the font.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.normal {
            font-style: normal; /* Default text style */
        }
        p.italic {
            font-style: italic; /* Italicized text */
        }
        p.oblique {
            font-style: oblique; /* Slanted text */
        }
    </style>
</head>
<body>
    <p class="normal">This text is normal.</p>
    <p class="italic">This text is italic.</p>
    <p class="oblique">This text is oblique.</p>
</body>
</html>

5) text-align Property

The text-align property aligns text horizontally.

Possible Values:

  • left: Aligns text to the left.

  • right: Aligns text to the right.

  • center: Centers the text.

  • justify: Stretches text to align both left and right edges.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.left {
            text-align: left; /* Aligns to the left */
        }
        p.right {
            text-align: right; /* Aligns to the right */
        }
        p.center {
            text-align: center; /* Centers the text */
        }
        p.justify {
            text-align: justify; /* Justifies the text */
        }
    </style>
</head>
<body>
    <p class="left">This text is aligned to the left.</p>
    <p class="right">This text is aligned to the right.</p>
    <p class="center">This text is centered.</p>
    <p class="justify">This text is justified. It will stretch the text so that it aligns both left and right margins.</p>
</body>
</html>

6) line-height Property

The line-height property sets the vertical space between lines of text.

Possible Values:

  • Fixed values (e.g., 20px).

  • Relative values (e.g., 1.5, 2).

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.fixed {
            line-height: 20px; /* Fixed space between lines */
        }
        p.relative {
            line-height: 1.8; /* Relative multiplier for spacing */
        }
    </style>
</head>
<body>
    <p class="fixed">This paragraph has a fixed line height of 20px. The spacing between lines is the same irrespective of the font size.</p>
    <p class="relative">This paragraph has a relative line height of 1.8. The space between lines increases proportionally with the font size.</p>
</body>
</html>

CSS Background Properties

CSS background properties are used to style the background of HTML elements. You can add colors, images, gradients, and control how they look and behave inside an element.

This guide will help you understand each background property with practical, real-life examples. It’s designed for both beginners and professionals who want clean, visual interfaces.

✨ Why Background Properties Matter

Imagine you're building:

  • A banner on an e-commerce homepage

  • A card layout for a product

  • A login page with a gradient or image background

In all these cases, background properties help you design professional, modern UI layouts.

🔹 1. background-color Property

This sets the background color of an element.

✅ Values You Can Use:

  • Named Colors – red, blue, lightgray

  • HEX Values – #3498db, #ffffff

  • RGB Values – rgb(255, 0, 0)

  • HSL Values – hsl(0, 100%, 50%)

✅ Real Example:

<style>
  .section1 {
    background-color: #3498db;
    padding: 20px;
    color: white;
  }
</style>
<div class="section1">This has a HEX background color.</div>

Use Case: Highlighting sections or cards in a UI.

🔹 2. background-image Property

This allows you to add an image in the background of an element.

✅ Values:

  • url('image.jpg') – Load image

  • none – No image (default)

✅ Real Example:

<style>
  .banner {
    background-image: url('https://via.placeholder.com/1200x400.png?text=Sale+Banner');
    height: 300px;
    background-color: #ddd;
  }
</style>
<div class="banner">This banner has a background image.</div>

Use Case: Promotional banners, hero sections, login backgrounds.

🔹 3. background-size Property

This controls how the background image fits inside the element.

✅ Values:

  • auto – Original size of the image (default)

  • cover – Image covers the entire element, cropping if needed

  • contain – Image fits inside the element without cropping

  • 100% 100% – Stretch image to fit exact size

✅ Real Example:

<style>
  .cover {
    background-image: url('https://via.placeholder.com/800x300');
    background-size: cover;
    height: 300px;
  }
  .contain {
    background-size: contain;
  }
</style>

<div class="cover">Cover - fills the box</div>
<div class="cover contain">Contain - shows full image</div>

Use Case:

  • cover: Use for full-width banners.

  • contain: Use when you want the full image to be visible (e.g., logos, products).

🔹 4. background-position Property

This sets the starting point of the background image inside the element.

✅ Values:

  • Keywords: top, center, bottom, left, right

  • Coordinates: 50px 100px, 20% 80%

✅ Real Example:

<style>
  .positioned {
    background-image: url('https://via.placeholder.com/800x300');
    background-size: auto;
    height: 300px;
  }

  .top-left {
    background-position: top left;
  }

  .centered {
    background-position: center;
  }

  .custom {
    background-position: 100px 50px;
  }
</style>

<div class="positioned top-left">Top Left</div>
<div class="positioned centered">Centered</div>
<div class="positioned custom">Custom Position</div>

Use Case: When you're aligning brand logos or decorative icons.

🔹 5. background-repeat Property

This controls whether the background image repeats inside the element.

✅ Values:

  • repeat – Repeats both horizontally and vertically (default)

  • no-repeat – Shows image only once

  • repeat-x – Only horizontal

  • repeat-y – Only vertical

✅ Real Example:

<style>
  .repeat {
    background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/pw_maze_white.png');
    background-repeat: repeat;
    height: 300px;
  }

  .no-repeat {
    background-repeat: no-repeat;
    background-position: center;
  }
</style>

<div class="repeat">Repeating pattern</div>
<div class="repeat no-repeat">Single image centered</div>

Use Case: Repeating patterns (like textures or small icons).

🔹 6. background Shorthand Property

You can combine all background-related values into one line using the shorthand.

✅ Syntax:

background: [color] [image] [repeat] [position]/[size];

✅ Real Example:

<style>
  .shorthand {
    background: #000 url('https://via.placeholder.com/1200x400') no-repeat center/cover;
    height: 300px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div class="shorthand">This uses background shorthand</div>

Use Case: Makes code cleaner and more readable.

🛠️ Summary Table of Properties

PropertyDescription
background-colorSets background color
background-imageAdds image in background
background-sizeControls image scaling (cover, contain)
background-positionWhere image appears in the box
background-repeatRepeats image or not
backgroundShorthand for all the above

💡 Pro Tips for Working Professionals

  1. ✅ Use cover for banners to avoid empty space.

  2. ✅ Always set a background-color as a fallback in case image fails.

  3. ✅ Combine background-* properties using background shorthand for better performance.

  4. ✅ Prefer compressed images (WebP/optimized JPG) for faster load time.

  5. ✅ Use gradient backgrounds with linear-gradient() for modern UI without images.

📦 Real-World Example: Product Promotion Banner

<style>
  .promo-banner {
    width: 100%;
    height: 400px;
    background: url('https://via.placeholder.com/1200x400.png?text=Big+Sale') no-repeat center/cover;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    background-color: #222; /* fallback */
  }
</style>

<div class="promo-banner">
  Mega Sale – 50% OFF!
</div>

📘 Conclusion

Background properties in CSS help you:

  • Improve UI appearance

  • Add branding elements

  • Enhance user experience

Whether you're a beginner building your first website or a working developer maintaining a complex layout, mastering these properties will give you a lot of design control.

🎯 Task Title: Create a Stylish Profile Card Web Page

🧾 Objective:

Students will create a visually appealing profile card using HTML & CSS by applying various background, text, and font properties.

📋 Task Instructions:

✅ Part 1: Structure using HTML

Create a web page with the following:

  • A main container

  • Inside it, one profile card

  • Add your name, title, a short description, and a button

<!-- Sample Structure -->
<div class="container">
  <div class="profile-card">
    <h1>Your Name</h1>
    <h3>Your Role (e.g., Web Developer)</h3>
    <p>A short description about yourself</p>
    <button>Contact Me</button>
  </div>
</div>

✅ Part 2: Style using CSS

1. Apply Background Properties

  • Use a background color on the full body

  • Use a background image for the .profile-card

  • Use background-repeat, background-position, and background-size

2. Use Font Properties

  • Change the font family (use at least 2 different fonts)

  • Set font size and font weight

  • Add line-height and letter-spacing

3. Style the Text

  • Change the text color

  • Use text-align, text-transform, text-shadow

4. Add Button Styling

  • Use background color and text color

  • Add border-radius, padding, and hover effects

💻 Output Example: What Students Should Create

A card like this:

|----------------------------------------|
| [Background image]                    |
|                                        |
|         Payal Sharma                   |
|       Frontend Developer               |
|  I love building responsive UIs.       |
|         [Contact Me] (Button)          |
|----------------------------------------|

📚 Concepts Practiced

TopicProperties Covered
Backgroundbackground-color, background-image, background-repeat, background-size, background-position
Fontfont-family, font-size, font-weight, line-height, letter-spacing
Texttext-align, text-transform, text-shadow, color
Bonushover effect, border-radius, padding, margin

🧠 Bonus Challenge (Optional)

  • Add a hover effect on the card or button

  • Make the card responsive (bonus for flexbox/grid use)

✅ Submission Instruction (if using classroom)

  • Submit index.html and style.css

  • OR host on platforms like CodePen / Replit / GitHub Pages

🔔 Stay Connected

If you found this article helpful and want to receive more such beginner-friendly and industry-relevant CSS notes, tutorials, and project ideas —
📩 Subscribe to our newsletter by entering your email below.

And if you're someone who wants to prepare for tech interviews while having a little fun and entertainment,
🎥 Don’t forget to subscribe to my YouTube channel – Knowledge Factory 22 – for regular content on tech concepts, career tips, and coding insights!

Stay curious. Keep building. 🚀

0
Subscribe to my newsletter

Read articles from Payal Porwal directly inside your inbox. Subscribe to the newsletter, and don't miss out.

CSS text propertiesCSS guide for beginnersComplete CSS tutorialCSS3CSSCSS Animationcss flexboxcss background propertiesProgramming Blogsprogramming languagesWeb DevelopmentFrontend Developmentcodeswithpayalpayalcss font properties

Written by

Payal Porwal
Payal Porwal

Hi there, tech enthusiasts! I'm a passionate Software Developer driven by a love for continuous learning and innovation. I thrive on exploring new tools and technologies, pushing boundaries, and finding creative solutions to complex problems. What You'll Find Here On my Hashnode blog, I share: 🚀 In-depth explorations of emerging technologies 💡 Practical tutorials and how-to guides 🔧Insights on software development best practices 🚀Reviews of the latest tools and frameworks 💡 Personal experiences from real-world projects. Join me as we bridge imagination and implementation in the tech world. Whether you're a seasoned pro or just starting out, there's always something new to discover! Let’s connect and grow together! 🌟