CSSLanguage for styling web pages
1. Concepts — basics
  1. What it is: CSS (Cascading Style Sheets) is a style language used to describe the presentation of a document written in HTML or XML.
  2. What it's for: It separates content (HTML) from presentation, letting you control a web page's layout, colours, fonts and other visual aspects.
  3. When to use it: When you need to define the styling and layout of web pages.
SelectorsLanguage for styling web pages
1. Concepts — basics
  1. What it is: CSS selectors are patterns used to select and style one or more HTML elements in a web page.
  2. What it's for: They identify the specific HTML elements a style rule should apply to, allowing precise, targeted control of the page's layout and appearance.
  3. When to use it: When you need to select specific elements to apply styles to.
ColorProperty for setting an element's colour
1. Concepts — basics
  1. What it is: The CSS 'color' property sets the colour of text and of certain decorative borders on HTML elements.
  2. What it's for: It controls the colour of textual content and some decorative elements, improving the page's readability and appearance.
  3. When to use it: When you need to set the colour of text.
BackgroundProperty for setting an element's background
1. Concepts — basics
  1. What it is: The CSS 'background' property is a shorthand that lets you define every aspect of an element's background in a single declaration.
  2. What it's for: It controls the appearance of HTML elements' backgrounds, letting you create visually appealing designs and improve the page's overall look.
  3. When to use it: When you need to set background colours.
Font-FamilyProperty for setting the typefaces
1. Concepts — basics
  1. What it is: The CSS 'font-family' property specifies the font family — or a prioritised list of families — to use for a selected element.
  2. What it's for: It controls the typographic appearance of text, affecting the readability, the style and the overall mood of a page's design.
  3. When to use it: When you need to set the main typeface for your text.
Text-AlignProperty for aligning text horizontally
1. Concepts — basics
  1. What it is: The CSS 'text-align' property specifies the horizontal alignment of text within a block element or a table cell.
  2. What it's for: It controls the horizontal arrangement of text, improving readability and the visual organisation of the content inside an element.
  3. When to use it: When you need to align text left, right, centred or justified.
MarginProperty for setting the space outside an element
1. Concepts — basics
  1. What it is: The CSS 'margin' property controls the space outside an element, creating distance between the element's border and the elements next to it.
  2. What it's for: It manages spacing and layout across a page, letting you create visual separation and improving the readability and organisation of the content.
  3. When to use it: When you need space between adjacent elements.
PaddingProperty for setting the space inside an element
1. Concepts — basics
  1. What it is: The CSS 'padding' property controls the space inside an element, creating distance between the element's content and its border.
  2. What it's for: It manages elements' internal spacing, improving the readability of the content and the overall look of the layout.
  3. When to use it: When you need space around the content inside an element.
BorderProperty for setting an element's borders
1. Concepts — basics
  1. What it is: The CSS 'border' property is a shorthand that lets you define an element's border style, width and colour in a single declaration.
  2. What it's for: It creates and customises elements' borders, improving their appearance, defining boundaries and creating separation between different elements.
  3. When to use it: When you need to define an element's boundaries visually.
Border-radiusRounds an element's corners
1. Concepts — basics
  1. What it is: The CSS 'border-radius' property rounds the corners of an element's box.
  2. What it's for: It creates rounded corners or circular shapes; setting a radius equal to half of a square gives you a circle.
  3. When to use it: When you want buttons, cards or avatars with rounded corners.
Box ModelLayout model for HTML elements
1. Concepts — intermediate
  1. What it is: The CSS box model is a fundamental concept describing how HTML elements are represented as rectangular boxes made of content, padding, border and margin.
  2. What it's for: It defines the structure and layout of elements in a web page, controlling each element's dimensions, its inner and outer space, and its borders.
  3. When to use it: When you need to work out elements' actual dimensions.
Box-sizingHow width and height are calculated
1. Concepts — intermediate
  1. What it is: The CSS 'box-sizing' property defines whether 'width' and 'height' include padding and border in the size calculation.
  2. What it's for: With the value 'border-box' the declared size also covers padding and border, which makes layouts far more predictable than the default 'content-box'.
  3. When to use it: Practically always; it is conventional to set 'box-sizing: border-box' on every element at the top of the stylesheet.
WidthAn element's width
1. Concepts — basics
  1. What it is: The CSS 'width' property sets the width of an element's content area.
  2. What it's for: It controls how much horizontal space an element takes; it accepts values in px, %, em, rem, or the keyword 'auto'.
  3. When to use it: When you need to give an element a precise width instead of letting the content or the container decide.
HeightAn element's height
1. Concepts — basics
  1. What it is: The CSS 'height' property sets the height of an element's content area.
  2. What it's for: It controls the vertical space an element takes; the value 'auto' lets the content decide.
  3. When to use it: When you need to fix a precise height; often it is better to leave 'auto', so the content cannot overflow.
Min-widthMinimum width
1. Concepts — basics
  1. What it is: The CSS 'min-width' property sets the minimum width an element can take.
  2. What it's for: It stops an element becoming narrower than a given value, even when space runs short.
  3. When to use it: In responsive layouts, to stop columns or buttons being squeezed too far.
Max-widthMaximum width
1. Concepts — basics
  1. What it is: The CSS 'max-width' property sets the maximum width an element can reach.
  2. What it's for: It limits how far an element can grow; it is widely used to keep blocks of text readable on wide screens.
  3. When to use it: For central containers ('max-width: 1200px', say) or to make images fluid with 'max-width: 100%'.
Min-heightMinimum height
1. Concepts — basics
  1. What it is: The CSS 'min-height' property sets an element's minimum height.
  2. What it's for: It guarantees a minimum height even with little content, while still letting the element grow when it needs to.
  3. When to use it: For full-page sections ('min-height: 100vh', for instance) or to give several blocks the same minimum height.
Max-heightMaximum height
1. Concepts — basics
  1. What it is: The CSS 'max-height' property sets the maximum height an element can reach.
  2. What it's for: It limits an element's height; combined with 'overflow' it lets over-long content scroll.
  3. When to use it: For disclosure panels, scrollable areas, or open-and-close transitions.
SpecificityThe priority mechanism for CSS selectors
1. Concepts — intermediate
  1. What it is: Specificity in CSS is the algorithm that determines which style rule applies to an element when several rules compete for it.
  2. What it's for: It resolves conflicts between overlapping CSS rules, making sure the more specific or more important properties take precedence.
  3. When to use it: When you need to work out which style wins in a conflict.
InheritanceThe mechanism by which CSS properties are passed down
1. Concepts — intermediate
  1. What it is: Inheritance in CSS is the mechanism by which a parent element's properties are passed down to its children, unless they are explicitly...
  2. What it's for: It simplifies writing CSS: you define styles higher up the DOM hierarchy and let them propagate naturally to the elements...
  3. When to use it: When you need to apply consistent styles to groups of related elements.
CascadeThe algorithm that resolves CSS conflicts
1. Concepts — intermediate
  1. What it is: The cascade in CSS is the algorithm that determines which style rules apply to an element when several conflicting rules exist.
  2. What it's for: It resolves conflicts between multiple CSS declarations, establishing a priority order based on origin, specificity and the order the rules appear in.
  3. When to use it: When you need to work out which style applies where rules overlap.
Units of MeasurementUnits for expressing sizes and values in CSS
1. Concepts — intermediate
  1. What it is: Units of measurement in CSS are the values used to specify dimensions, distances and other numeric properties of elements in a web page.
  2. What it's for: They define elements' sizes and proportions precisely and flexibly, enabling layouts that respond and adapt to different devices and contexts of...
  3. When to use it: When you need to set elements' dimensions (width, height, margins, padding).
Shorthand PropertiesCSS properties that combine several values in one declaration
1. Concepts — intermediate
  1. What it is: Shorthand properties in CSS are properties that let you set the values of several related properties in a single declaration, simplifying and...
  2. What it's for: They make CSS more concise, readable and maintainable, cutting repetition and letting you define complex styles quickly.
  3. When to use it: When you need to set styles for borders, margins, padding and fonts quickly.
Custom PropertiesUser-defined variables for reusable CSS values
1. Concepts — advanced
  1. What it is: Custom properties, also known as CSS variables, are user-defined entities holding specific values for reuse within a CSS document.
  2. What it's for: They create reusable values in CSS, improving the code's maintainability, consistency and flexibility, and can even be changed dynamically through JavaScript.
  3. When to use it: When you need to define colours, sizes and other reusable values.
CSS VariablesCSS's native variables for reusable, dynamic values
1. Concepts — advanced
  1. What it is: CSS variables, officially called custom properties, are entities that let you store specific values for reuse throughout a CSS document, offering...
  2. What it's for: They make CSS more maintainable, modular and dynamic, letting you define values once and reuse them across the stylesheet, with the option of...
  3. When to use it: When you need to centralise the definition of colours, sizes and other repeated values.
Calc()CSS function for calculating values dynamically
1. Concepts — advanced
  1. What it is: The CSS calc() function lets you perform arithmetic to determine CSS property values, allowing operations that mix different units of measurement.
  2. What it's for: It creates flexible, responsive layouts by combining different units and enabling dynamic calculations that static values could not express.
  3. When to use it: When you need to combine different units (e.g.
Clamp()A fluid value between a minimum and a maximum
1. Concepts — advanced
  1. What it is: The CSS 'clamp()' function returns a value constrained between a minimum and a maximum, starting from a preferred middle value: clamp(minimum, ideal, maximum).
  2. What it's for: It creates fluid sizes (typography, spacing, widths) that adapt to the viewport without ever leaving the limits you set.
  3. When to use it: For responsive typography — 'font-size: clamp(1rem, 2.5vw, 1.5rem)', for instance — avoiding a lot of media queries.
Min() e Max()They pick the smaller or the larger value
1. Concepts — advanced
  1. What it is: The CSS 'min()' and 'max()' functions return, respectively, the smallest and the largest of the values passed as arguments.
  2. What it's for: They create adaptive values by combining different units — limiting a fluid width, for example.
  3. When to use it: For instance 'width: min(100%, 600px)', for a width that never exceeds 600px but shrinks on small screens.
!importantForces a rule to take priority
1. Concepts — intermediate
  1. What it is: '!important' is an annotation added to a CSS declaration to give it the highest priority, overriding normal specificity.
  2. What it's for: It forces a rule to apply even when other, more specific rules would conflict with it.
  3. When to use it: As little as possible: only as a last resort, or to override third-party styles, because it makes CSS hard to maintain.
Element SelectorCSS selector targeting specific HTML elements
2. Selectors and combinators — basics
  1. What it is: An element selector in CSS is a selector that targets every HTML element of a specific type in a document.
  2. What it's for: It applies styles to all elements of a given HTML type, providing a baseline for the document's general formatting.
  3. When to use it: When you need to set base styles for common HTML elements.
Class SelectorCSS selector targeting elements with a specific class
2. Selectors and combinators — basics
  1. What it is: A class selector in CSS is a selector that targets HTML elements carrying a specific class attribute.
  2. What it's for: It applies styles to specific groups of elements regardless of their HTML type, giving you far more flexibility and reusability in your design.
  3. When to use it: When you need to apply styles to specific groups of elements.
ID SelectorCSS selector targeting the element with a specific ID
2. Selectors and combinators — basics
  1. What it is: An ID selector in CSS is a selector that targets one specific, unique HTML element carrying a matching id attribute.
  2. What it's for: It applies styles to a single, specific element within an HTML page, allowing targeted, high-specificity customisation.
  3. When to use it: When you need to style unique elements such as the header, the footer or a sidebar.
Descendant SelectorCSS selector targeting elements nested inside other elements
2. Selectors and combinators — intermediate
  1. What it is: A descendant selector in CSS is a selector that targets elements which are descendants (children, grandchildren and so on) of another specified element, regardless of...
  2. What it's for: It applies styles to specific elements based on their position in the HTML document's structure, giving you greater precision and control over styling.
  3. When to use it: When you need to style elements inside specific containers.
Pseudo-classesCSS selectors targeting elements in specific states or conditions
2. Selectors and combinators — intermediate
  1. What it is: Pseudo-classes in CSS are keywords you can add to selectors to specify a particular state or relationship of the selected elements.
  2. What it's for: They apply styles to elements in specific conditions or states, allowing more interactivity and dynamism without having to change the markup...
  3. When to use it: When you need to style elements in interaction states (hover, focus, active).
Pseudo-elementsCSS selectors targeting specific parts of an element, or creating virtual content
2. Selectors and combinators — intermediate
  1. What it is: Pseudo-elements in CSS are keywords you can add to selectors to style specific parts of an element, or to create virtual content without...
  2. What it's for: They manipulate and style parts of an element that are not directly reachable through the DOM, or add decorative content without altering the HTML structure.
  3. When to use it: When you need to style the first letter or the first line of a text element.
CombinatorsCSS selectors targeting elements based on their relationship in the DOM
2. Selectors and combinators — advanced
  1. What it is: Combinators in CSS are special symbols used to express relationships between selectors, letting you select elements according to their position in the Document Object...
  2. What it's for: They create more precise, more powerful selectors, letting you apply styles to elements based on their structural relationship to others, without needing to...
  3. When to use it: When you need to select the direct children of a parent element.
Attribute SelectorsCSS selectors targeting elements based on their HTML attributes
2. Selectors and combinators — advanced
  1. What it is: Attribute selectors in CSS are special selectors that let you select HTML elements based on the presence or the value of their attributes.
  2. What it's for: They apply styles to elements with specific attributes or particular attribute values, offering greater flexibility and precision when selecting elements...
  3. When to use it: When you need to select elements with specific attributes.
:Not()CSS pseudo-class targeting elements that do not match a given selector
2. Selectors and combinators — advanced
  1. What it is: not() is a CSS pseudo-class that selects elements which do not match a selector, or a list of selectors, given as its argument.
  2. What it's for: It excludes specific elements from a selection, letting you apply styles to every element except those meeting certain criteria.
  3. When to use it: When you need to apply styles to every element except the ones specified.
:rootSelector for the document's root
2. Selectors and combinators — basics
  1. What it is: The ':root' pseudo-class selects the document's root element, which in HTML is the <html> element.
  2. What it's for: It is used above all to declare CSS variables (custom properties) in one global place reachable from the whole page.
  3. When to use it: When you want to define a theme or reusable values — ':root { --primary-colour: #00A8FF; }', for instance.
DisplayCSS property controlling how elements are rendered
3. Layout and positioning — basics
  1. What it is: The display property in CSS determines how an element should be rendered in a page's layout, defining its rendering behaviour and its role in the document...
  2. What it's for: It controls the kind of rendering box an element generates, affecting its positioning, its interaction with other elements and its behaviour in the...
  3. When to use it: When you need to decide whether an element is treated as block or inline.
Blockdisplay value that creates block-level boxes
3. Layout and positioning — basics
  1. What it is: Block is a value of the CSS display property that creates a block-level box, taking all the available horizontal space and starting on a new line.
  2. What it's for: It creates elements forming distinct blocks in the layout, controlling the document flow and providing a basis for structuring the page's content.
  3. When to use it: When you need to create distinct sections in the page's layout.
Inlinedisplay value that creates elements sitting inline with the text
3. Layout and positioning — basics
  1. What it is: Inline is a value of the CSS display property that creates an inline box, letting the element flow with the surrounding text and take only the space its...
  2. What it's for: It creates elements that behave as part of the text flow, letting you embed content inside paragraphs or other blocks of text without...
  3. When to use it: When you need to embed elements within lines of text.
Inline-blockdisplay value combining characteristics of inline and block elements
3. Layout and positioning — basics
  1. What it is: Inline-block is a value of the CSS display property that creates a box which is inline (it flows with the surrounding text) but behaves like a block element in terms of...
  2. What it's for: It creates elements that flow like inline text but keep block formatting characteristics, allowing flexible layouts and precise control over...
  3. When to use it: When you need horizontal layouts with elements you can size.
Nonedisplay value that removes an element from rendering entirely
3. Layout and positioning — basics
  1. What it is: None is a value of the CSS display property that removes the element from the document flow entirely, so that it is not rendered and takes no space in the...
  2. What it's for: It hides elements from the display and from the page's layout, letting you control content visibility dynamically without removing it from the DOM.
  3. When to use it: When you need to hide elements temporarily or conditionally.
PositionCSS property controlling how elements are positioned
3. Layout and positioning — intermediate
  1. What it is: The position property in CSS determines the positioning method used for an element within its formatting context.
  2. What it's for: It controls how an element is positioned in the page's layout, enabling precise, overlapping, or relative-to-other-elements placement.
  3. When to use it: When you need to build complex, overlapping layouts.
StaticThe default position value, for normal positioning in the document flow
3. Layout and positioning — intermediate
  1. What it is: Static is the default value of the CSS position property, placing elements according to the normal document flow with no special positioning.
  2. What it's for: It keeps elements in their natural order within the document flow, with no positional manipulation at all.
  3. When to use it: When you need to keep the page's default layout.
Relativeposition value for positioning relative to the element's normal place
3. Layout and positioning — intermediate
  1. What it is: Relative is a value of the CSS position property that positions an element relative to its normal place in the document flow, allowing offsets without...
  2. What it's for: It shifts an element from its original position while keeping its space in the layout, creating a context for absolutely positioned children and allowing...
  3. When to use it: When you need to nudge elements slightly from their original position.
Absoluteposition value for positioning absolutely against the nearest positioned ancestor
3. Layout and positioning — intermediate
  1. What it is: Absolute is a value of the CSS position property that removes the element from the normal document flow and positions it relative to its nearest positioned ancestor or...
  2. What it's for: It positions elements precisely within a specific context, allowing overlaps, complex layouts and placement independent of the document...
  3. When to use it: When you need overlapping elements such as modals, tooltips or dropdown menus.
Fixedposition value for positioning fixed against the viewport
3. Layout and positioning — intermediate
  1. What it is: Fixed is a value of the CSS position property that positions an element fixed relative to the viewport, keeping it in the same place even while the page scrolls...
  2. What it's for: It creates elements that stay permanently visible in a specific place on screen regardless of scrolling, useful for elements of...
  3. When to use it: When you need navigation bars fixed to the top or the bottom of the page.
Stickyposition value giving a hybrid of relative and fixed
3. Layout and positioning — intermediate
  1. What it is: Sticky is a value of the CSS position property that lets an element alternate between relative and fixed positioning, depending on the scroll position of the...
  2. What it's for: It creates elements that stay in their normal position until a specific point during scrolling, after which they behave as fixed elements until...
  3. When to use it: When you need section headings that stay visible while the page scrolls.
FloatCSS property that places elements to the left or right of their container
3. Layout and positioning — intermediate
  1. What it is: Float is a CSS property that removes an element from the normal document flow and places it to the left or the right of its container, letting the surrounding content...
  2. What it's for: It is mainly used to create multi-column layouts, place images within text, and implement designs needing side-by-side elements with text wrapping around them.
  3. When to use it: When you need column layouts without using tables.
ClearCSS property controlling how elements behave around floated elements
3. Layout and positioning — intermediate
  1. What it is: Clear is a CSS property specifying whether an element may sit alongside preceding floated elements, or must be moved below them (that is, "cleared"...
  2. What it's for: It controls the layout flow in the presence of floats, preventing unwanted overlaps and correctly handling the placement of non-floated elements...
  3. When to use it: When you need to stop elements sitting alongside floated ones.
Z-indexCSS property controlling the stacking order of elements
3. Layout and positioning — intermediate
  1. What it is: Z-index is a CSS property specifying an element's stacking order along the Z axis (depth) relative to other overlapping elements within the same...
  2. What it's for: It controls which element appears above the others when they overlap, letting you build complex layouts with stacked elements and manage the visibility of...
  3. When to use it: When you need to manage the stacking of positioned (non-static) elements.
FlexboxCSS layout module for building flexible, responsive designs
3. Layout and positioning — advanced
  1. What it is: Flexbox, or Flexible Box Layout, is a CSS layout module designed to make flexible, efficient designs easier to build, by distributing space and aligning...
  2. What it's for: It creates responsive, adaptable layouts, simplifying the distribution of space between elements, their alignment and ordering, and the handling of sizes...
  3. When to use it: When you need a one-dimensional layout (a row or a column).
Flex ContainerThe parent element establishing a flex context for its direct children
3. Layout and positioning — advanced
  1. What it is: A flex container is an HTML element whose display property is set to flex or inline-flex, creating a flex formatting context for its direct children, known...
  2. What it's for: It creates a flexible layout environment in which child elements can be arranged and sized dynamically, allowing an arrangement and alignment...
  3. When to use it: When you need a one-dimensional layout (a row or a column).
Flex ItemA direct child of a flex container that takes part in the flex layout
3. Layout and positioning — advanced
  1. What it is: A flex item is a direct child of a flex container that automatically takes part in the flex layout, adapting and resizing according to the container's properties and...
  2. What it's for: It creates flexible elements within a Flexbox layout, allowing precise control over their growth, shrinking, alignment and order, independently...
  3. When to use it: When you need elements that adapt dynamically to the available space.
Main AxisThe main axis along which flex items are laid out in a flex container
3. Layout and positioning — advanced
  1. What it is: The main axis in Flexbox is the primary axis along which flex items are laid out within a flex container.
  2. What it's for: It defines the layout's main direction in a flex container, determining how flex items are positioned and how space is distributed between them.
  3. When to use it: When you need to set the layout's main orientation (horizontal or vertical).
Cross AxisThe axis perpendicular to the main axis in a flex container
3. Layout and positioning — advanced
  1. What it is: The cross axis in Flexbox is the axis perpendicular to the main axis within a flex container.
  2. What it's for: It defines the secondary alignment and placement of flex items, giving you control over their arrangement perpendicular to the main...
  3. When to use it: When you need to align flex items perpendicular to the layout's main direction.
Flex-directionThe direction of the items in a flex container
3. Layout and positioning — intermediate
  1. What it is: The CSS 'flex-direction' property defines the direction of a flex container's main axis — that is, how its children are laid out.
  2. What it's for: It chooses whether the items are laid out in a row ('row') or a column ('column'), optionally in reverse order.
  3. When to use it: When you need to set a flexible layout's orientation — a navbar in a row, or a list in a column, for instance.
Flex-wrapWraps the items onto several lines
3. Layout and positioning — intermediate
  1. What it is: The CSS 'flex-wrap' property determines whether flex items must stay on a single line or may wrap onto several.
  2. What it's for: It stops the items being squeezed too far, letting them flow onto new lines when the space runs out.
  3. When to use it: With 'flex-wrap: wrap', for fluid grids of cards or tags that must adapt to the available width.
Justify-contentAlignment along the main axis
3. Layout and positioning — intermediate
  1. What it is: The CSS 'justify-content' property aligns flex items along the container's main axis.
  2. What it's for: It distributes space along the main axis, with values such as 'center', 'space-between' and 'space-around'.
  3. When to use it: When you need to centre items or distribute the space between them — in a navigation bar, for instance.
Align-itemsAlignment along the cross axis
3. Layout and positioning — intermediate
  1. What it is: The CSS 'align-items' property aligns flex items along the cross axis, perpendicular to the main one.
  2. What it's for: It controls cross-axis alignment (in a row layout, the vertical one) with values such as 'center', 'flex-start' and 'stretch'.
  3. When to use it: When you need to align elements of different heights — centring them with 'align-items: center', for example.
Align-contentAligns several lines of flex items
3. Layout and positioning — intermediate
  1. What it is: The CSS 'align-content' property distributes the space between a flex container's lines when the items occupy several lines.
  2. What it's for: It aligns the set of lines along the cross axis; it only takes effect with 'flex-wrap: wrap' and more than one line present.
  3. When to use it: When a flex container has several lines and you want to control their overall spacing.
Align-selfAlignment of an individual flex item
3. Layout and positioning — intermediate
  1. What it is: The CSS 'align-self' property lets an individual flex item override the cross-axis alignment set by 'align-items'.
  2. What it's for: It gives one specific element a different alignment from the others in the container.
  3. When to use it: When just one element must behave differently — with 'align-self: flex-end', for instance.
Flex-growA flex item's growth factor
3. Layout and positioning — intermediate
  1. What it is: The CSS 'flex-grow' property defines how much a flex item may grow relative to the others to take up free space.
  2. What it's for: It distributes the available space proportionally: a higher value makes that element grow more.
  3. When to use it: When you want an element to take all the remaining space (e.g. 'flex-grow: 1'); it is part of the 'flex' shorthand.
Flex-shrinkA flex item's shrink factor
3. Layout and positioning — intermediate
  1. What it is: The CSS 'flex-shrink' property defines how much a flex item may shrink when there is not enough space.
  2. What it's for: It controls which elements compress and by how much; with a value of '0' an element never shrinks.
  3. When to use it: When you want to prevent or allow an element being compressed in tight spaces; it is part of the 'flex' shorthand.
Flex-basisA flex item's initial size
3. Layout and positioning — intermediate
  1. What it is: The CSS 'flex-basis' property defines a flex item's base size before the space is distributed.
  2. What it's for: It sets the element's starting size along the main axis, before grow and shrink take effect.
  3. When to use it: When you want a precise starting size in the 'flex' shorthand (e.g. 'flex: 1 1 200px').
OrderThe display order of the items
3. Layout and positioning — intermediate
  1. What it is: The CSS 'order' property changes the order in which flex (or grid) items are displayed, without changing the order in the HTML.
  2. What it's for: It reorders elements visually; the default value is 0, and lower values appear first.
  3. When to use it: Sparingly, to reorder elements in responsive layouts; be careful, because it separates the visual order from the reading and accessibility order.
Grid LayoutTwo-dimensional layout system for building complex, responsive structures
3. Layout and positioning — advanced
  1. What it is: CSS Grid Layout is a two-dimensional layout system that lets you build complex grids of rows and columns, offering precise control over placement and...
  2. What it's for: It creates complex, responsive web layouts, letting you define content areas flexibly and manage space effectively both horizontally and...
  3. When to use it: When you need to build complex, responsive page layouts.
Grid ContainerThe element that establishes a CSS grid and holds the grid items
3. Layout and positioning — advanced
  1. What it is: A grid container is an HTML element whose display property is set to grid or inline-grid, creating a grid formatting context for its direct children, known...
  2. What it's for: It establishes a two-dimensional grid in which to place and align the child elements, letting you build complex, responsive layouts with precise control...
  3. When to use it: When you need structured, flexible page layouts.
Grid ItemsDirect children of a grid container that take part in the grid layout
3. Layout and positioning — advanced
  1. What it is: Grid items are the direct children of a grid container that automatically take part in the CSS grid layout, positioning and sizing themselves according to the...
  2. What it's for: They organise and structure the content within a CSS grid, allowing precise control over the placement, sizing and alignment of the elements...
  3. When to use it: When you need to place specific elements in cells or areas of the grid.
FR UnitFlexible unit for distributing space in CSS Grid
3. Layout and positioning — advanced
  1. What it is: The FR (fraction) unit in CSS Grid is a flexible unit representing a fraction of the available space within a grid container, allowing the...
  2. What it's for: It creates flexible, responsive layouts in CSS Grid, letting you distribute the available space proportionally between columns and rows without needing...
  3. When to use it: When you need to define flexible columns or rows in a CSS grid.
Repeat FunctionCSS function for repeating track patterns in a grid
3. Layout and positioning — advanced
  1. What it is: The repeat() function in CSS Grid is a utility that lets you repeat a pattern of tracks (columns or rows) a specific number of times, or according to the available space,...
  2. What it's for: It creates flexible, responsive grid layouts more concisely, letting you define repeating, adaptable structures easily without having to specify...
  3. When to use it: When you need grids with a fixed number of identical columns or rows.
GapCSS property setting the space between rows and columns in Grid and Flexbox
3. Layout and positioning — advanced
  1. What it is: The gap property in CSS is a shorthand setting the space between rows and columns in a Grid or Flexbox layout, giving you easy control over the spacing between...
  2. What it's for: It creates uniform, consistent gaps between elements in Grid and Flexbox layouts, simplifying spacing and improving the design's readability and appearance.
  3. When to use it: When you need uniform gaps between rows and columns in Grid.
Grid-template-columnsDefines the grid's columns
3. Layout and positioning — intermediate
  1. What it is: The CSS 'grid-template-columns' property defines the number and size of a grid's columns.
  2. What it's for: It sets the grid's horizontal structure, using px, %, the 'fr' unit, or functions such as 'repeat()' and 'minmax()'.
  3. When to use it: On a grid container, to establish how many columns to create and how to size them.
Grid-template-rowsDefines the grid's rows
3. Layout and positioning — intermediate
  1. What it is: The CSS 'grid-template-rows' property defines the number and size of a grid's rows.
  2. What it's for: It sets the grid's vertical structure; if you leave it out, rows are created automatically according to the content.
  3. When to use it: When you want rows of precise heights rather than letting the content size them.
Grid-template-areasLayout through named areas
3. Layout and positioning — intermediate
  1. What it is: The CSS 'grid-template-areas' property defines a grid's layout by naming its areas, drawing it out with strings.
  2. What it's for: It places elements by name (through 'grid-area'), which makes the layout remarkably readable.
  3. When to use it: For structured page layouts (header, sidebar, main, footer) that are easy to rearrange in media queries.
Grid-columnPlaces an item across the columns
3. Layout and positioning — intermediate
  1. What it is: The CSS 'grid-column' property is a shorthand stating which column lines a grid item starts and ends on.
  2. What it's for: It places and stretches an element across one or more columns (e.g. 'grid-column: 1 / 3' or 'grid-column: span 2').
  3. When to use it: When an element must occupy several columns or start from a specific one.
Grid-rowPlaces an item across the rows
3. Layout and positioning — intermediate
  1. What it is: The CSS 'grid-row' property is a shorthand stating which row lines a grid item starts and ends on.
  2. What it's for: It places and stretches an element across one or more rows (e.g. 'grid-row: 1 / 3' or 'grid-row: span 2').
  3. When to use it: When an element must occupy several rows or start from a specific one.
Minmax()A size range for tracks
3. Layout and positioning — intermediate
  1. What it is: The CSS 'minmax()' function defines a size range, with a minimum and a maximum value, for a grid track.
  2. What it's for: It creates columns or rows that stay between two limits — 'minmax(200px, 1fr)', for instance.
  3. When to use it: In responsive grids, typically inside 'repeat()' for columns that are fluid but have a minimum width.
Place-itemsShorthand for align-items and justify-items
3. Layout and positioning — intermediate
  1. What it is: The CSS 'place-items' property is a shorthand that sets 'align-items' and 'justify-items' together on a grid container.
  2. What it's for: It aligns items on both axes at once, in a single declaration.
  3. When to use it: To centre cell content quickly — with 'place-items: center', for example.
Auto-fit e Auto-fillGrid columns that fit themselves to the space
3. Layout and positioning — advanced
  1. What it is: 'auto-fit' and 'auto-fill' are keywords used inside 'repeat()' to create automatically as many tracks as fit the available space.
  2. What it's for: They build responsive grids without media queries; 'auto-fill' keeps the empty tracks, 'auto-fit' collapses them.
  3. When to use it: With 'repeat(auto-fit, minmax(200px, 1fr))', for card grids that rearrange themselves.
Object-fitHow an image fills its box
3. Layout and positioning — intermediate
  1. What it is: The CSS 'object-fit' property defines how replaced content (an image or a video) fits into its own box.
  2. What it's for: It controls resizing without distortion, with values such as 'cover' (fills by cropping) and 'contain' (shows everything).
  3. When to use it: For fixed-size images and videos that must fill a container without stretching, often with 'object-fit: cover'.
Aspect-ratioMaintains a ratio between width and height
3. Layout and positioning — intermediate
  1. What it is: The CSS 'aspect-ratio' property defines the ratio between an element's width and height.
  2. What it's for: It keeps proportions constant ('16 / 9', say) without you having to calculate the height by hand.
  3. When to use it: For video, image or thumbnail boxes that must keep a fixed ratio as the width changes.
Font-sizeCSS property setting the text's font size
4. Typography and text — basics
  1. What it is: The font-size property in CSS sets the character size for an element's text, controlling how large the textual content appears.
  2. What it's for: It controls the readability, the emphasis and the visual hierarchy of text within a web document, letting you adapt text sizes for different...
  3. When to use it: When you need to set the document's base text size.
Font-weightCSS property setting the font's weight or boldness
4. Typography and text — basics
  1. What it is: The font-weight property in CSS specifies the thickness or boldness of the text's characters, controlling how bold or light the text inside an element appears.
  2. What it's for: It creates contrast and visual hierarchy in text, emphasises specific parts of the content, and improves the readability and overall look of the typography in a...
  3. When to use it: When you need to set the text weight for different elements (headings, paragraphs, links).
Font-styleCSS property setting the font's style, mainly for italics
4. Typography and text — basics
  1. What it is: The font-style property in CSS specifies the text's font style, mainly used to apply or remove italics.
  2. What it's for: It controls the text's stylistic appearance, letting you emphasise parts of the content, create visual distinctions and improve typographic expressiveness within...
  3. When to use it: When you need to apply italics to specific text elements.
Line-heightCSS property setting the height of lines of text
4. Typography and text — basics
  1. What it is: The line-height property in CSS specifies the minimum height of a line box within an element.
  2. What it's for: It controls the vertical spacing of text, improving the readability, the appearance and the visual structure of textual content in a web design.
  3. When to use it: When you need to improve text readability, especially for long blocks of text.
Text-decorationCSS property for adding or removing decoration on text
4. Typography and text — basics
  1. What it is: The text-decoration property in CSS specifies the decorations to add to text, such as underlines, overlines or strikethroughs.
  2. What it's for: It improves the text's visual appearance, emphasises specific parts of the content, and gives visual cues about the state or function of text elements such as links.
  3. When to use it: When you need to add or remove underlines from links.
Text-transformCSS property controlling the capitalisation of text
4. Typography and text — intermediate
  1. What it is: The text-transform property in CSS controls the capitalisation of text, letting you change how the letters appear without altering the underlying HTML.
  2. What it's for: It changes the text's visual presentation, improving readability, emphasising specific parts of the content, and keeping typography consistent without the...
  3. When to use it: When you need to convert text to upper or lower case.
Letter-spacingCSS property controlling the space between characters
4. Typography and text — intermediate
  1. What it is: The letter-spacing property in CSS controls the horizontal space between the text's characters, letting you increase or decrease the distance between the letters of an element...
  2. What it's for: It improves the text's readability, appearance and visual impact, giving fine control over the typographic composition and the overall look of the...
  3. When to use it: When you need to improve the readability of small or dense text.
Word-spacingCSS property controlling the space between words
4. Typography and text — intermediate
  1. What it is: The word-spacing property in CSS controls the additional space between words within an element, letting you increase or decrease the distance between words relative to...
  2. What it's for: It improves the text's readability, appearance and composition, giving fine control over the distribution of words and the overall look of paragraphs...
  3. When to use it: When you need to improve the readability of dense or compact text.
White-spaceCSS property controlling how whitespace and line breaks in text are handled
4. Typography and text — intermediate
  1. What it is: The white-space property in CSS controls how whitespace (spaces, tabs, line breaks) is handled within an element, affecting the way the...
  2. What it's for: It defines how the browser should interpret and render whitespace in text, giving precise control over the formatting and the appearance of the content...
  3. When to use it: When you need to preserve the text's original formatting, including line breaks and multiple spaces.
Text-shadowCSS property for adding shadow or glow effects to text
4. Typography and text — intermediate
  1. What it is: The text-shadow property in CSS lets you add one or more shadows to text, creating depth, glow or visual emphasis on the characters.
  2. What it's for: It improves text readability against different backgrounds, creates decorative effects, emphasises text elements and adds visual depth to the page's design.
  3. When to use it: When you need to improve the contrast between text and background.
@font-faceCSS rule for defining and embedding custom fonts in a web page
4. Typography and text — advanced
  1. What it is: The @font-face rule in CSS lets you define and load custom fonts for use in a web page, allowing typefaces that are not standard or not installed on the...
  2. What it's for: It expands the typographic options available to web designers, allowing custom fonts and improving visual consistency across different devices and...
  3. When to use it: When you need to embed custom fonts in a website.
Font-displayCSS property controlling how custom fonts render while they load
4. Typography and text — advanced
  1. What it is: The font-display property specifies how a custom font should be displayed while it loads, and when loading fails, controlling the behaviour...
  2. What it's for: It improves the user experience while custom fonts load, balancing the speed at which content appears against visual consistency, and handling...
  3. When to use it: When you need to optimise how text is displayed while fonts load.
List-styleThe appearance of list markers
4. Typography and text — basics
  1. What it is: The CSS 'list-style' property is a shorthand controlling the type, the position and any image used for a list's item markers.
  2. What it's for: It changes or removes lists' bullets and numbers ('list-style: none', for instance) and customises their appearance.
  3. When to use it: When you need to style or reset the appearance of 'ul' and 'ol' — for menus and navigation, for example.
Vertical-alignVertical alignment of inline elements
4. Typography and text — intermediate
  1. What it is: The CSS 'vertical-align' property defines the vertical alignment of an inline element, an inline-block element or a table cell.
  2. What it's for: It aligns text and images on the same line ('middle', 'baseline', 'top') or the content of table cells.
  3. When to use it: When you need to align inline elements vertically; note that it has no effect on block elements (for those, use Flexbox or Grid).
RGBAdditive colour model used in CSS to define colours
5. Colour and backgrounds — basics
  1. What it is: RGB (red, green, blue) is an additive colour model that creates colours by combining different intensities of red, green and blue, used in CSS to define the colours of...
  2. What it's for: It represents a wide range of colours digitally, letting web designers specify precisely the colours they want for the various interface...
  3. When to use it: When you need to define colours for text, backgrounds, borders and other CSS elements.
HEXHexadecimal notation for specifying colours in CSS
5. Colour and backgrounds — basics
  1. What it is: The HEX (hexadecimal) format in CSS is a way of specifying colours using six-digit notation (or three digits in shorthand) representing the values of red,...
  2. What it's for: It provides a concise, widely supported way to define colours in web design, allowing a precise representation of a wide range of colours with a...
  3. When to use it: When you need to define colours for text, backgrounds, borders and other CSS elements.
Named ColorsPredefined keywords for specifying common colours in CSS
5. Colour and backgrounds — basics
  1. What it is: Named colours in CSS are predefined keywords representing specific colours, letting you use natural-language names instead of numeric values or...
  2. What it's for: They provide an intuitive, easily remembered way to specify common colours in CSS, simplifying styling and improving the code's readability,...
  3. When to use it: When you need to set common colours quickly without remembering specific codes.
HSLColour model based on hue, saturation and lightness for defining colours in CSS
5. Colour and backgrounds — basics to intermediate
  1. What it is: HSL (hue, saturation, lightness) is a CSS colour model representing colours through three components: hue, saturation and lightness, offering a more...
  2. What it's for: It provides a more natural, logical way to specify and manipulate colours in web design, making it easier to build coherent colour schemes and to adapt...
  3. When to use it: When you need to define colours more intuitively than with RGB or HEX.
OpacityCSS property controlling the transparency of an element and its content
5. Colour and backgrounds — intermediate
  1. What it is: The opacity property in CSS controls the transparency level of an element and all its content, determining how visible or invisible the element is against the...
  2. What it's for: It creates transparency, fade and overlay effects, improving the design's appearance, creating visual hierarchies and making it easier to build more...
  3. When to use it: When you need fade effects on interface elements.
RGBA/HSLACSS colour models that include control over opacity
5. Colour and backgrounds — intermediate
  1. What it is: RGBA (red, green, blue, alpha) and HSLA (hue, saturation, lightness, alpha) are extensions of the RGB and HSL colour models that include an alpha channel for controlling opacity...
  2. What it's for: They define colours with variable transparency, allowing overlay effects, gradients and more sophisticated colour transitions, improving the...
  3. When to use it: When you need semi-transparent overlays on images or backgrounds.
GradientCSS function for creating gradual transitions between two or more colours
5. Colour and backgrounds — advanced
  1. What it is: A gradient in CSS is a function that creates a gradual transition between two or more colours, letting you generate complex backgrounds and visual effects without images.
  2. What it's for: It creates sophisticated visual effects, improves the design's appearance, adds depth and dimension to elements, and improves performance by using CSS instead...
  3. When to use it: When you need gradient backgrounds for elements or whole pages.
Background-blend-modeCSS property setting how an element's multiple backgrounds blend together
5. Colour and backgrounds — advanced
  1. What it is: Background-blend-mode is a CSS property specifying how an element's multiple background images and/or background colour should blend together, creating visual effects...
  2. What it's for: It creates advanced visual effects by combining multiple backgrounds, letting you produce sophisticated graphic compositions directly in CSS without resorting to...
  3. When to use it: When you need overlay effects between images and background colours.
ViewportThe visible area of a web page on a device
6. Responsive design — basics
  1. What it is: The viewport is the visible area of a web page within the browser window or the user's device.
  2. What it's for: It acts as the reference for laying out and sizing elements in a web page, letting you build responsive designs that adapt to different screen sizes...
  3. When to use it: When you need to define a responsive layout for different devices.
Media QueriesCSS technique for applying styles based on the device's or browser's characteristics
6. Responsive design — basics
  1. What it is: Media queries are a CSS technique that lets you apply different styles according to the device's or browser's characteristics, such as screen width,...
  2. What it's for: They create responsive layouts and designs that adapt to different devices and viewing conditions, improving the user experience across a wide range of screens and...
  3. When to use it: When you need to adapt the layout for different screen sizes (desktop, tablet, mobile).
Mobile FirstDesign approach that prioritises the mobile experience in web development
6. Responsive design — intermediate
  1. What it is: Mobile first is a web design and development approach that starts by designing for mobile devices as the priority, then progressively adapts the layout to larger...
  2. What it's for: It optimises the user experience on mobile devices, improves performance, focuses on the essential content and creates a solid foundation for a responsive design...
  3. When to use it: When you need to design interfaces optimised for small screens.
Responsive ImagesTechniques for optimising images according to the device's characteristics
6. Responsive design — intermediate
  1. What it is: Responsive images are CSS and HTML techniques and tools that let you serve images optimised for the device's characteristics, such as the size of the...
  2. What it's for: Improving performance, cutting data usage and ensuring images display optimally across different devices and connections.
  3. When to use it: When you need to match images' size and resolution to the device.
Container QueriesCSS technique for applying styles based on the parent container's dimensions
6. Responsive design — advanced
  1. What it is: Container queries are an emerging CSS technique that lets you apply styles to an element based on the dimensions of its parent container, rather than the dimensions...
  2. What it's for: Giving more granular, modular control over components' layout and styling, letting them respond to the context they are placed in,...
  3. When to use it: When you need to apply styles based on the parent container's dimensions.
@supportsApplies styles only if a feature is supported
6. Responsive design — intermediate
  1. What it is: The CSS '@supports' rule (a feature query) applies a block of styles only if the browser supports a given property or value.
  2. What it's for: It provides progressive enhancement, using modern features only where they are available and keeping a fallback elsewhere.
  3. When to use it: For instance '@supports (display: grid) { ... }', to apply rules only in browsers that support Grid.
TransitionCSS property for creating smooth transitions between an element's states
7. Transforms and animation — basics
  1. What it is: CSS transitions are a set of properties that let you define smooth, gradual transitions between an HTML element's different states, creating simple animation without...
  2. What it's for: Improving the user experience by making interfaces more dynamic and interactive, giving visual feedback on the user's actions and making elements' state changes...
  3. When to use it: When you need smooth transitions between an element's states.
TransformCSS property for changing an element's position, scale, rotation and skew
7. Transforms and animation — intermediate
  1. What it is: The CSS transform property lets you change an element's position, scale, rotation and skew in 2D or 3D space, without affecting the flow of the...
  2. What it's for: Allowing complex visual manipulation of HTML elements efficiently and flexibly, supporting smooth animation and dynamic layouts without altering the DOM structure.
  3. When to use it: When you need to change an element's position, scale, rotation or skew.
AnimationCSS technique for creating complex animation without JavaScript
7. Transforms and animation — intermediate
  1. What it is: CSS animations are a set of properties that let you create complex, controlled animation directly in CSS, without JavaScript, by defining a sequence...
  2. What it's for: Providing a powerful, performant way to build web animation, improving interactivity and the user experience, and reducing reliance on scripts for visual effects...
  3. When to use it: When you need complex animation without using JavaScript.
KeyframesAt-rule for defining the states of a CSS animation
7. Transforms and animation — intermediate
  1. What it is: CSS keyframes are an at-rule (@keyframes) defining the intermediate states of a CSS animation, specifying how an element's styles should change over...
  2. What it's for: Letting developers create complex, multi-state animation in CSS by defining precisely how an element's properties change over time, without the...
  3. When to use it: When you need to define the states of a CSS animation.
3D TransformsCSS techniques for manipulating elements in three-dimensional space
7. Transforms and animation — advanced
  1. What it is: CSS 3D transforms are a set of properties and functions that let you manipulate HTML elements in three-dimensional space, allowing rotation, translation and scaling...
  2. What it's for: Creating three-dimensional, interactive visual effects directly in the browser, improving the user experience and allowing more engaging interfaces without the use...
  3. When to use it: When you need to manipulate elements in three-dimensional space.
Animation Timing FunctionsCSS functions controlling how an animation progresses over time
7. Transforms and animation — advanced
  1. What it is: Animation timing functions in CSS are functions determining how an animation progresses over time, controlling its speed at different points in its...
  2. What it's for: Improving the quality and naturalness of CSS animation, letting developers create more realistic or expressive movement that better fits the context and...
  3. When to use it: When you need to control how an animation progresses over time.
VisibilityCSS property controlling an element's visibility without altering the layout
8. Accessibility and user experience — basics
  1. What it is: The CSS `visibility` property controls whether an element is visible, without changing the page's layout.
  2. What it's for: Letting developers hide or show elements without affecting the document flow — useful for dynamic interfaces, temporary content or...
  3. When to use it: When you need to control an element's visibility without altering the layout.
CursorCSS property controlling the appearance of the mouse cursor over an element
8. Accessibility and user experience — basics
  1. What it is: The CSS `cursor` property specifies which cursor to display when the mouse pointer is over an element.
  2. What it's for: Improving usability and the user experience by giving visual cues about the actions available or the state of interface elements, making them more intuitive and clearer...
  3. When to use it: When you need to signal clickable elements (buttons, links) with cursor: pointer.
Focus StylesCSS styles applied to elements when they receive focus
8. Accessibility and user experience — intermediate
  1. What it is: Focus styles in CSS are the styles applied to interactive elements when they receive focus, whether through mouse interaction or keyboard navigation.
  2. What it's for: Improving the site's accessibility and usability by giving clear visual indication of which element has focus — essential for keyboard navigation and for users who...
  3. When to use it: When you want to make it clear which element has focus.
User-selectCSS property controlling whether the user can select text
8. Accessibility and user experience — advanced
  1. What it is: The CSS `user-select` property controls whether, and how, an element's text can be selected by the user.
  2. What it's for: Improving the user experience by controlling text selectability, preventing accidental selections, protecting sensitive content and refining interaction with elements...
  3. When to use it: When you need to disable selection on interface elements such as buttons or menus.
Pointer-eventsCSS property controlling how elements respond to pointer events
8. Accessibility and user experience — advanced
  1. What it is: The CSS `pointer-events` property specifies under what circumstances, if any, a particular graphical element can become the target of pointer events.
  2. What it's for: It lets you control elements' interactivity, disabling or enabling their response to pointer events.
  3. When to use it: When you need transparent overlays that do not interfere with the elements beneath them.
OutlineAn element's outline, often used for focus
8. Accessibility and user experience — basics
  1. What it is: The CSS 'outline' property draws a line around an element, outside the border, without taking up space in the layout.
  2. What it's for: It is used above all to indicate which element has keyboard focus — an important accessibility requirement.
  3. When to use it: To customise the focus ring; do not remove it without providing a visible alternative, because keyboard navigation depends on it.
Scroll-behaviorSmooth page scrolling
8. Accessibility and user experience — basics
  1. What it is: The CSS 'scroll-behavior' property defines whether scrolling to a position happens instantly or is animated.
  2. What it's for: It makes scrolling smooth — when someone clicks a link to an internal anchor, for instance.
  3. When to use it: With 'scroll-behavior: smooth' on the root element; consider honouring the 'prefers-reduced-motion' preference for accessibility.
Vendor PrefixesPrefixes used to implement experimental or browser-specific CSS features
9. Advanced techniques and optimisation — intermediate
  1. What it is: Vendor prefixes are special prefixes added to CSS properties, values or at-rules to implement experimental or browser-specific features.
  2. What it's for: Letting developers use new CSS features while they are still being developed or standardised, while keeping compatibility across different browsers and versions.
  3. When to use it: When you need to implement experimental or browser-specific CSS features.
Fallback ValuesAlternative values used when a CSS property or value is not supported
9. Advanced techniques and optimisation — intermediate
  1. What it is: Fallback values in CSS are alternative values supplied for properties or features that may not be supported by every browser.
  2. What it's for: Ensuring the graceful degradation of a website's appearance in older or less capable browsers, keeping the basic functionality and look intact,...
  3. When to use it: When you need to provide fallbacks for unsupported properties or values.
Normalize.cssCSS stylesheet that normalises default styles across different browsers
9. Advanced techniques and optimisation — intermediate
  1. What it is: Normalize.css is a small, modern, ready-to-use CSS stylesheet providing better cross-browser consistency in HTML elements' default styles.
  2. What it's for: Normalising styles across different browsers to reduce inconsistencies, while keeping the browser's useful defaults.
  3. When to use it: When you need to normalise default styles across different browsers.
Reset CSSCSS technique for removing the browser's default styles
9. Advanced techniques and optimisation — intermediate
  1. What it is: A CSS reset is a technique that uses a stylesheet to remove, or "reset", all the browser's default styles applied to HTML elements.
  2. What it's for: Eliminating inconsistencies between browsers in their default styles, giving developers a uniform starting point for applying their own.
  3. When to use it: When you need to remove the browser's default styles.
Critical CSSOptimisation technique that extracts and inlines the CSS essential to the page's initial render
9. Advanced techniques and optimisation — advanced
  1. What it is: Critical CSS is a performance optimisation technique that identifies and inlines the CSS essential to rendering the visible part...
  2. What it's for: Significantly improving perceived load times and performance metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), giving...
  3. When to use it: To extract and inline the CSS essential to the page's initial render.
MinificazioneOptimisation process that reduces the size of source files
9. Advanced techniques and optimisation — advanced
  1. What it is: Minification is an optimisation process that reduces the size of source files (CSS, JavaScript and HTML) by removing every character that is not...
  2. What it's for: Improving web pages' loading and execution performance by reducing the amount of data that has to travel from server to client, resulting in...
  3. When to use it: To reduce the size of source files.
Sass/SCSSCSS preprocessor extending the features of standard CSS
10. Preprocessors and frameworks — intermediate
  1. What it is: Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor extending the features of standard CSS, offering variables, nesting, mixins and functions.
  2. What it's for: Improving the efficiency and maintainability of CSS, providing tools for writing more modular, reusable and organised styles.
  3. When to use it: When you need to extend the features of standard CSS.
LessCSS preprocessor extending the features of standard CSS
10. Preprocessors and frameworks — intermediate
  1. What it is: Less (Leaner Style Sheets) is a dynamic CSS preprocessor extending the features of standard CSS, offering variables, nesting, mixins, operations and...
  2. What it's for: Improving the efficiency and maintainability of CSS, providing tools for writing more modular, reusable and organised styles.
  3. When to use it: When you need to extend the features of standard CSS.
BootstrapCSS and JavaScript framework for building responsive, mobile-first websites
10. Preprocessors and frameworks — advanced
  1. What it is: Bootstrap is an open source CSS and JavaScript framework, originally created by Twitter, for building responsive, mobile-first websites and web applications.
  2. What it's for: Simplifying and speeding up front-end development, providing a flexible grid system, reusable components and JavaScript plugins.
  3. When to use it: For building responsive, mobile-first websites.
Tailwind CSSUtility-first CSS framework for building custom designs quickly
10. Preprocessors and frameworks — advanced
  1. What it is: Tailwind CSS is a utility-first CSS framework providing low-level utility classes for building custom designs directly in the HTML markup.
  2. What it's for: Letting developers build fully custom designs without leaving the HTML, speeding up development and reducing the need to write CSS...
  3. When to use it: For building custom designs quickly.
Box-shadowCSS property for adding shadows to HTML elements
11. Visual effects and special features — intermediate
  1. What it is: Box-shadow is a CSS property that lets you add shadow effects to HTML elements.
  2. What it's for: It adds depth and visual separation to elements.
  3. When to use it: When you need to add depth to UI elements such as buttons or cards.
Text-overflowCSS property controlling how overflowing text is displayed
11. Visual effects and special features — intermediate
  1. What it is: Text-overflow is a CSS property specifying how overflowing text content, which does not fit its container's box, should be signalled to the user.
  2. What it's for: It controls how overflowing text is displayed.
  3. When to use it: For long titles in cards or lists.
OverflowCSS property controlling content that exceeds its container's bounds
11. Visual effects and special features — intermediate
  1. What it is: Overflow is a CSS property controlling how content exceeding its container's dimensions (in height or width) should be handled.
  2. What it's for: It manages content that goes beyond its container's bounds.
  3. When to use it: When you need scrollable content areas in fixed layouts.
Clip-pathCSS property for creating complex shapes by clipping an element
11. Visual effects and special features — advanced
  1. What it is: Clip-path is a CSS property that creates a clipping region defining which part of an element should be visible.
  2. What it's for: It creates complex shapes by clipping an element.
  3. When to use it: When you need buttons and UI elements with non-rectangular shapes.
FilterCSS property for applying visual effects to elements
11. Visual effects and special features — advanced
  1. What it is: The CSS filter property applies graphical effects such as blurring or colour shifting to an element.
  2. What it's for: It applies visual effects such as blur, contrast or saturation.
  3. When to use it: To improve or alter the appearance of images and components.
Backdrop-filterCSS property for applying visual effects to the area behind an element
11. Visual effects and special features — advanced
  1. What it is: Backdrop-filter is a CSS property that lets you apply graphical effects to the area behind an element, rather than to the element itself.
  2. What it's for: It applies visual effects to the background visible behind an element.
  3. When to use it: To create semi-transparent overlays, modals or frosted-glass panels.
MaskCSS property for hiding parts of an element using images or shapes
11. Visual effects and special features — advanced
  1. What it is: The CSS mask property lets you hide parts of an element by applying a mask, which may be an image, a gradient or an SVG shape.
  2. What it's for: It hides parts of an element using images or shapes.
  3. When to use it: When you need fade effects on images or text.
CSS HoudiniA set of low-level APIs for extending what CSS can do
12. CSS APIs and integration — advanced
  1. What it is: CSS Houdini is a set of low-level APIs giving developers access to the browser's CSS rendering engine, letting them create new CSS features without...
  2. What it's for: It extends what CSS can do with custom features.
  3. When to use it: When you need to extend CSS's capabilities.
CSS-in-JSAn approach to writing CSS directly in JavaScript
12. CSS APIs and integration — advanced
  1. What it is: CSS-in-JS is an approach to styling web applications that involves writing CSS directly inside the JavaScript code.
  2. What it's for: It writes CSS directly in JavaScript.
  3. When to use it: When you need to write CSS directly in JavaScript.
CSS ModulesAn approach to writing locally scoped CSS in modular applications
12. CSS APIs and integration — advanced
  1. What it is: CSS Modules is a styling technique that lets you write CSS with local scope by default.
  2. What it's for: It writes locally scoped CSS in modular applications.
  3. When to use it: When you need to write locally scoped CSS in modular applications.