CSS

These CSS properties control how text breaks across lines, making them essential for handling long words, URLs, or content in narrow containers. Overview of Properties Property Description Common Values line-break Controls line-breaking behavior auto, normal, loose, strict, anywhere word-break Controls word-breaking behavior normal, break-all, keep-all 1. line-break The line-break property specifies how line breaks should…

These CSS properties control character combination, underline positioning, and overflow handling for text, offering fine-grained control over typography and layout. Overview of Properties Property Description Common Values text-combine-upright Combines characters into a single upright glyph none, all text-underline-offset Sets the distance of the underline auto, 2px, 0.2em, 10% text-underline-position Sets the position of the underline…

These CSS properties give you precise control over how images are oriented, rendered, fitted, and positioned within their containers — essential for responsive and high-quality image display. Overview of Properties Property Description Common Values image-orientation Specifies the orientation of an image none, from-image image-rendering Controls how browsers render images auto, crisp-edges, pixelated object-fit How content…

The CSS Box Model is a fundamental concept that describes how every HTML element is structured and displayed on a web page. Every element is essentially a rectangular box composed of four layers: content, padding, border, and margin. The Four Layers of the Box Model Layer Description Content The actual space occupied by the element’s…

The position property is one of the most powerful tools in CSS for controlling the layout and placement of elements. It determines how an element is positioned in the document flow and how it responds to the top, right, bottom, and left properties. Overview of position Values Value Description static Default — element stays in…

The display property is one of the most important CSS properties. It controls how an element is displayed on a webpage and how it behaves in the document flow. Overview of display Values Value Description In Flow? Dimensions? Line Breaks? inline Flows with text ✅ Yes ❌ No ❌ No block Starts on new line,…

These three properties are the foundation of the CSS Box Model. They control the spacing around elements (margin), the spacing inside elements (padding), and the outline of elements (border). Overview of the Three Properties Property Description Where It Applies margin Space outside the border Between the element and its neighbors padding Space inside the border…

CSS Grid is a two-dimensional layout system introduced in CSS3. It provides a powerful and flexible way to create complex, responsive layouts by defining rows and columns. What is CSS Grid? CSS Grid allows you to arrange elements into rows and columns, giving you precise control over the layout of your web page. Unlike Flexbox…

These three properties take CSS Grid to the next level, allowing you to create named grid areas, precisely position items, and use a shorthand for the entire grid definition. Overview of Properties Property Description grid-template-areas Defines named grid areas using a visual map grid-area Positions a grid item in the grid (or assigns it to…

These three properties control how auto-placed grid items are sized and positioned. They’re essential for handling grids where the number of items isn’t known in advance or where you want automatic sizing rules. Overview of Properties Property Description grid-auto-columns Sets the default size for auto-placed columns grid-auto-rows Sets the default size for auto-placed rows grid-auto-flow…