Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

HTML & CSS IntroductionChapter 11. CSS: Styling Text and Images

Chapter 11. CSS: Styling Text and Images

Styling Text and Images with CSS

In this chapter, we will explore how to style text and images using CSS. Text styling allows you to adjust fonts, sizes, colors, spacing, and alignment, while styling images ensures they display correctly on the web. By the end of this chapter, you will know how to use various CSS properties to enhance the visual appearance of both text and images on your website.

What We Cover in This Chapter

The following topics are covered in this chapter:

Text Styling Properties

In this section, we'll explore the different CSS properties that allow you to control the appearance of text on your web page. These properties help you adjust the font, size, color, spacing, and alignment to enhance readability and design consistency.

font-size

The font-size property controls the size of the text. It can be defined using units such as pixels (px), em, rem, percentages (%), and more. For example, font-size: 16px; sets the text size to 16 pixels. We'll cover how adjusting font size helps with readability on different screen sizes.

color

The color property sets the color of the text. You can define it using color names (e.g., color: red;), hexadecimal codes (e.g., color: #ff0000;), RGB values (e.g., color: rgb(255, 0, 0);), and other color formats. In this section, we'll show how to choose the right color combinations for clarity and design aesthetics.

font-family

The font-family property specifies the font style for your text. You can use system fonts or include web fonts from services like Google Fonts. For instance, font-family: Arial, sans-serif; sets the font to Arial, with a fallback to sans-serif fonts. We'll explore how to use various fonts to create a unique visual style for your website.

Web Font and Google Fonts

In this section, we'll explore how to enhance your website's typography by using web fonts, such as those available from Google Fonts. These fonts allow you to use custom styles that aren't installed on the user's system, improving design flexibility. We'll cover the process of including Google Fonts by adding a link in the <head> section of your HTML.

font-weight and font-style

The font-weight property controls the thickness of the text. You can choose from values like normal, bold, or numeric values (e.g., font-weight: 700; for bold text). The font-style property allows you to apply styles like normal, italic, or oblique. In this section, we'll explore how these properties can help emphasize or de-emphasize text on your webpage.

text-decoration

In this section, we'll cover the text-decoration property, which enables you to add styles such as underlines, overlines, or strikethroughs to your text. For instance, text-decoration: underline; adds an underline, while text-decoration: line-through; creates a strikethrough effect.

line-height and letter-spacing

The line-height property controls the vertical spacing between lines of text, making it easier to read. The letter-spacing property adjusts the spacing between individual characters in the text. For example, letter-spacing: 2px; will add 2px of space between each letter. In this section, we'll discuss how these properties can improve text readability and overall design aesthetics.

text-align

The text-align property is used to control the alignment of text. You can set it to values such as left, right, center, or justify. In this section, we'll demonstrate how text alignment impacts the layout and flow of text on your page.

vertical-align

The vertical-align property aligns inline elements vertically within a line. For example, setting vertical-align: middle; will vertically center the element. In this section, we'll cover how to effectively use vertical alignment for positioning images and text.

Styling Images

Images are a vital part of web design, and in this section, we'll explore the CSS properties used to control how images are displayed on your webpage. We'll cover positioning, sizing, and alignment techniques to ensure your images integrate seamlessly into your layout.

float: left and right

The float property is used to position elements like images to the left or right of their containing element, allowing text to wrap around them. For example, float: left; places an image to the left, and text will flow around its right side. In this section, we'll discuss how to use this property for creating visually engaging content layouts.

Learn offline for better focus!
A book for this course is available on Amazon.

HTML & CSS Visual Guide

Step By Step Manual for Complete Beginners with Zero Coding Experience to Build Stunning Websites from Scratch

Your browser does not support the video tag.
Get the Book Now

More Topics to Explore

Website vs. Web App: What's the Difference?

Web App vs. Website

Chapter 3. Enriching Web Content

Chapter 3. Enriching Web Content

HTML Forms: Using Autocomplete and Disabled Attributes

Auto Complete and Disabled

Website vs. Web App: What's the Difference?

Web App vs. Website

Chapter 3. Enriching Web Content

Chapter 3. Enriching Web Content

HTML Forms: Using Autocomplete and Disabled Attributes

Auto Complete and Disabled

Tags:

Web Font

Text Styling

Image Styling

Font

HTML & CSS Introduction
Course Content

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;

Chapter 1. Overview of Website Development

How Websites Work?

Designing, Building and Publishing Websites

Designing Websites

Building Websites – Frontend and Backend Coding

Web App vs. Website

Frontend Coding

Web Framework and CMS

Publishing Websites (Hosting Services)

Chapter 2. Preparing for Website Coding

Two Key Tools to Start Coding Websites

How Browsers Display Web Pages

File Name Rules

Website Directory Structure

Absolute Path vs. Relative Path

Chapter 3. HTML Basics

What Is HTML?

HTML Element

Attribute

HTML Document Structure

Layout Semantics

Heading and Paragraph Tag

Text-Level Semantics

Space, Line-break and Tag in Content

Comments in HTML Document

Chapter 4. HTML: Add Links and Images

Overview of Adding Links and Images

Embed Images – <img>

Image File Format

Add Hyperlinks – <a>

Add Hyperlinks to Images

Add Hyperlinks to Specific Location on Web Page

Link Tag – <link>

Script Tag – <script>

Chapter 5. HTML: Create Lists and Tables

Create Lists

Create Tables

Combine Table Cells

Chapter 6. HTML: Create Forms

Create Forms

Create Text Input Forms and Submit Button

Radio Button and Checkbox

Select Box

Labels

Auto Complete and Disabled

Chapter 7. Bridging HTML and CSS

Block Element vs. Inline Element

Nesting Elements – Parent Elements and Child Elements

Div vs. Span

Global Attribute – Class, ID and Style

Accordion – <Details> and <Summary>

Chapter 8. CSS Basics

What Is CSS?

CSS Syntax

Where To Type CSS?

CSS Basic Selectors

Descendant Selector

Inheritance

Specificity

Reset CSS

Browser Developer Tools for CSS

Comments in CSS Document

Chapter 9. Web Design Basics

Design Element Representation in HTML and CSS

Key Design Points by CSS

Length

Color Code – HEX and RGB

Color Theme

Chapter 10. CSS: Sizing and Spacing

CSS Box Model

width and height

padding

margin

Margin and Padding for Specific Side

margin: auto

box-sizing

Chapter 11. CSS: Styling Text and Images

Text Styling Properties

font-size

color

font-family

Web Font and Google Font

font-weight and font-style

text-decoration

line-height and letter-spacing

text-align

vertical-align

Styling Images

float: left and right

Chapter 12. CSS: Styling Backgrounds

background-color

background-image

background-size

background-repeat

background-position

background-attachment

background (Multiple Properties)

Chapter 13. CSS: Styling Borders and Drawing Lines

border-style

border-color

border-width

border-radius

Border (Multiple Properties)

Borders on Specific Side

Border Radius on Specific Side

Chapter 14. CSS: Layout – Key Concepts and Display Property

Layout Before and After

Layout Key Design Points

Display Property

inline, block and inline-block

display: none

Chapter 15. CSS: Layout – Flex Box

Flex Box – display: flex

flex-direction

Main Axis and Cross Axis

flex-wrap

justify-content

align-items

align-content

align-self

flex-grow

flex-shrink

flex-basis

margin: auto with Flex Box

Inline Flex Box

Nested Flex Box

Chapter 16. CSS: Styling Lists

List Styling Properties

list-style-type

list-style-image

list-style-position

Chapter 17. Creating and Styling Components

Components and Layout

Buttons

Cards

Top Bar

Footer and Bottom Bar

Chapter 18. Completing Website Development

Website Structure Design

Live Server

Home (Landing) Page Development

Main (List) Page Development

Content (Detail) Page Development

Chapter 19. Publishing Websites

Key Steps to Publish Websites

Domain and DNS Server

Favicon

GitHub Pages

Chapter 20. Supplemental Topics

Horizontal Rule – <hr>

Line Break – <br>

Reserved Characters and HTML Entities

Non-breaking Space – &nbsp;