Advanced CSS

📄️ Box Model & Positioning el.

* For practice - CSS Position Lab GitHub

Which will the % (percentage) value calculated in reference to? The answer depends on the position property of the html element and the containing block (container), which the element takes as reference, for calculation of percentage.

📄️ Responsive Website

Responsive Design Strategies

📄️ Styling Form

Advanced Attribute Selectors

📄️ Custom Font

the order will be as below:

📄️ Flex Box

Adding the z-index to an element only has an effect, if the position property with a value different from static was applied to this element.

📄️ CSS Grid

image

📄️ Transitions & Animations

Simple animation

📄️ Future Proof CSS code

* CSS Modules & Working Groups

📄️ Sassy CSS

* SASS -> Systematically Awesome Style Sheets

📄️ : vs :: in CSS3

<!-- import Tabs from '@theme/Tabs';

📄️ Media Query

A media query is a CSS technique used to apply styles based on the characteristics of the user's device, such as screen size, resolution, orientation, or other properties. Media queries are essential for creating responsive designs that adapt to different screen sizes and devices.

📄️ Media & Container Queries

Both Container Queries and Media Queries are CSS techniques used to apply styles based on certain conditions. However, they differ in what they target and how they are used.

📄️ BEM Naming Convention

🎯 What is BEM?

📄️ CSS Intro & Specificity

📄️ CSS Combinators