CSS Text Styling: Colors, Backgrounds & Fonts

Day - 3 - CSS - Colors, Backgrounds, Text & Fonts

Niotechone Marketing Team
November 18, 2025
10:30 am

Introduction

Welcome to day three of our CSS journey! Today we’re going to focus on how colors, backgrounds, text and fonts can enhance a plain webpage into a visually appealing page. We will build a styled profile card while learning about various color systems, background properties, and text formatting options.

There is importance on understanding these concepts since this is the basis of web design. It doesn’t matter whether you’re building a personal portfolio, a business website or any web application, knowing how to work with colors and typography will help you create professional designs that you can communicate your message.

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

Let’s first include our basic HTML structure; the intention of this code:

🌐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Styled Profile Card</title>
  <link rel="stylesheet" href="Colors_Backgrounds.css">
</head>
<body>
  <h1>overline text decoration</h1>
  <h2>line through decoration</h2>
  <h3>underline decoration</h3>
  <h4>overline underline decoration</h4>
 
  <div class="card">
    <h1 class="name">Niotechone</h1>
    <p class="bio">Frontend Developer who loves clean design, colors, and
fonts!</p>
  </div>
 
  <p class="over">Content to scroll...</p>
</body>
</html>

What this code does:

Provides a basic HTML5 document structure
Links to an external CSS file to provide styling
Creates headings with different text decorations
Builds a profile card container with a name and bio
Creates a paragraph to show scrolling effects

Why we do this:

The HTML represents the structure for the content which we’ll style with CSS
Using external CSS keeps our code tidy and maintainable.

Pro Tip: Always include <!DOCTYPE html> and remember to set the lang attribute to improve accessibility and browser compatibility.

Step 2: Creating Our CSS File and Basic Setup

Create a new file and call it Colors_Backgrounds.css, now let’s start applying styles:

🎨

/* Reset default margins and set a nice font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: #f0f2f5;
  padding: 20px;
}

What this code does:

Removes default browser margins and padding on all elements
Sets a clean, modern font stack to the entire page
Creates a light gray background for the overall page.
Adds some padding so the content doesn’t touch to the edges.

Why we do this:

Resetting margin values to ensure spacing will be consistent between browsers.
Setting box-sizing: border-box makes element sizing a little more predictable in general.
A good font stack makes sure your text has a professional appearance across multiple devices.

Step 3: Styling Text Decorations

Let’s style our heading text decorations:

🎨

/* Text decoration examples */
h1 {
  text-decoration: overline;
  color: #2c3e50;
  margin: 15px 0;
}

h2 {
  text-decoration: line-through;
  color: #e74c3c;
  margin: 15px 0;
}

h3 {
  text-decoration: underline;
  color: #3498db;
  margin: 15px 0;
}

h4 {
  text-decoration: overline underline;
  color: #9b59b6;
  margin: 15px 0;
}

What this code accomplishes:

Applies distinct text decorations to each heading level
Uses distinct colors for visual differentiation
Adds uniform spacing between headings

Why we do this:

Shows the text-decoration property in action
Demonstrates how colors help to different elements stand out
Good spacing increases readability

Common Mistake to Avoid: Do not use text decorations excessively as it can make text hard to read. Apply decorations with purpose for emphasis.

Step 4: Creating the Profile Card

Let’s build the access list out for your profile:

🎨

/* Profile card styling */
.card {
  width: 350px;
  margin: 30px auto;
  padding: 30px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';

  position: absolute;
  top: 0;
  left: 0;

  right: 0;
  height: 5px;

  background: rgba(255, 255, 255, 0.3);
}

.name {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.bio {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.9;
}

What this code does:

It creates a card that is properly centered and has a fixed width.
It employs a lovely gradient for the background.
It has a slight shadow for dimension.
It has a decorative top border using pseudo-elements.
It has the name and bio styled with appropriate font sizes and weights.

Why we do this:

The gradient background looks nice.
The shadows add dimension (like a real card).
Pseudo-elements contain decorative elements, without adding extra HTML.
Different weights of the fonts provide a visual hierarchy.

Pro Tip: Use rgba() colors for shadows to create a more natural, translucent look.

Step 5: Adding Scrollable Content with Background Effects

Let’s construct our scrollable paragraph, with background effects:

🎨

/* Scrollable content with background */
.over {
  max-width: 800px;
  margin: 40px auto;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  max-height: 200px;
  overflow-y: auto;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f8f9fa"/><path d="M0 0L100 100M100 0L0 100" stroke="%23e9ecef" stroke-width="1"/></svg>');
  background-size: 30px 30px;
  background-attachment: local;
  line-height: 1.7;
  color: #495057;
}

What this code does:

It creates a scrollable container with a height limited to the view box of the card.
It has a subtle background pattern.
It sets background-attachment: local so the background scrolls with the other content.
It gives nice line spacing for reading.

Why we do this:

This demonstrates how to create scrollable areas in a page.
This demonstrates background patterns and how they behave with scrolling content.
A patterned background adds interest without being distracting.

Code Explanation Sections

Color Systems in CSS

CSS offers a few different methods to choose colors:

🎨

/* Different color notation methods */
.color-examples {
  color: red;                    /* Named color */
  color: #ff0000;               /* Hexadecimal */
  color: rgb(255, 0, 0);        /* RGB */
  color: rgba(255, 0, 0, 0.5);  /* RGB with alpha (transparency) */
  color: hsl(0, 100%, 50%);     /* HSL (Hue, Saturation, Lightness) */
  color: hsla(0, 100%, 50%, 0.5); /* HSL with alpha */
}

How it works:

Named colors: Limited set of predefined color name
Hexadecimal: 6-digit code that represents Red, Green, and Blue values
RGB: Functional notation with 0-255 value for each channel
RGBA: RGB with an added alpha channel for transparency (0-1)
HSL: More intuitive system of hue (0-360), saturation (0-100%), and lightness (0-100%)

Why options:

Hexadecimal is concise and easy to remember/use
RGB/RGBA is easier to read; you can also have transparency
HSL is more intuitive if you want to adjust colors [make them lighter/darker or more/less saturated]

Background Properties Deep Dive

Let’s look at the powerful background properties:

🎨

.background-example {
  /* Single declaration */
  background: color image repeat attachment position;
  
  /* Individual properties */
  background-color: #f0f8ff;
  background-image: url('pattern.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

How it works:

background-color: Sets a background color in solid
background-image: Put in either images or gradients
background-repeat: Controls if/how the image repeats
background-position: Position the image within the element
background-size: Controls how big the image is (cover, contain, or else a specific [width, height])
background-attachment: Specifies if background will scroll with the content, or stay fixed

Why do these matter:

Backgrounds create visual hierarchy and brand identity
If backgrounds are used appropriately they will enhance the user experience
Fixed backgrounds can create neat parallax effects to a page

Tables of Key Concepts

1. Components / Keywords Used

Name	Description
color	Sets the text color of an element
background-color	Sets the background color of an element
background-image	Sets one or more background images
background-repeat	Defines how background images are repeated
background-position	Sets the initial position of background images
background-attachment	Defines if background scrolls with content or is fixed
text-decoration	Adds decorations like underline, overline, line-through
font-family	Specifies the font for text
font-size	Sets the size of the font
font-weight	Sets the thickness of the font (boldness)
text-align	Aligns text horizontally
line-height	Sets the space between lines of text

2. Key Properties / Parameters / Features

Name	Description
Hex Colors	6-digit codes representing RGB values (e.g., #FF5733)
RGB	Functional notation: rgb(red, green, blue) with values 0-255
RGBA	RGB with alpha channel for transparency (0-1)
HSL	Hue (0-360), Saturation (0-100%), Lightness (0-100%)
no-repeat	Background image appears only once
fixed	Background doesn’t scroll with the page
border-radius	Rounds the corners of elements
box-shadow	Adds shadow effects around an element’s frame
linear-gradient()	Creates a gradient background

Useful References

MDN Web Docs – CSS Colors
W3Schools – CSS Backgrounds
CSS Gradient Generator – Tool for creating beautiful gradients
Google Fonts – Extensive library of free web fonts
Color Hunt – Color palettes for inspiration
FreeCodeCamp – Responsive Web Design – Practice exercises for CSS

Complete Code Example:

Index.html:

🌐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Styled Profile Card</title>
  <link rel="stylesheet" href="Index.css">
</head>
<body>
  <h1>overline text decoration</h1>
  <h2>line through decoration</h2>
  <h3>underline decoration</h3>
  <h4>overline underline decoration</h4>
  
  <div class="card">
    <h1 class="name">Niotechone</h1>
    <p class="bio">Frontend Developer who loves clean design, colors, and fonts!</p>
  </div>
  
  <p class="over">Content to scroll...</p>
</body>
</html>

Index.css:

🎨

/* Reset default margins and set a nice font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {


  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: #f0f2f5;
  padding: 20px;
}
/* Text decoration examples */
h1 {
  text-decoration: overline;
  color: #2c3e50;
  margin: 15px 0;
}

h2 {
  text-decoration: line-through;
  color: #e74c3c;
  margin: 15px 0;
}

h3 {
  text-decoration: underline;
  color: #3498db;
  margin: 15px 0;
}

h4 {
  text-decoration: overline underline;
  color: #9b59b6;
  margin: 15px 0;
}
/* Profile card styling */
.card {
  width: 350px;
  margin: 30px auto;
  padding: 30px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 5px;
  background: rgba(255, 255, 255, 0.3);
}

.name {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.bio {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.9;
}
/* Scrollable content with background */
.over {
  max-width: 800px;
  margin: 40px auto;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  max-height: 200px;
  overflow-y: auto;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f8f9fa"/><path d="M0 0L100 100M100 0L0 100" stroke="%23e9ecef" stroke-width="1"/></svg>');
  background-size: 30px 30px;
  background-attachment: local;
  line-height: 1.7;
  color: #495057;
}

Source Code:

https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/CSS-Fundamentals/Day%203%20-%20CSS%20-%20Colors%2C%20Backgrounds%2C%20Text%20%26%20Fonts

Summary – What You Learned

Congratulations! You have explicitly learned how to:

Work with different color systems in CSS (name colors, HEX, RGB, RGBA, HSL)
Make beautiful backgrounds with colors, gradients, and images
Control the behavior of a background using the repeat, position, and attachment properties
Effectively style text, considering various font and text properties
Provide visual hierarchy with thoughtful colors, spacing, and typography
Design a professional looking profile card that brought all of these concepts together

The big takeaway here is that in order to create a visually pleasing website, you need to learn how to put colors, backgrounds, type and typography that looks nice together. But once you see how things can be put together nicely, you can take basic HTML and create professional looking designs quickly.

Continue to experiment! Try replacing color schemes, changing font, or creating your own gradient combinations. Practice and experimentation is the best way to master these concepts!

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is the best color system to use in CSS: HEX, RGB, or HSL?

All three work well, but HSL is considered the most designer-friendly because it allows easy control over hue, saturation, and lightness. HEX is commonly used for static colors, while RGBA is great when you need transparency.

Why do designers prefer Google Fonts instead of using system fonts?

Google Fonts provide better typography, brand consistency, modern styles, and guaranteed cross-device rendering. System fonts vary across devices and may break UI consistency.

How can I choose the best font pairings for my website?

Use trusted tools like Google Fonts Pairings, Fontjoy, or Fontpair. A good rule is:

Use one serif + one sans-serif, or
One bold display font + one clean body font.
Always keep contrast and readability in mind.

Why does my background image look stretched or blurry in CSS?

It happens when you're using background-size incorrectly. Use:

background-size: cover; → fills nicely, crops edges
background-size: contain; → fits inside without distortion
Use high-resolution images for large areas

How do I pick a perfect color palette for my website?

Use inspiration tools like:

Color Hunt
Coolors
Adobe Color
Aim for:
1–2 primary colors
1 accent color
Neutral background shades

This keeps your design balanced and professional.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Day - 3 - CSS - Colors, Backgrounds, Text & Fonts

Table of Contents

Introduction

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

Step 2: Creating Our CSS File and Basic Setup

Step 3: Styling Text Decorations

Step 4: Creating the Profile Card

Step 5: Adding Scrollable Content with Background Effects

Code Explanation Sections

Tables of Key Concepts

Useful References

Complete Code Example:

Source Code:

Summary – What You Learned

Output

Categories

Related Articles

Mobile App Security for React Native & .NET MAUI

ASP.NET Core vs Other Frameworks: What You Need to Know

Top 5 Common .NET MAUI Bugs and How to Fix Them

Follow Us

Let's Work Together

Related Tags

Frequently Asked Questions FAQs

Services

Our Expertise

Hire Developers

Technologies

Contact For Sales

Contact For Careers

India

Canada