CSS Fundamentals

Kursinhalt

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS

What is CSS and Why is it Important?Linking CSS to an HTML Document Mastering CSS Selectors for Styling HTML Elements Challenge: Apply Your First CSS Styles Challenge: Style with Class Selectors Enhancing Styles with User Action Pseudo-Classes Challenge: Apply User Action Pseudo-Classes Changing Text Colors in CSS Optimizing Workflow for Efficient CSS Coding Challenge: Use Variables for Better CSS Management

2. Styling Text in CSS

Mastering Text Styling in CSS Text Formatting Techniques for Readability Challenge: Format Text with CSS Adding Custom Fonts to a Web Page Understanding and Using Font Properties Challenge: Explore Font Properties

3. The CSS Box Model & Spacing Elements

What is the CSS Box Model?Understanding Box Sizing in CSS Adding Space with Margins and Padding Challenge: Apply Box Sizing to Elements Using Structural and Functional Pseudo-Classes Challenge: Practice Structural Pseudo-Classes Understanding Block, Inline, and Inline-Block Elements Working with Block-Level Elements Working with Inline Elements Challenge: Predict Page Layout with Different Element Types

4. Mastering Flexbox for Layouts

What is Flexbox and Why Use It?Setting the Flex Direction for Layouts Justifying Content Horizontally in Flexbox Aligning Items Vertically in Flexbox Understanding Flex Item Properties Challenge: Apply Flexbox Concepts Challenge: Build a Layout with Flexbox

5. Adding Decorative Effects with CSS

Using Background Colors for Design Applying Background Images to Elements Working with Images in CSS Creating Effects with Decorative Pseudo-Elements Adding Shadows for Depth and Style Challenge: Implement Decorative Effects in CSS Further Steps

Applying Background Images to Elements

background-image property allows us to add an image as the background of an HTML element. The basic syntax is so simple:

css

As a value for the background-image property, we use url(), and inside these brackets, we specify the image url.

index.html

index.css

background-repeat

It determines if the image will be repeated horizontally, vertically, both or not at all.

css

index.html

index.css

background-position

background-position is used to set the starting position of a background image within an element's background area. This property allows us to specify where the background image should be placed and how it should be positioned relative to the element. We have to set the position on the x and y axis

css

index.html

index.css

background-size

background-size specifies the size of an element's background image. It can be used to scale the image to fit the element, or to set a specific size for the background image.

css

auto keeps the background image at its original size (default);
cover scales the image to completely cover the element while maintaining its aspect ratio, possibly cropping parts of the image;
contain scales the image to fit entirely within the element while maintaining its aspect ratio, possibly leaving empty spaces;
value sets custom dimensions for the background image, such as 100px 50px or percentages like 50%.

index.html

index.css

1. What does the `background-image` property do?

2. What does the `background-repeat` property do?

3. What property determines the position of an element's background image?

War alles klar?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 2

some-alt