CSS Review and Design Fundamentals

Flashcards covering the foundational and advanced CSS concepts needed for web design certification, including specificity, layout models, design principles, and responsive units.

CSS

Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements, such as colors, background images, and layouts.

Selector

A pattern used in CSS to identify and target specific HTML elements for styling.

Declaration Block

A part of a CSS rule that applies a set of styles for a given selector or selectors.

meta name="viewport" Element

Provides the browser instructions on how to control page dimensions and scaling on different devices, specifically mobile phones and tablets.

Inline CSS

Styles written directly within an HTML element using the style attribute, though generally avoided due to separation of concerns.

Internal CSS

Styles written within < style > tags in the head section of an HTML document, allowing for specific page styling.

External CSS

Styles written in a separate $.css$ file and linked to the HTML document using the link element.

width Property

Specifies the width of an element, defaulting to $auto$ which allows the browser to determine width based on content and parent.

Descendant Combinator ( )

Indicated by a single space between selectors, it targets elements that are descendants of a specified parent element.

Child Combinator ( > )

Selects elements that are direct children of a specified parent element.

Next-sibling Combinator ( + )

Selects an element that immediately follows a specified sibling element.

Subsequent-sibling Combinator ( ~ )

Selects all siblings of a specified element that come after it.

Inline Level Elements

Elements that only take up as much width as they need, do not start on a new line, and flow within content; examples include $span$, anchor ($a$), and $img$.

Block Level Elements

Elements that take up the full available width by default and stretch across their container; examples include $div$, $p$, and $section$.

Inline-Block Level Elements

Elements that behave like inline elements but can have a width and height set like block-level elements.

margin Property

Applied to space outside the element, between the element's border and surrounding elements.

padding Property

Applied to space inside the element, between the content and its border.

Inline CSS Specificity

The highest level of specificity with a value of $(1, 0, 0, 0)$; it overrides internal or external CSS.

Universal Selector ( * )

Matches any element in the document and has the lowest specificity value of $(0, 0, 0, 0)$; it contributes $0$ to all parts of the specificity value.

Type Selectors

Target elements based on their tag name with a specificity value of $(0, 0, 0, 1)$.

Class Selectors

Defined by a period $.$ followed by the class name, with a specificity value of $(0, 1, 0)$.

ID Selectors

Defined by a hash symbol # followed by the ID name, with a specificity value of $(0, 1, 0, 0)$.

!important keyword

Used to give a style rule the highest priority, forcing the browser to apply it regardless of specificity.

Cascade Algorithm

An algorithm used to decide which CSS rules to apply when multiple styles target the same element.

CSS Inheritance

The process by which styles are passed down from parent elements to their children.

Layout

How visual elements like text, images, and white space are arranged on a page to communicate a message.

Hierarchy

Establishes the order of importance of elements in a design to ensure the most important information is noticed first.

Contrast

Creating clear distinctions between elements through variations in color, size, shape, or texture.

UX (User Experience)

How users feel when using a product; a well-designed experience is intuitive, efficient, accessible, and enjoyable.

Progressive Enhancement

A design approach ensuring all users can access essential content regardless of browser or device.

Progressive Disclosure

A design pattern that hides content until it is relevant to the user's current activity to reduce cognitive load.

px (Pixels)

An absolute unit where $1px$ is always equal to $1/96t{h}$ of an inch.

cm (Centimeters)

An absolute unit equal to $25.2/64$ of an inch.

em Unit

A relative unit proportional to the font size of the element; if used for font-size, it is relative to the parent element.

rem Unit

A relative unit proportional to the font size of the root element ($html$).

vh Unit

Stands for 'viewport height'; $1vh$ is equal to $1$ percent of the viewport's height.

vw Unit

Stands for 'viewport width'; $1vw$ is equal to $1$ percent of the viewport's width.

Pseudo-classes

Special CSS keywords used to select an element based on its specific state or position.

:focus-within Pseudo-class

Applies styles to an element when it or any of its descendants have focus.

Functional Pseudo-classes

Pseudo-classes that accept arguments to select elements based on complex relationships, such as $:is()$, $:where()$, and $:has()$.

::marker Pseudo-element

Allows for the styling of the marker (bullet or numbering) of list items.

Complementary Color Schemes

Colors located on opposite ends of the color wheel that create high contrast.

Hexadecimal

A six-character string representing colors in the RGB model using base-$16$ numbering ($0$ to $9$ and $A$ to $F$).

The Box Model

Concept where every element is surrounded by four components: the content area, padding, border, and margin.

Margin Collapse

Behavior where vertical margins of adjacent elements overlap, resulting in a single margin equal to the larger of the two.

border-box Value

A box-sizing value where width and height include the content area, padding, and border, but not the margin.

CSS Flexbox

A one-dimensional layout model used for arranging elements in rows and columns.

justify-content Property

Aligns child elements along the main axis of a flex container.

Typeface

The overall design and style of a set of characters, serving as a blueprint for a family of fonts.

Kerning

Adjustment of space between specific pairs of characters to improve readability.

Leading

The vertical space between lines of text measured from baseline to baseline.

@font-face At-rule

Allows the definition of a custom font by specifying font resources, formats, weight, and style.

woff and woff2

Stands for 'Web Open Font Format'; the primary difference between the two is the data compression algorithm used.

Accessibility Tree

A structure used by assistive technologies like screen readers to interpret and interact with webpage content.

aria-hidden attribute

Used to hide an element from assistive technology like screen readers while remaining visible to sighted users.

Sticky Positioning

A hybrid between relative and fixed positioning where an element stays in the document flow until it scrolls past a point and 'sticks' to the viewport.

Media Breakpoints (Smartphones)

Design adjustments for small devices targeting screens up to $640px$.

CSS Grid

A two-dimensional layout system used for creating complex layouts with rows and columns.

fr (Fractional) Unit

A unit representing a fraction of the available space within a grid container.

@keyframes Rule

Defines the stages and styles of a CSS animation at various points during its duration.