HTML and CSS Journey Hangman

The 49 key terms

1rendering

Rendering is when the browser reads the HTML it received and paints it into the visible page shown on screen.

2HTML

The language that defines the structure and content of a webpage using tags and elements, not appearance.

4<!DOCTYPE html>

The declaration that must appear on the very first line of every HTML file, telling the browser the document uses modern HTML.

5<title>

An HTML element placed inside <head> that sets the text shown in the browser tab. Its content is not displayed on the page.

6<meta>

A self-closing HTML element placed in <head> that provides metadata about the page, such as character encoding or viewport settings.

12<strong>

An inline HTML element that marks text as important. Browsers display it bold. Use it when the content has semantic importance, not just for visual styling.

13attribute

Extra information added to an HTML opening tag as a name="value" pair, such as class="header" or href="page.html".

15class

An HTML attribute that assigns CSS class names to an element. The same class can be reused on many elements for shared styling.

16href

An attribute on the <a> element that specifies the URL destination of the hyperlink. Without href, the link has no destination to navigate to.

17alt

An attribute on <img> that provides a text description of the image, shown when the image fails to load and read aloud by screen readers for accessibility.

20<div>

A generic block-level container element with no built-in styling. Used to group content so CSS can target and style sections of a page.

21<span>

A generic inline container with no built-in styling. Used to wrap part of a text flow so CSS can target and style that portion of the text.

22<main>

The HTML5 semantic element that wraps the unique primary content of a page. There should be only one <main> per page.

23<article>

A semantic HTML element for self-contained content that could stand alone, such as a blog post, news story, or forum entry.

25<tbody>

The HTML element that groups the main data rows of a table. It sits inside <table> alongside <thead> and <caption>, wrapping the <tr> rows that contain <td> cells.

26action

The <form> attribute that specifies the URL where the form data is sent when the user submits. Without it, data is sent to the current page URL.

27name

The <input> attribute that identifies the field's value when the form is submitted. Without name, the input value is not sent to the server.

28type

The <input> attribute that specifies what kind of data field is created. Different values produce text boxes, password fields, number steppers, checkboxes, and more.

29for

The <label> attribute that links the label to a specific input. Its value must exactly match the id of the target input element.

30<button>

An HTML element that creates a clickable button. The type attribute controls its behaviour: submit, reset, or button.

31<textarea>

An HTML element that creates a multi-line text input. Unlike <input>, it requires opening and closing tags. Default content goes between them.

32<option>

An HTML element placed inside <select> to provide one choice in a dropdown. Its value attribute is sent when the form submits; its text content is what the user sees.

33<link>

A self-closing HTML element placed in <head> that connects an external CSS file. Its rel attribute must be "stylesheet" and href provides the file path.

35.classname

A CSS selector that targets every element whose class attribute matches classname, written with a leading dot

37div p

A space combinator like 'div p' targets every p inside a div. Combinators (space, >, +, ~) select by relationship; a comma groups selectors so several share one rule.

38pseudo-class

A keyword added after a selector with a colon that targets an element based on its state or position, e.g. :hover or :focus.

39specificity

A score that determines which CSS rule wins when multiple rules target the same element; higher score beats lower

40#rrggbb

A CSS hex colour code. Six hexadecimal digits (0–9 and A–F) define red, green and blue channels. Shorthand: #rgb uses one digit per channel.

41font-family

A CSS property that sets the typeface for text, accepting a prioritised list of font names with a generic fallback such as serif or sans-serif

42rem

A CSS relative unit. 1rem equals the root element's (html) font size. Unlike em, rem is not affected by nesting — it is consistent throughout the page.

43box model

Every HTML element is a box with four layers: content, padding, border, and margin. These layers control the element's size and spacing.

44padding

A CSS property that adds space inside an element's border, between the content area and the border. Unlike margin, padding is inside the element.

45border

A CSS shorthand property that sets a visible line around an element by specifying width, style, and color in one declaration, e.g. border: 2px solid black

46margin

A CSS property that adds space outside an element's border, between it and surrounding elements. Unlike padding, margin is outside the element's background.

47max-width

A CSS property that sets the maximum width an element is allowed to reach. The element can be smaller but never wider. Useful for responsive layouts.

48box-sizing

Controls whether width and height include padding and border. border-box includes them; content-box (the default) measures content only.

49display

A CSS property that controls how an element participates in layout. Common values: block, inline, inline-block, none and flex.

50position

A CSS property that sets how an element is positioned. Values: static (default), relative, absolute, fixed or sticky. Offset properties (top, right, bottom, left) take effect on non-static elements.

51display: flex

Turns an element into a flex container. Its direct children become flex items that can be arranged, aligned and spaced using flex properties.

52align-items

A CSS flexbox property on the container that aligns all flex items along the cross axis (perpendicular to flex-direction). Values: stretch, center, flex-start, flex-end.

53flex-basis

Sets the initial main size of a flex item before free space is distributed according to flex factors.

54display: grid

Defines an element as a grid container and establishes a new grid formatting context for its direct children.

55grid-column

Shorthand property that specifies a grid item's size and location within the grid columns by defining its start and end lines.

56background

Shorthand property to set all background style properties like color, image, position, and repeat in a single declaration.

57border-radius

A CSS property that rounds the corners of an element's outer border edge.

58@media

A CSS rule used to apply different styles for different media types or screen sizes.

59transition

A CSS shorthand property used to control the animation speed when changing CSS properties.

60transform

A CSS property that lets you visually modify elements by rotating, scaling, skewing, or translating them.

61var()

A CSS function used to insert the value of a custom property (variable) into other CSS declarations.