Hover over each card to learn more about important CSS properties
Enables flexible layout with easy alignment of elements. Flex containers make it simple to arrange items in rows or columns with controlled spacing.
Positions elements to the left or right, allowing text to flow around them. Often used for image placement in text layouts.
This text flows around the floated elements. Notice how content naturally wraps around each floated box, creating a layout with text flowing between elements.
Clips content that extends beyond the element's boundaries, preventing scrollbars and overflow visibility.
Automatically adjusts width to fit the content within, rather than stretching to fill available space or constraining to a fixed width.
Uses the Webdings font for symbols instead of standard text characters. Useful for simple icons before modern alternatives like icon fonts.
(Note: Webdings displays symbols instead of letters)
Centers items horizontally within a flex container, creating equal space before and after all items.
Aligns items vertically in the center within a flex container, perfect for creating vertically centered layouts.
Defines element height using relative units, where 1rem equals the root font size (typically 16px). Scales with user preferences.
Limits the maximum width to the content's natural size, preventing oversized containers while allowing flexibility.
Allows font sizes to scale responsively between minimum and maximum values, ensuring readable text at any screen size.
This text uses font: clamp(1rem, 2.5vw, 2rem)
Resize your browser to see how it adapts
Sets text color to gold, adding a touch of elegance and emphasis to important content.
This text is written in gold color
Prevents text from wrapping to a new line, even when it exceeds the container width. Useful for keeping related content together.
This text will not wrap even if it exceeds the width of the container. It will become horizontally scrollable instead. Try to scroll horizontally to see more text content.