Lecture
Notes of Class 3 - Typography and Text Utilities
Learning Objectives:
1.
Understand the concept of typography and
its importance in web design.
2.
Learn about Bootstrap typography classes
and text utilities.
3.
Apply Bootstrap classes to style
headings, paragraphs, and align text.
4.
Use text utilities to enhance text
appearance.
Introduction to Typography:
Typography
refers to the art and technique of arranging text to make it readable,
appealing, and effective in communication. It includes the selection of fonts,
sizes, spacing, and alignment.
Why
Typography is Important:
1.
Readability: Makes the content
easy to read.
2.
Visual Appeal: Enhances the design
aesthetics.
3.
Emphasis: Highlights important
sections.
4.
Hierarchy: Organizes information
in a structured way.
Bootstrap Typography Classes:
Bootstrap
provides predefined classes to style headings, paragraphs, and other text
elements. These classes save time and ensure consistent design.
1. Heading
Classes:
Bootstrap
allows you to style headings using specific classes.
- Example Classes:
.h1,.h2,.h3,.h4,.h5,.h6(correspond to<h1>to<h6>tags).
Usage
Example:
html<h1 class="h1">This is a Heading 1</h1><h2 class="h2">This is a Heading 2</h2>
2. Paragraph
Classes:
Bootstrap
offers additional utilities for paragraph text.
- Class:
.lead - Highlights
a paragraph as an introductory or standout text.
Usage
Example:
html<p class="lead">This is an important introductory paragraph.</p><p>Regular paragraph text goes here.</p>
3. Text
Alignment Classes:
You can
align text using text alignment classes:
.text-start: Aligns text to the left (default)..text-center: Centers the text..text-end: Aligns text to the right.
Usage
Example:
html<p class="text-start">Left-aligned text.</p><p class="text-center">Center-aligned text.</p><p class="text-end">Right-aligned text.</p>
Bootstrap Text Utilities:
Text
utilities are small helper classes that modify text appearance.
1. Text
Color:
.text-primary: Primary color..text-secondary: Secondary color..text-success: Green color for success messages..text-danger: Red color for error messages..text-warning: Yellow color for warnings..text-info: Blue color for informational messages..text-muted: Gray color for muted text..text-lightand.text-dark: Light and dark shades.
Usage
Example:
html<p class="text-primary">This is primary text.</p><p class="text-muted">This text is muted.</p><p class="text-success">This text indicates success.</p>
2. Text
Transformation:
.text-uppercase: Converts text to uppercase..text-lowercase: Converts text to lowercase..text-capitalize: Capitalizes the first letter of each word.
Usage
Example:
html<p class="text-uppercase">this will be uppercase.</p><p class="text-lowercase">THIS WILL BE LOWERCASE.</p><p class="text-capitalize">this will be capitalized.</p>
3. Font
Weight and Style:
.fw-bold: Bold text..fw-normal: Normal font weight..fst-italic: Italic text..fst-normal: Normal text style.
Usage
Example:
html<p class="fw-bold">This is bold text.</p><p class="fst-italic">This is italic text.</p>
Lab Tasks:
Task 1:
Use Bootstrap Classes for Headings and Paragraphs
1.
Create an HTML page.
2.
Add headings using .h1 to .h6 classes.
3.
Style a paragraph using .lead.
Task 2:
Apply Text Alignment
1.
Create three paragraphs.
2.
Use .text-start,
.text-center, and .text-end to align them.
Task 3:
Use Text Utilities
1.
Style text using .text-muted, .text-primary, .text-uppercase, and .fw-bold.
2.
Create a styled paragraph with mixed
text utilities.
Sample
Code for Lab Tasks:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Typography and Text Utilities</title></head><body> <div class="container mt-4"> <h1 class="h1">Heading 1</h1> <h2 class="h2">Heading 2</h2> <p class="lead">This is an introductory paragraph styled using Bootstrap's lead class.</p> <p class="text-start">This text is left-aligned.</p> <p class="text-center">This text is center-aligned.</p> <p class="text-end">This text is right-aligned.</p> <p class="text-primary fw-bold">Primary bold text.</p> <p class="text-muted text-uppercase">Muted and uppercase text.</p> <p class="text-success fst-italic">Success message in italic.</p> </div></body></html>
Summary:
- Typography
is essential for improving readability and aesthetics in web design.
- Bootstrap
provides convenient classes for styling text, such as headings, alignment,
and color utilities.
- Text
utilities like
.text-primary,.fw-bold, and.text-uppercaseallow you to enhance text presentation easily.
Encourage students to explore additional Bootstrap typography classes and experiment with combinations in their projects.
No comments:
Post a Comment