CSS Fundamentals

Kursinhalt

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSS Selectors for Styling HTML Elements Challenge: Add Your First Styles Challenge: Add The Styles using the Class Name User Action Pseudo-Classes Challenge: User Action Pseudo-Classes Text Colors Effective Work with CSS Challenge: Variables in CSS

2. Text Styles

Text Styling Text Formatting Challenge: Text Formatting Adding Custom Fonts to the Web Page Font Properties Challenge: Fonts

3. Box Model and Layout

Box Model Box Sizing Adding Space to Elements Challenge: Box-Sizing Structural and Functional Pseudo-Classes Challenge: Structural Pseudo-Classes Element Types Working with Block-Level Elements Working with Inline Elements Challenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex Direction Justifying Content Horizontally Aligning Items Vertically Flex Item Properties Challenge: Flexbox Challenge: Work with Flexbox

5. Decorative Effects

Background Color Background Image Working with Images Decorative Pseudo-Elements Shadows Challenge: Decorative Effects Further Steps

Challenge: Text Formatting

Task

To enhance the visual presentation of the h1 element, apply the following styles:

Add an underline.
Convert all letters to uppercase.
Horizontally recenter the text.
Set the line height to 2.
Adjust the letter spacing to 2px.
Increase the space between words to 5px.
Apply a text shadow with the values 2px 2px #000000.

index.html

index.css

text-decoration: Underlines the text.
text-transform: Converts the text to uppercase.
text-align: Centers the text horizontally.
line-height: Sets the height of the text.
letter-spacing: Increases the space between letters.
word-spacing: Increases the space between words.
text-shadow: Adds a shadow.

index.html

index.css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3

some-alt