HTML & CSS Word Scramble: Advanced CSS & Layout (Modules 53–63)
Name:
Date:
Class:
🔤
Word scramble
Unscramble the letters and write each key term on the line.
1
YDPAILS: XEFL
Turns an element into a flex container. Its direct children become flex items that can be arranged, aligned and spaced using flex properties.
2
ILSIT-AMGEN
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.
3
SBFL-XSEIA
Sets the initial main size of a flex item before free space is distributed according to flex factors.
4
YLDSIAP: DRGI
Defines an element as a grid container and establishes a new grid formatting context for its direct children.
5
RNDC-GOIULM
Shorthand property that specifies a grid item's size and location within the grid columns by defining its start and end lines.
6
UOCDRABNGK
Shorthand property to set all ______ style properties like color, image, position, and repeat in a single declaration.
7
SDRRIB-URDAEO
A CSS property that rounds the corners of an element's outer border edge.
8
@IADEM
A CSS rule used to apply different styles for different media types or screen sizes.
9
ONTNAIITSR
A CSS shorthand property used to control the animation speed when changing CSS properties.
10
MOSRTNRFA
A CSS property that lets you visually modify elements by rotating, scaling, skewing, or translating them.
11
AVR()
A CSS function used to insert the value of a custom property (variable) into other CSS declarations.
Answer Key
HTML & CSS · Modules 53–63
1YDPAILS: XEFL → display: flex — Turns an element into a flex container. Its direct children become flex items that can be arranged, aligned and spaced using flex properties.
2ILSIT-AMGEN → align-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.
3SBFL-XSEIA → flex-basis — Sets the initial main size of a flex item before free space is distributed according to flex factors.
4YLDSIAP: DRGI → display: grid — Defines an element as a grid container and establishes a new grid formatting context for its direct children.
5RNDC-GOIULM → grid-column — Shorthand property that specifies a grid item's size and location within the grid columns by defining its start and end lines.
6UOCDRABNGK → background — Shorthand property to set all background style properties like color, image, position, and repeat in a single declaration.
7SDRRIB-URDAEO → border-radius — A CSS property that rounds the corners of an element's outer border edge.
8@IADEM → @media — A CSS rule used to apply different styles for different media types or screen sizes.
9ONTNAIITSR → transition — A CSS shorthand property used to control the animation speed when changing CSS properties.
10MOSRTNRFA → transform — A CSS property that lets you visually modify elements by rotating, scaling, skewing, or translating them.
11AVR() → var() — A CSS function used to insert the value of a custom property (variable) into other CSS declarations.