Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Mastering Text Styling in CSS | Styling Text in CSS
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
What is CSS and Why is it Important?Linking CSS to an HTML DocumentMastering CSS Selectors for Styling HTML ElementsChallenge: Apply Your First CSS StylesChallenge: Style with Class SelectorsEnhancing Styles with User Action Pseudo-ClassesChallenge: Apply User Action Pseudo-ClassesChanging Text Colors in CSSOptimizing Workflow for Efficient CSS CodingChallenge: Use Variables for Better CSS Management
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
3. The CSS Box Model & Spacing Elements
What is the CSS Box Model?Understanding Box Sizing in CSSAdding Space with Margins and PaddingChallenge: Apply Box Sizing to ElementsUsing Structural and Functional Pseudo-ClassesChallenge: Practice Structural Pseudo-ClassesUnderstanding Block, Inline, and Inline-Block ElementsWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict Page Layout with Different Element Types
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Mastering Text Styling in CSS

text-decoration

The text-decoration property can be applied to any text content, including links, headings, paragraphs, and lists. It adds line effects such as underlining. Common values:

text-decoration: none | line-through | underline | overline

Let's run the following example and see the difference between all the property values.

index.html

index.html

styles.css

styles.css

copy

Output

text-transform

The text-transform property allows us to change the capitalization of text content in HTML elements.

text-transform: capitalize | lowercase | uppercase | none

Let's consider the difference between all the property values:

index.html

index.html

styles.css

styles.css

copy

Output

text-align

The text-align property allows you to horizontally align text content.

text-align: start | end | center | justify
index.html

index.html

styles.css

styles.css

copy

Output

1. What CSS property allows to change the capitalization of text content?

2. What CSS property allows to horizontally align text content?

3. What CSS property allows you to add visual effects to the text content, such as underline or strike-through?

question mark

What CSS property allows to change the capitalization of text content?

Select the correct answer

question mark

What CSS property allows to horizontally align text content?

Select the correct answer

question mark

What CSS property allows you to add visual effects to the text content, such as underline or strike-through?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 1

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
What is CSS and Why is it Important?Linking CSS to an HTML DocumentMastering CSS Selectors for Styling HTML ElementsChallenge: Apply Your First CSS StylesChallenge: Style with Class SelectorsEnhancing Styles with User Action Pseudo-ClassesChallenge: Apply User Action Pseudo-ClassesChanging Text Colors in CSSOptimizing Workflow for Efficient CSS CodingChallenge: Use Variables for Better CSS Management
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
3. The CSS Box Model & Spacing Elements
What is the CSS Box Model?Understanding Box Sizing in CSSAdding Space with Margins and PaddingChallenge: Apply Box Sizing to ElementsUsing Structural and Functional Pseudo-ClassesChallenge: Practice Structural Pseudo-ClassesUnderstanding Block, Inline, and Inline-Block ElementsWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict Page Layout with Different Element Types
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Mastering Text Styling in CSS

text-decoration

The text-decoration property can be applied to any text content, including links, headings, paragraphs, and lists. It adds line effects such as underlining. Common values:

text-decoration: none | line-through | underline | overline

Let's run the following example and see the difference between all the property values.

index.html

index.html

styles.css

styles.css

copy

Output

text-transform

The text-transform property allows us to change the capitalization of text content in HTML elements.

text-transform: capitalize | lowercase | uppercase | none

Let's consider the difference between all the property values:

index.html

index.html

styles.css

styles.css

copy

Output

text-align

The text-align property allows you to horizontally align text content.

text-align: start | end | center | justify
index.html

index.html

styles.css

styles.css

copy

Output

1. What CSS property allows to change the capitalization of text content?

2. What CSS property allows to horizontally align text content?

3. What CSS property allows you to add visual effects to the text content, such as underline or strike-through?

question mark

What CSS property allows to change the capitalization of text content?

Select the correct answer

question mark

What CSS property allows to horizontally align text content?

Select the correct answer

question mark

What CSS property allows you to add visual effects to the text content, such as underline or strike-through?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 1
some-alt