CSS Fundamentals

Contenu du cours

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

Adding Shadows for Depth and Style

We can use box shadows to create a visual effect where an element appears to float above the background. This effect can create depth, highlight specific elements, and add visual interest to a webpage. To achieve it we can apply the box-shadow property.

css

offset-x refers to the horizontal positioning of the shadow, with a positive value shifting the shadow to the right of the element and a negative value shifting it to the left;
offset-y refers to the vertical positioning of the shadow, with a positive value shifting the shadow downwards and a negative value shifting it upwards;
blur-radius sets the degree of blurring for the shadow and is an optional value, with a higher value producing a more blurred shadow;
spread-radius is also optional, increases or decreases the size of the shadow based on its positive or negative value;
color specifies the color of the shadow using any valid color format, and is also an optional value.

index.html

index.css

Note

To find the best suited shadow visit the source shadow generator.

In addition to box-shadow, text-shadow and drop-shadow properties allow us to create shadows for text and other elements, respectively. They work the same way as the box-shadow property. However, these properties are used rarely in comparison with box-shadow.

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 5

some-alt