CMP-4011A: Website Planning, Rendering HTML & CSS

Vocabulary flashcards covering the core concepts of website planning, architecture, HTML rendering, and CSS layout models from Week 2 of CMP-4011A.

Website Blueprint

A graphical representation of all the different parts and structural components of a website.

Site Map

A diagram describing the architecture and hierarchical structure of the pages on a website, accounting for every necessary piece of information.

Wireframe

A simple layout sketch illustrating page elements such as the logo, navigation, content, and footer without specifying visual styling like colours, images, or font choices.

Mood Board

A document featuring a collage of images, text, colour palettes, typography, shapes, and patterns that defines the overall mood, feel, and theme of a website design.

Cascading Style Sheets (CSS)

A stylesheet language used to render and control the presentation and layout of HTML and XML documents.

CSS Rule

A building block of a stylesheet consisting of a selector and a declaration block enclosed in curly braces ($\{\}$).

Selector

The component of a CSS rule that identifies which HTML element(s) to style, setting the scope of control for the declaration block.

Type Selector

A CSS selector that targets elements directly by their HTML tag name, such as $h1$, $p$, or $body$.

Contextual Selector

A selector that applies a CSS rule to an element within the context of a container or parent element, such as $ol\;ol$ to target nested lists.

Class Selector

A selector identified by a dot prefix ($.$) followed by the class name that can style multiple elements sharing the same class attribute.

ID Selector

A selector denoted by a hash prefix ($\#$) followed by the ID name that targets a single unique element on a webpage.

Universal Selector

A selector represented by an asterisk ($\ast$) that matches and applies styles to all elements within a document.

Descendant Selector

A selector pattern that selects elements based on their hierarchical relationship to other elements (such as child $>$ or descendant whitespace combinations).

CSS Box Model

The layout model in CSS that represents every HTML element as a rectangular box comprising content, padding, border, and margin.

Padding

The space located between an element's inner content and its outer border.

Border

The decorative or structural line drawn around each edge of an element, controlled by width, style, and colour properties.

Margin

The clear spacing outside an element's border that separates it from adjacent elements.

Block-Level Element

An element that starts on a new line and defaults to $100\%$ width, occupying the entire horizontal space available (e.g., $<p>$, $<h1>$, $<section>$).

Inline-Level Element

An element that flows within the text line without starting on a new line and cannot have its height expanded via vertical padding or margins (e.g., $<a>$, $<img>$, $<strong>$).

Display Property

A CSS property specifying how an element is rendered and permitting conversion between inline, block, inline-block, flex, or none.

Normal Flow

The default browser layout mode where block-level elements stack vertically beneath each other and inline elements flow horizontally from left to right.

Float Property

A positioning property that pushes an element to the left or right of its container, allowing surrounding content to wrap around it.

Clear Property

A CSS property used to prevent elements from wrapping around previously floated elements (e.g., $clear: right;$).

Relative Positioning

A positioning scheme that places an element according to normal flow and then offsets it by top, bottom, left, or right values relative to where it normally sits.

Absolute Positioning

A positioning scheme that removes an element from normal flow, positioning it relative to the edges of its closest positioned containing block.

Fixed Positioning

A specialized form of absolute positioning where the containing block is the browser viewport, keeping the element stationary when scrolling.

z-index

A CSS property specifying the stacking order of overlapping elements, where elements with higher values appear stacked in front of elements with lower values.

CSS Pseudo-class

A keyword added to a selector specifying a special state of the targeted element, such as $:hover$ when the cursor moves over it.