liveBookmanning.com

What you will learn in Tiny CSS Projects

by Michael Gearon,Martine Dowden

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• media queryA media query is a CSS conditional expression that tests media features or output conditions before applying styles.
• flexboxFlexbox is a CSS layout model for aligning and distributing items along a single axis.
• margin propertyA CSS property that sets the space outside an element's border on each side.
• CSS selectorA CSS selector is a pattern that identifies the elements to which a set of style declarations applies.
• paddingA CSS property that sets the space between an element's content and its border on each side.
• display propertyThe CSS display property specifies the layout behavior and box type generated for an element.
• transitionA CSS transition is a gradual interpolation between an element's property values over a specified duration.
• hoverThe CSS :hover pseudo-class matches an element while a pointing device is positioned over it.
• border-radiusThe CSS border-radius property controls the curvature of an element's corners.
• CSSCSS3 is the generation of Cascading Style Sheets specifications that introduced and expanded features through separate modules.
• focus pseudo-classThe CSS :focus pseudo-class matches an element whenever it has focus, regardless of the input method that caused the focus.
• align-itemsThe CSS align-items property controls the alignment of grid or flex items along the relevant cross axis.
• font-size propertyText size is the typographic setting that determines the rendered dimensions of characters.
• pseudo-classA pseudo-class is a CSS selector component that targets elements in a particular state or structural condition.
• max-width propertyThe CSS max-width property sets an upper limit on an element's used width.
• justify-contentThe CSS justify-content property controls how free space is distributed along the main axis of a flex or grid layout.
• CSS GridCSS Grid is the CSS layout system and specification for arranging elements in rows and columns using a two-dimensional grid.
• emThe CSS em unit expresses a length relative to the font size of the relevant element or inherited context.
• background colorThe CSS background-color property specifies the color painted behind an element's content and padding.
• CSS transform propertyThe CSS transform property changes an element's visual geometry without changing its position in normal document flow or the space allocated around it.
• font-family propertyThe CSS font-family property specifies the typeface or ordered list of typefaces used for text.
• CSS variableA CSS custom property is an author-defined property whose value can be stored and reused in CSS through the var() function.
• gapThe CSS gap property is a shorthand property that sets the spacing between rows and columns in a grid or other layout.
• background propertyThe CSS background property is a shorthand property for setting an element's background layers and related background properties.
• widthThe CSS width property specifies the horizontal size of an element's box.
• prefers-reduced-motionThe prefers-reduced-motion media feature reports whether a user has requested reduced motion, allowing CSS to adapt accordingly.
• containerA container is an element that contains and constrains a page's layout content.
• float propertyThe CSS float property positions an element to the left or right of its containing block so surrounding inline content can flow around it.
• database tableA table is a structured HTML presentation of data organized into rows and columns for tabular relationships.
• pseudo-elementA CSS pseudo-element is a selector feature that targets a specific conceptual part of an element.
• SVGSVG is an XML-based standard for describing two-dimensional vector graphics.
• ::first-letter pseudo-elementThe CSS ::first-letter pseudo-element selects the first typographic character of an element's rendered text.
• text-alignThe CSS text-align property specifies the horizontal alignment of inline content within a block container or table cell.
• appearance propertyA CSS appearance property controls the native or platform-specific visual rendering of a user-interface element.
• vendor prefixA vendor-prefixed property is an experimental or nonstandard CSS property identified by a browser-specific prefix.
• animation propertyThe CSS animation property is a shorthand property for configuring an element's animation name, timing, duration, iteration, and related behavior.
• keyframes at-ruleA CSS keyframe is a point in an animation sequence that specifies styles at a particular progress position.
• height propertyThe CSS height property specifies the height of an element's box.
• HTMLHTML is a markup language for structuring content in documents displayed by web browsers.
• accent-colorThe CSS accent-color property specifies the accent color used by supported form controls.
• :focus-visibleThe CSS :focus-visible pseudo-class matches an element when its focus should be indicated to the user, typically during keyboard navigation.
• hypertext linkA link is an interactive reference that navigates to another resource or location when activated.
• focus-within pseudo-classThe focus-within pseudo-class matches an element when it or one of its descendants has focus.
• grid-template-rowsThe CSS grid-template-rows property explicitly defines the number and sizes of rows in a grid.
• absolute positioningAbsolute positioning is a CSS positioning technique that removes an element from normal flow and positions it relative to a containing block established by a positioned ancestor.
• grid-template-columnsThe CSS grid-template-columns property defines the sizes and number of columns in a grid.
• outlineThe CSS outline property draws a line around an element without affecting its layout dimensions or the space occupied by surrounding elements.
• menuA menu is an interface component that presents a set of navigational or actionable links or items.
• shape-outsideThe CSS shape-outside property defines the geometric shape around which inline content may flow beside a floated element.
• animation durationThe CSS animation-duration property specifies the length of time an animation takes to complete one cycle.
• radio buttonA radio button is a form control that lets a user select one option from a group of mutually exclusive choices.
• animation nameThe CSS animation-name property specifies the name of the keyframe definition applied to an element.
• accessibilityWeb accessibility is the design of web content and interfaces so that people with varied abilities and access methods can use them.
• fallbackAn image fallback is an alternative presentation or behavior provided when an image resource fails to load.
• check boxA checkbox is a form control that can be independently selected or cleared to represent a binary or multiple-choice setting.
• remThe CSS rem unit expresses a length relative to the font size of the document's root element.
• invalid pseudo-classThe :invalid pseudo-class targets form controls whose current values fail their applicable HTML constraint validation rules.
• type selectorA type selector is a CSS selector that matches elements by their HTML element name.
• SassSass is a stylesheet preprocessor language that adds authoring features beyond standard CSS.
• drop capA drop cap is an enlarged initial letter that extends down across multiple lines of text at the beginning of a paragraph or section.
• loading indicatorA loading indicator is a visual or textual interface signal that an operation is in progress or awaiting completion.
• specificityCSS specificity is the precedence score used to determine which competing selector-based declarations apply to an element.
• text boxAn HTML input element is a form control that accepts user-entered data, with its behavior determined by its type and attributes.
• :where()The CSS :where() pseudo-class matches any element that matches one of the selectors in its selector list while contributing zero specificity.
• buttonA button is an interactive HTML element that initiates an action when activated.
• overflowOverflow is content that extends beyond the bounds of its containing box or viewport.
• CSS ShapesCSS Shapes is a CSS feature for defining geometric shapes that control how inline content flows around an element.
• CSS ruleA CSS instruction that identifies elements and specifies the styles or effects applied to them.
• linear gradientA linear gradient is a CSS-generated image whose colors transition along a straight line between color stops.
• backface-visibilityThe CSS backface-visibility property controls whether the back face of a transformed element is visible when it faces away from the viewer.
• flipping-over effectA card flip is an interface technique that rotates a bounded component to reveal its opposite side.
• BEMBEM is a component-based CSS architecture that organizes interfaces into blocks, elements, and modifiers.
• Sass @extend at-ruleThe Sass @extend at-rule adds a selector to the selector list of another rule so it shares that rule's declarations.
• opacityThe CSS opacity property controls the transparency of an element and its rendered contents.
• error messageAn error message is user-facing text that explains a validation failure or other problem with an interface action or input.
• viewbox attributeThe SVG viewBox attribute defines the position and dimensions of an SVG graphic's internal coordinate system and maps it to the viewport.
• attr() functionThe CSS attr() function retrieves the value of an element's attribute for use in a CSS property value.
• progress barA progress bar is a user-interface control that visually represents the completion or loading progress of a task.
• variable fontA variable font is a font file that contains one or more adjustable design axes, such as weight or width, within a single font resource.
• nth-of-type pseudo-classThe CSS :nth-of-type pseudo-class selects elements according to their position among sibling elements of the same type.
• outline-offsetThe CSS outline-offset property specifies the distance between an element's outline and its border edge.
• fraction unitThe fr unit is a CSS Grid sizing unit that represents a share of the available space remaining after minimum sizes are applied.
• gridA grid is a network of intersecting lines that divides space into rectangular or square cells.
• aria-describedbyThe aria-describedby attribute identifies elements that provide additional descriptive information for an interface element.
• blur eventA blur event is a browser event fired when an element loses focus.
• exThe CSS ex length unit represents a length relative to the x-height of the element's font.
• dirty classThe dirty class is a CSS class assigned to a form field after the user has navigated away from it.
• :user-invalidThe :user-invalid pseudo-class targets a form control whose invalid value has been exposed after user interaction.
• borderA CSS border is a property or set of properties that defines the line surrounding an element's padding and content.
• animation-iteration-countThe CSS animation-iteration-count property specifies the number of times an animation cycle runs.
• currentColorcurrentcolor is a CSS keyword value that resolves to the element's computed color property value.
• block-level elementA block-level element is an element that participates in block layout and ordinarily occupies the available width of its containing block.
• data attributeA data attribute is a custom HTML attribute whose name begins with data- and whose value stores application-specific information.
• display block valueThe block display value makes an element participate in block layout and ordinarily occupy the available width of its containing block.
• dropdownA select element is an HTML form control that presents a list of options from which a user can make a selection.
• position propertyThe CSS position property specifies how an element is positioned in the document layout.
• not pseudo-classThe CSS :not() pseudo-class matches elements that do not match any selector in its argument list.
• translateY()The CSS translateY function translates an element vertically without changing its normal-flow position.
• colorColor is a visual presentation property that defines the hues and related color values displayed in a web page.
• calc()The CSS calc() function computes a property value from arithmetic expressions involving CSS values and units.
• flex-basisThe CSS flex-basis property specifies the initial main-size contribution of a flex item before space is distributed.
• inline-gridThe inline-grid CSS display value makes an element generate an inline-level grid container.
• scaleY functionThe CSS scaleY() transform function scales an element along its vertical axis.
• cardA card is a self-contained interface component that presents related content within a bounded visual area.
• color paletteThe SMACSS theme category contains styles defining the visual look and feel of a page or project.
• content propertyThe CSS content property specifies generated content for an element or pseudo-element.
• background-clipThe CSS background-clip property specifies the area within which an element's background is painted, including a text value that clips the background to text glyphs.
• box-shadowThe CSS box-shadow property adds one or more shadows around or within an element's box.
• class selectorA class selector is a CSS selector that matches elements having a specified class value.
• inline-blockInline-block is a CSS display value that keeps an element in inline flow while allowing block-like dimensions and spacing.
• min-widthThe min-width media feature tests whether the viewport or output width is at least a specified value.
• inheritinherit is a CSS keyword value that forces a property to take the computed value of the parent element.
• layoutLayout is the spatial arrangement and positioning of content in a web page.
• CSS preprocessorA CSS preprocessor is a tool that extends stylesheet authoring and transforms preprocessor source into CSS.
• background-sizeThe CSS background-size property specifies the dimensions to which an element's background images are rendered.
• relative positioningRelative positioning offsets an element from its normal position while preserving its original space in the document flow.
• @font-face@font-face is a CSS at-rule that defines a font resource and its loading and typographic characteristics.
• WOFFWOFF is a web font file format designed to package compressed font data for delivery and use by web browsers.
• WOFF2WOFF2 is a web font file format that packages font data using the Brotli compression algorithm.
• SVG elementAn SVG element is a structured graphical element in an SVG document that represents or contributes to vector artwork.
• destructive buttonA destructive button is an interface control that performs an action with potentially irreversible or undesirable consequences, such as removing content.
• vertical-align propertyThe CSS vertical-align property controls the vertical alignment of an inline or inline-block element relative to surrounding inline content.
• :is()The CSS :is() pseudo-class matches an element against any selector in a supplied selector list and takes the specificity of the most specific selector in that list.
• viewportA browser viewport is the visible rectangular area through which a web page is rendered.
• universal selectorA CSS selector that matches every element in the document or every descendant within a selected scope.
• interpolationSass interpolation evaluates an expression and inserts its result into generated CSS text, such as selectors, property names, or values.
• filterThe CSS filter property applies graphical effects that modify an element's rendered appearance.
• autoThe CSS auto keyword lets the relevant layout algorithm determine a size from content and available space.
• line-height propertyLine height, also called leading, is the vertical distance allocated to each line of text.
• separation of concernsSeparation of concerns is a software design principle that divides a system into distinct sections with separate purposes.
• description listAn HTML description list is a structure for groups of terms and their associated descriptions, typically marked with dt and dd elements.
• adjacent sibling selectorAn adjacent sibling combinator is a CSS combinator, written as +, that matches an element immediately following another element at the same structural level.
• direct descendant combinatorA child combinator is a CSS combinator, written as >, that matches only the immediate children of a selected element.
• combinatorA CSS combinator expresses a relationship between selectors so that elements can be matched according to their structural relationship.
• descendant selectorA descendant combinator is a CSS combinator, conventionally written as whitespace, that matches elements occurring anywhere within another selected element.
• general sibling combinatorA general sibling combinator is a CSS combinator, written as ~, that matches all later siblings of a selected element.
• checked pseudo-classThe CSS :checked pseudo-class targets selectable form controls, such as checkboxes and radio buttons, when they are checked or selected.
• declarationA CSS declaration consists of a property name, a colon, and a property value specifying one styling instruction.
• Google FontsGoogle Fonts is a hosted catalog and delivery service for open-source fonts used in websites and applications.
• grid-template-areasThe CSS grid-template-areas property defines named grid areas by assigning area names to grid cells in row strings.
• counter-style at-ruleThe CSS @counter-style at-rule defines a custom counter style, including its symbols, numbering system, and formatting.
• ID selectorAn ID selector is a CSS selector that matches the element having a specified ID value.
• place-contentThe CSS place-content property aligns and distributes a grid or flex container's content along its axes.
• cellA grid cell is the rectangular space formed by the intersection of a CSS Grid row and column.
• Sass @each at-ruleThe Sass @each at-rule iterates over items in a list or map and evaluates a block for each item.
• quotes propertyThe CSS quotes property specifies the quotation marks used by generated content for nested quotations.
• scaleThe CSS scale() transform function enlarges or reduces an element along the horizontal and vertical axes.
• user-agent styleDefault styles are the initial presentation rules applied by a browser or operating system when author styles do not override them.
• repeat()The repeat() CSS function represents repeated track definitions in grid-template-columns or grid-template-rows values.
• background-repeat propertyThe CSS background-repeat property controls whether and how a background image is repeated to fill an element's background area.
• font-displayfont-display is an @font-face descriptor that controls how text is rendered while a web font is loading or unavailable.
• relative unitA relative unit is a CSS length unit whose computed size depends on another value, such as the element's font size.
• web-safe fontA web-safe font is a typeface commonly expected to be available across many devices and browsers without web delivery.
• CSS classA class name is an identifier assigned to an HTML element's class attribute for grouping elements and targeting them with CSS.

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.