liveBookmanning.com

What you will learn in CSS in Depth, Second Edition

by Keith J. Grant
Foreword by Chris Coyier

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• media queryAn @media query is a CSS conditional rule that applies styles when a media condition matches.
• emThe CSS em unit represents a length relative to a relevant font size, with font-size values based on the inherited font size and other properties based on the current element’s font size.
• moduleA module is a reusable, relatively small unit of page structure and styling that is independent of its surrounding page context.
• grid itemA grid item is an element placed into a CSS Grid layout and assigned to one or more grid areas.
• CSS variableA CSS custom property is an author-defined CSS property whose name begins with two hyphens and whose value can be substituted with the var() function.
• transitionThe CSS transition property is a shorthand property for specifying animated interpolation, its duration, timing function, and delay.
• color scaleA CSS-generated image in which colors transition across a region according to specified directions and color stops.
• CSS transform propertyA 3D transform is a geometric transformation that changes an element's position or orientation along the x, y, and z dimensions.
• remThe CSS rem unit is a relative length unit whose value is based on the computed font size of the root element.
• gamutA gamut is the range of colors that a color space, display, or other device can represent or reproduce.
• flex itemA flex item is a child of a flex container that participates in flexible one-dimensional layout.
• cascadeThe CSS cascade is the process that selects a property value from competing declarations according to their applicability, origin, importance, specificity, and source order.
• specificityA numeric representation of a selector's counts of IDs, classes, and tags, ordered from highest to lowest priority.
• grid trackA grid track is the space between two adjacent grid lines in a CSS grid, forming a row or column.
• grid containerA grid container is an element whose display mode establishes a CSS Grid formatting context for its child elements.
• relative valueA relative CSS unit specifies a size in relation to a font size, viewport dimension, or another reference size rather than as a fixed absolute measure.
• flex containerA flex container is an element whose children participate in layout using the CSS flexible box formatting context.
• gridA CSS layout system that arranges elements in rows and columns using a two-dimensional grid.
• CSS scopeCSS scope is the @scope language feature that limits which elements a set of style rules can match within a defined region of a document.
• modular cssModular CSS is an approach to organizing styles into reusable, relatively independent modules rather than applying one undifferentiated set of global rules.
• web fontA web font is a font made available to a web page through font resources that can be downloaded or selected locally by the browser.
• line-height propertyThe line-height property specifies the height of a line box or the distance between lines of text.
• color spaceA color space is a coordinate system that represents colors with defined component dimensions and ranges.
• cascade layerA nested cascade layer is a cascade layer defined within another cascade layer and ordered relative to its sibling layers.
• absolute positioningAbsolute positioning removes an element from normal flow and positions it relative to a containing block, typically established by a positioned ancestor.
• breakpointA responsive-design breakpoint is a viewport or container condition at which styles switch between predefined layout or presentation configurations.
• @containerA CSS container size query is a conditional query that evaluates the size of an explicitly defined ancestor query container.
• timing functionA CSS timing function curve represents how the rate of change progresses over the duration of a transition or animation.
• OKLCHOKLCH is a perceptual cylindrical color model whose coordinates represent lightness, chroma, and hue.
• sRGBThe sRGB gamut is the range of colors representable within the sRGB color space.
• margin propertyThe CSS margin property sets the outer spacing around an element, with physical sides including top, bottom, left, and right margins.
• polar color spaceA polar color space represents color using an angular hue coordinate and radial or axial components such as chroma and lightness.
• !importantAn important declaration is a CSS declaration marked with the !important flag, giving it elevated cascade priority.
• modifier classA modifier class is a CSS class that represents a variation of a component or changes its appearance or behavior.
• grid areaA named grid area is a CSS Grid region assigned an author-defined name for referring to the region in layout declarations.
• mobile-first layoutA mobile-first approach is a responsive design strategy that establishes the layout and styles for mobile devices before adding adaptations for larger screens.
• CSSCSS is a stylesheet language for describing the presentation of structured documents such as HTML pages.
• declarationA CSS declaration is a property-value pair that specifies one styling instruction.
• collapsing marginMargin collapsing is the CSS layout behavior in which adjacent top and bottom margins combine into a single margin whose size is determined by the largest applicable margin.
• fallbackFallback is the font-display value that permits a brief invisible-text period, then uses the fallback font until the web font loads.
• relative positioningRelative positioning is a CSS positioning mode that keeps an element in normal flow while allowing offsets and establishing a containing block for positioned descendants.
• hexadecimal color notationHex color notation is a CSS color notation that encodes color components using hexadecimal digits, optionally including an alpha component.
• brightnessLuminosity is the perceived lightness or brightness component of a color.
• block-level elementA block-level element generates block-level content that starts on its own line and normally fills the available width of its container.
• fixed positioningFixed positioning is a CSS positioning mode that removes an element from normal flow and positions it relative to the viewport or a containing block established for fixed positioning.
• translate functionThe CSS translate property applies independent positional displacement to an element along one or more axes.
• paddingThe CSS shorthand property that specifies the space between an element's content and its border.
• CSS nestingCSS nesting is a language feature that allows a style rule to contain nested selectors and declarations representing related selector structures.
• contrastContrast is the visual difference between colors or other visual properties that makes adjacent content distinguishable.
• grid lineA named grid line is a CSS Grid line assigned one or more author-defined names for referring to grid positions.
• chromaChroma is a color-space component representing the perceived colorfulness or distance from a neutral axis.
• hueHue is a color-space component representing a dominant color family, commonly expressed as an angle around a color wheel.
• viewport unitThe CSS vw unit represents one percent of the viewport width.
• BEMBlock-Element-Modifier is the expanded name of the BEM CSS naming methodology.
• scaleA scale transform changes an element's rendered dimensions along one or more axes without changing its layout dimensions.
• flexboxFlex is a CSS display value that makes an element a flex container for its children.
• opacityThe CSS opacity property specifies the compositing opacity of an element and its contents.
• font-size propertyThe CSS font-size property specifies the size of an element's text.
• normal flowNormal flow is the CSS layout model that positions elements according to their order and formatting contexts without out-of-flow positioning.
• container style queryThe CSS style() function expresses a container-query condition based on the computed value of a custom property on the query container.
• scoping limitAn inner scoping limit is a boundary in a scoped CSS rule that prevents the rule from applying within descendant scopes.
• cross axisThe cross axis is the layout direction perpendicular to a flex container's main axis.
• OklabA perceptual color space designed to represent lightness and color components more uniformly than many device-oriented color spaces.
• rgb() functionThe CSS rgb() color function specifies a color using red, green, and blue components in the sRGB color space.
• saturationSaturation is a color attribute describing the intensity or amount of chromatic color relative to gray.
• wide gamut color spaceA wide gamut color space represents a range of colors broader than the standard sRGB gamut.
• color pickerA color picker is an interactive tool for selecting, inspecting, and converting colors through controls such as swatches, sliders, and text inputs.
• descendant selectorA descendant selector is a CSS selector that matches an element occurring anywhere inside an ancestor matched by another selector.
• keyframes at-ruleA CSS keyframe is a stage in an animation timeline containing declarations for the animated properties at a specified progress point.
• grid-template-columnsThe CSS grid-template-columns property defines the sizes and optional names of a grid container's column tracks and grid lines.
• container typeThe CSS container-type property establishes an element as a query container and specifies the dimensions or characteristics it exposes to container queries.
• CSS source orderSource order is the relative position of declarations in stylesheets or included stylesheets, which breaks ties when other cascade criteria are equal.
• Display P3Display P3 is a standardized color gamut with a wider range of colors than sRGB, commonly supported by modern displays.
• variable fontA variable font is a font file containing one or more adjustable design axes, such as weight or width, within a single font resource.
• inheritanceAn inherited property is a CSS property whose value is passed from an element to its descendants when they do not have their own cascaded value.
• pattern libraryA pattern library is a separate collection of documentation pages that showcases reusable interface patterns and their implementation.
• main axisThe main axis is the primary direction in which a flex container lays out and distributes its flex items.
• box-shadowThe CSS box-shadow property adds one or more shadows around an element's box.
• CSS selectorA CSS selector is a pattern that identifies the elements to which a group of declarations applies.
• letter-spacingTracking is the typographic adjustment of uniform spacing between characters across a range of text.
• fontA font is a specific typeface variant defined by characteristics such as weight, style, or width.
• blending modeA blend mode is a compositing operation that determines how foreground colors combine with colors in an underlying layer.
• height propertyThe height property specifies the vertical extent of an element's content box or other applicable box.
• animationAnimation is a time-varying visual change in a user interface that can communicate information or significance to the user.
• color-mix()color-mix() is a CSS color function that computes an intermediate color by interpolating two colors in a specified color space.
• align-itemsThe CSS align-items property specifies the default cross-axis alignment of items within a flex or grid container.
• progressive enhancementA web development technique that introduces newer capabilities while allowing unsupported browsers to ignore them without preventing the rest of the stylesheet from applying.
• transition delayA transition delay specifies how long to wait after a property value changes before starting its transition.
• containerA container element in container queries is a specific ancestor element whose size or styles provide the reference for querying a descendant.
• @font-faceThe CSS @font-face at-rule defines a downloadable font resource and the descriptors that associate it with a font family and style.
• cascaded valueA cascaded value is the property value selected by the CSS cascade for a particular element and property.
• rotationA rotation is a geometric transformation that turns an object around a fixed point or axis.
• complementary color relationshipA complementary color is a color positioned opposite another color on a color wheel or comparable hue model.
• relative color syntaxRelative color syntax is CSS color notation that derives a new color by exposing and manipulating components of an origin color.
• responsive web designThe responsive web is an approach to web presentation in which layouts and dimensions adapt to varying devices, viewports, and user settings.
• stacking contextA stacking context is an isolated group of elements whose painting order is resolved together within the surrounding stacking order.
• inset propertyThe CSS inset property is a shorthand property that sets an element's top, right, bottom, and left offsets.
• shorthand propertyA CSS property syntax that sets multiple related properties, including omitted subvalues that receive their initial values.
• color interpolationA color interpolation method specifies how intermediate colors are calculated between color stops.
• grid-template-rowsThe CSS grid-template-rows property defines the sizes and structure of a grid's rows.
• type selectorA CSS selector that matches elements by their element or tag name.
• justify-contentThe CSS justify-content property distributes grid tracks or flex items along the container's inline or main axis when free space is available.
• circle()The CSS circle() basic-shape function defines a circular clipping or wrapping shape using a radius and optionally a position.
• z-indexThe z-index property specifies the stacking order of a positioned or stacking-context element.
• gapThe CSS gap property specifies the spacing between rows and columns in layout containers such as flex and grid containers.
• containing blockA CSS containing block is the reference rectangle used to resolve an element's dimensions and positions.
• clip-pathA clipping path is a mathematically defined region that determines which portions of an element are rendered.
• flex-growThe CSS flex-grow property specifies a nonnegative factor that determines how a flex item receives remaining space in its flex container.
• stylesheet originStylesheet origin is the cascade criterion representing the source category from which a style declaration comes, such as author or browser defaults.
• flex-basisThe CSS flex-basis property specifies a flex item’s initial size along the flex container’s main axis before free-space distribution.
• BEM elementA BEM element is a child or descendant part of a block identified by a class combining the block name with a double underscore.
• @propertyThe CSS @property at-rule registers a custom property by defining its syntax, inheritance behavior, and initial value.
• color paletteA color palette is a coordinated set of color values selected for use across an interface or visual design.
• layoutA page layout is the overall spatial arrangement of a web page's major sections and content regions.
• transition-durationA CSS transition setting that specifies how long an animated property change takes to complete.
• context-dependent selectorA context-dependent selector is a CSS selector whose matching or styling intent depends on an element's ancestor or location in the document structure.
• pixelA CSS pixel unit represents a length in CSS pixels, an abstract unit used for rendering dimensions.
• logical propertyA CSS logical property expresses a dimension or position relative to writing direction rather than a fixed physical side or axis.
• prefers-reduced-motionThe prefers-reduced-motion media feature indicates whether a user has requested reduced nonessential motion.
• Google FontsGoogle Fonts is an online service that provides hosted web fonts and CSS code for including them in web pages.
• line wrappingLine wrapping is the flow behavior in which text or an inline-level element moves onto a subsequent line when it exceeds the available inline space.
• maskMasking is a CSS visual technique that selectively reveals or hides portions of an element using a mask image.
• inline-sizeThe CSS inline-size property specifies an element's size along its inline axis, adapting to the writing mode.
• :is()The CSS :is() pseudo-class matches an element if it matches at least one selector in its argument list and contributes the specificity of its most specific argument.
• shape-outsideThe CSS shape-outside property defines the shape around which inline content may flow, typically for a floated element.
• repeat()The CSS repeat() function represents repeated grid track sizes or patterns in a grid-template declaration.
• fraction unitThe CSS fr unit represents a fraction of the leftover space in a grid container after non-flexible track sizes are accounted for.
• polygon()The CSS polygon() basic-shape function defines a clipping or wrapping shape from a sequence of points.
• rectangular color spaceA rectangular color space represents color components as independent coordinates on rectangular axes rather than as angular coordinates.
• auto-fitAuto-fill and auto-fit are CSS Grid track-repetition keywords that determine how many tracks are generated to fit available space.
• align-contentThe CSS align-content property distributes grid tracks or flex lines along the container's block or cross axis when free space is available.
• css-first developmentCSS-first development is a workflow in which styles are developed before HTML consumes them, while HTML authors control adoption and upgrades.
• hoverHover is the pointer-over state represented by the CSS :hover pseudo-class.
• fallback fontA fallback font is a substitute typeface rendered when the preferred font is unavailable or has not finished loading.
• overflow propertyThe CSS overflow property specifies how content that exceeds an element's box is displayed, clipped, or made scrollable.
• state classA state class is a CSS class convention whose presence represents the current state of a component and can trigger corresponding styles.
• root elementThe root element is the top-level element of a document tree that contains the document's other elements.
• grid-columnThe CSS grid-column shorthand property specifies the start and end grid lines that define an item's column placement.
• inline containerAn inline element generates inline-level content that flows with surrounding text and wraps at the edge of its containing block.
• box-sizingThe CSS box-sizing property determines how an element's declared width and height relate to its content, padding, and border boxes.
• color stopA CSS color stop is a color specification, optionally at a position, that defines part of a gradient transition.
• cubic-bezier()The CSS cubic-bezier() function defines a timing function from the coordinates of two control points.
• viewportA viewport is the framed area of a browser window in which a web page is visible, excluding browser interface controls.
• spacingDesign spacing is the arrangement of empty space between and around interface elements.
• class selectorA CSS class selector matches elements whose class attribute contains a specified class name.
• ID selectorA CSS selector that matches an element by its ID attribute.
• fluid layoutA fluid layout is a web layout whose dimensions adapt continuously to the available viewport size rather than relying on fixed dimensions.
• computed valueA CSS computed value is the value produced after specified values, inheritance, and relative-unit resolution have been processed for an element.
• positioned elementA positioned element is an element whose position property establishes a positioning mode that allows offset and stacking behavior beyond normal flow.
• unitless numberA unitless number is a CSS numeric value written without a unit and interpreted according to the property that receives it.
• media featureA CSS media feature is a condition describing an aspect of the output environment, such as viewport width, resolution, orientation, or pointer precision.
• media query range syntaxMedia query range syntax is CSS notation that expresses lower and upper bounds with comparison operators around a media feature.
• media typeA CSS media type identifies the broad output medium, such as a screen or printed page, for conditional styling.
• print stylesPrint styles are CSS rules that define how a web document is formatted for printed output.
• dropdownA dropdown is an interface control that reveals a list or panel of selectable options when activated.
• float propertyA CSS layout mechanism that removes an element from normal flow and positions it toward one side so surrounding content can flow around it.
• perspectiveThe CSS perspective property establishes a shared perspective projection for transformed descendants of an element.
• implicit gridImplicit grid placement is CSS Grid's automatic placement of items into tracks that are created or selected beyond the explicitly defined grid.
• filterThe CSS filter property applies graphical effects such as blurring, color adjustment, opacity changes, or shadows to an element.
• blur()The CSS blur() filter function applies a Gaussian blur effect to rendered content or a backdrop, with strength specified by a length parameter.
• Shadow DOMShadow DOM is a web platform mechanism that creates an isolated DOM subtree with encapsulated structure and styles.
• background-positionThe CSS background-position property specifies the position of a background image within an element.
• mask-sizeThe CSS mask-size property specifies the dimensions of a mask image using lengths, percentages, or sizing keywords.
• cellA grid cell is a single grid space formed by the overlap of one horizontal and one vertical grid track.
• shrinking font problemThe shrinking font problem is the progressive reduction of text size caused by compounded em-based font sizes on nested elements.
• shrinkThe CSS flex-shrink property specifies a flex item's shrink factor when the flex items' initial sizes exceed the available space in the flex container.
• grid item placement algorithmAuto placement is CSS Grid’s behavior of positioning items automatically in the first available grid space where they fit.
• text-shadowThe CSS text-shadow property adds one or more shadows to text content.
• variant classA variant class is a CSS class that represents a named variation of a component's appearance or behavior.
• active pseudo-classThe :active pseudo-class selects an element while it is being activated by the user.
• style attributeThe style attribute is an HTML attribute whose value contains CSS declarations applied directly to its element.
• compound selectorA compound selector is a selector formed by combining multiple simple selectors without a combinator so that one element must match all of them.
• align-selfThe CSS align-self property specifies the block-axis or cross-axis alignment of an individual item within its layout container.
• browser developer toolsBrowser developer tools are built-in utilities for inspecting and debugging a webpage's structure, styles, and runtime behavior.
• explicit gridAn explicit grid is the portion of a CSS Grid whose rows and columns are defined by grid-template properties.
• subgridSubgrid is a CSS Grid feature that lets a nested grid use the grid lines of its parent grid for its rows, columns, or both.
• flexThe CSS flex property is a shorthand that controls a flex item's growth, shrinkage, and base size along the flex container's main axis.
• borderThe CSS shorthand property that specifies an element's border width, style, and color.
• system fontA system font is a typeface installed on the user's operating system and available for local text rendering.
• hiddenThe hidden value of the CSS visibility property suppresses an element's visible rendering while preserving its space in document flow.
• buttonAn HTML button is an interactive form control that can be activated to perform an action.
• inline-blockInline-block is a CSS display value that makes an element participate as an inline-level box while retaining block-container behavior.
• foitFOIT, or Flash of Invisible Text, is the visual effect in which text is rendered invisibly until the intended web font loads.
• foutFOUT, or Flash of Unstyled Text, is the visual effect in which fallback-font text appears before the intended web font loads and the page then shifts when the intended font renders.
• compositeComposite is the rendering stage that combines painted layers into the final displayed image in stacking order.
• GPGPUGPU acceleration is rendering computation performed by a graphics processing unit instead of primarily by the central processor.
• paintPaint is the rendering stage that draws visual content such as text, images, borders, and shadows into memory.
• paint layerA paint layer is an independently rendered layer containing painted portions of a page.
• reflowReflow is recomputation of document layout after a change affects the size or position of elements.
• renderingRendering is the process of converting computed document styles and content into pixels displayed on a screen.
• will-changeThe CSS will-change property provides advance information about properties expected to change on an element so the browser can optimize rendering.
• scope proximityScope proximity is the cascade criterion based on how close a scoped style is to the element it targets in the DOM.
• calc()The CSS calc() function computes a value from arithmetic involving CSS values and units.
• rotateX functionThe CSS rotateX() transform function rotates an element around the horizontal x-axis.
• CSS box modelThe CSS box model represents each element as a box composed of content, padding, border, and margin areas.
• transition-propertyThe CSS transition-property property specifies the CSS properties whose value changes are animated.
• root pseudo-selectorThe CSS :root pseudo-class selector matches the document's root element.
• hamburger menuA hamburger menu is a compact navigation pattern that represents a menu with an icon and reveals its items on activation.
• text-transformThe text-transform property controls the capitalization and letter-case transformation of text.
• border-radiusThe CSS border-radius property specifies the radii of an element's rounded corners.
• Bézier curveA Bézier curve is a parameterized curve whose shape is determined by control points.
• flex-directionThe CSS flex-direction property specifies the main-axis direction and ordering of flex items in a flex container.
• place-contentThe CSS place-content shorthand property sets the align-content and justify-content properties together.
• font-variation-settingsThe CSS font-variation-settings property provides low-level control over registered and custom variation axes in a variable font.
• variation axisA variation axis is a font-defined dimension specifying an allowable range for a particular characteristic of a variable font.
• auto-fillThe CSS auto-fill keyword makes a repeat() track definition create as many tracks as fit within the available space and specified size constraints.
• flex-flowThe CSS flex-flow property is a shorthand that sets a flex container's flex-direction and flex-wrap properties.
• flex-wrapThe CSS flex-wrap property specifies whether flex items remain on one line or wrap onto additional lines or columns.
• font-displayThe CSS font-display property controls how a browser renders text while a web font is loading and whether it later replaces the fallback font.
• grid-auto-columnsThe CSS grid-auto-columns property specifies the size of implicitly created grid columns.
• grid-auto-rowsThe CSS grid-auto-rows property specifies the size of implicitly created grid rows.
• grid-template propertiesGrid-template properties are CSS properties that define the explicit rows and columns of a grid.
• minmax()The CSS minmax() function defines a range containing a minimum and maximum size for a grid track.
• shape-image-thresholdThe CSS shape-image-threshold property sets the opacity threshold used to determine the boundary of an image-based shape.
• shape-marginThe CSS shape-margin property adds a margin around a shape used for text wrapping.
• radial-gradient functionThe radial-gradient() CSS image function creates a radial gradient with specified colors, shape, size, position, and color space.
• block sizeA CSS block size is an element dimension measured along the block axis of its writing mode.
• writing modeA CSS writing mode determines the directions in which inline content flows and block boxes stack.
• HSL methodThe HSL color space represents colors using hue, saturation, and lightness.
• CSS-in-JSCSS-in-JS is a styling technique that uses JavaScript to define styles and generate or manage CSS class names.
• conditional CSS ruleA conditional CSS construct that applies declarations or rules only when a browser supports a specified feature or condition.
• css resilienceThe fault-tolerant behavior of CSS that allows unsupported declarations or features to be ignored while supported styling continues to apply.
• @supportsA CSS conditional group at-rule that evaluates feature support and conditionally includes its enclosed rules.
• author styleA stylesheet supplied by the document or application author whose declarations participate in the CSS cascade.
• user-agent styleThe rendering defaults supplied by a web browser through its user-agent stylesheet.
• perspective transformA perspective transform is the CSS transform function that applies a specified perspective projection to one element.
• animation propertyThe CSS animation property is a shorthand property for configuring one or more animations on an element.
• spinnerA spinner is a user-interface indicator that visually represents an ongoing operation or wait.
• ellipse()The CSS ellipse() basic-shape function defines an elliptical clipping or wrapping shape using horizontal and vertical radii and optionally a position.
• conic gradientThe CSS conic-gradient() function generates a conic gradient image from color stops and optional angle, position, and color-interpolation parameters.
• background propertyThe CSS background shorthand property sets multiple background-related properties.
• fade inA fade-in transition gradually increases an element's visual opacity as it changes into its visible state.
• navigationA navigation menu is an interface component containing links for moving among sections or destinations.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.