Chapter 11. CSS: Styling Text and Images
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
Get the Book Now