From selectors and the box model to Flexbox, Grid, responsive design, animations, custom properties, and modern layout techniques for styling any interface.
CSS (Cascading Style Sheets) is the language used to control the visual presentation of HTML documents. It allows you to style everything from colors and fonts to layouts and animations. What is CSS? CSS specifies how HTML elements should be displayed on screen, paper, or in other media. It separates content (HTML) from presentation (CSS),…
CSS selectors are patterns used to select and style HTML elements. Understanding selectors is essential for applying styles effectively. CSS also allows comments to document your code. CSS Comments Comments are used to add notes or explanations in your CSS code. They are ignored by the browser. Syntax: Types of Selectors Selector Type Symbol/Pattern Example…
CSS units are used to specify various properties like width, height, margin, padding, font-size, and more. Choosing the right unit is essential for creating responsive and accessible designs. Overview of CSS Units Category Units Description Absolute px, cm, mm, in, pt, pc Fixed size, not responsive Relative (font) em, rem, ex, ch, lh, rlh Relative…
CSS provides multiple ways to specify colors, allowing you to style text, backgrounds, borders, and more. Understanding color formats and properties is essential for creating visually appealing web pages. Color Formats Format Example Description Named Colors red, blue, yellow Predefined color names Hexadecimal #FF0000, #F00 6-digit or 3-digit hex values RGB rgb(255, 0, 0) Red,…
CSS provides a rich set of properties to control the background of any element. You can set colors, images, gradients, and control how they are positioned, repeated, scaled, and clipped. Overview of Background Properties Property Description Example background-color Sets the background color background-color: red; background-image Sets the background image or gradient background-image: url(“image.jpg”); background-repeat Controls…
Fonts play a crucial role in web design, affecting readability, user experience, and overall aesthetics. CSS provides several properties to customize the appearance of text, including font family, size, weight, style, and more. Overview of Font Properties Property Description Example font-family Specifies the font family font-family: Arial, sans-serif; font-size Specifies the font size font-size: 16px;…
Line height and text decoration are essential CSS properties for controlling the spacing and visual styling of text. They enhance readability and allow you to add decorative elements to your text. line-height The line-height property specifies the space between lines of text. It’s one of the most important properties for readability. Values Value Type Example…
These CSS properties control the alignment, spacing, and case transformation of text, helping you create visually appealing and well-structured content. Overview of Properties Property Description Common Values text-align Aligns text horizontally within its parent left, center, right, justify letter-spacing Sets space between characters normal, 2px, 0.1em word-spacing Sets space between words normal, 4px, 0.2em text-transform…
These CSS properties control the indentation, vertical alignment, last-line alignment, and text direction of elements, offering fine-grained control over text layout and readability. Overview of Properties Property Description Common Values text-indent Indents the first line of a block element 40px, 2em, 10% vertical-align Aligns inline/inline-block elements vertically baseline, middle, top, bottom text-align-last Aligns the last…
These CSS properties control the handling of whitespace, add emphasis marks to text, and create shadow effects for enhanced typography. Overview of Properties Property Description Common Values white-space Controls whitespace handling and wrapping normal, nowrap, pre, pre-wrap, pre-line text-emphasis Adds emphasis marks (shorthand for style + color) fill, before “•”, filled double-circle #ffb703 text-shadow Adds…