Course Content

Advanced CSS Techniques

1. Getting Started with Advanced CSS

Course Overview and Learning Outcomes Course Focus Topics Covered in This Course Success Tips for Learning Advanced CSS

2. Mastering CSS Positioning

Understanding CSS Positioning Relative Positioning Explained Challenge: Apply Relative Positioning Absolute Positioning in CSS Challenge: Implement Absolute Positioning Fixed Positioning for Sticky UI Elements Challenge: Work with Fixed Positioning Sticky Positioning for Dynamic Layouts Challenge: Master Sticky Positioning Managing the Stacking Order of Elements Challenge: Control Z-Index and Overlapping Element Handling Content Overflow in CSS

3. Creating Smooth Transitions in CSS

Introduction to CSS Transitions Choosing the Right Transition Properties Setting Transition Duration for Effects Customizing Transitions with Timing Functions Adding Delay to CSS Transitions Combining Transitions Challenge: Add a Smooth Transition Effect

4. Advanced CSS Animations

What Are CSS Animations?Defining Animation Duration and Timing Controlling Animation Iteration and Direction Managing Animation States in CSS Composing Multiple Animations Challenge: Implement CSS Animation

5. Transforming Elements with CSS

Introduction to CSS Transformations Scaling Elements Rotating Elements in 2D and 3D Challenge: Apply Scaling & Rotation Translating Elements for Dynamic Effects Skewing Elements for Unique Designs Using Perspective for Depth Effects Challenge: Combine Translation and Skewing

6. Responsive Web Design in CSS

What Is Responsive Web Design?Using @media Queries for Adaptive Styles Building Flexible Layouts for Different Screen Sizes Inspecting Web Pages Challenge: Inspecting Adaptive Layout

7. CSS Preprocessors and Sass

Introduction to CSS Preprocessors Understanding Sass Syntax for Better CSS Using Sass Variables for Reusable Styles Performing Calculations with Sass Numeric Operators Nesting Styles for Cleaner Code Extending Styles with the @extend Directive Organizing Sass Files for Scalable Projects

Handling Content Overflow in CSS

Let's consider how we can control the content overflow with the help of one property. Sometimes happens that we have the fixed width and height of the element. However, the inner content is much bigger than the available space. The overflow property controls the behavior of an element's content when it exceeds the height or width values explicitly set for the element.

visible - is the default value. The content overflows the element borders and stays visible;
scroll - The content overflows the element borders, and the scrollbar appears that allows a user to scroll both vertically and horizontally;
hidden - The content that overflows the element borders size is cut and not visible;
auto - works the same as scroll. However, the scrollbars appear only when the content overflows the element borders.

Note

The overflowing content does not affect the other elements' geometry.

visible

If the overflow property is not set, its default value is visible. It means that the content will be displayed outside the element's borders. In the example, the box's borders are highlighted in darkblue, and the box has fixed width and height properties.

index.html

index.css

scroll

We can see the full element content using a scroll. Let's check the example:

index.html

index.css

hidden

All overflow content will be hidden, and a user will never see it. Generally, it is helpful only when we need to develop some decorative effects.

index.html

index.css

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 12