HTML/CSS Quiz

Question 1

What is an HTML element composed of?

Answer 1

An HTML element has an opening tag, content, and a closing tag. Example: <p>Hello World!</p>

Question 2

What is semantic HTML?

Answer 2

Semantic HTML adds meaning to the page using elements like main, section, and article which can hold content such as blogs and comments. Article is placed inside section.

Question 3

What is the aside element used for?

Answer 3

The aside element is used to mark additional info that can enhance another element, such as bibliographies, endnotes, comments, pull quotes, and sidebars.

Question 4

What does a CSS rule consist of?

Answer 4

A CSS rule consists of a selector (which element to target), a declaration block containing property-value pairs. Example: h1 { color: blue; }

Question 5

What is an attribute selector in CSS?

Answer 5

An attribute selector targets elements with an href attribute value of a specific class. Example: [href] { color: magenta; } or a[href*=’florence’] { color: lightgreen; }

Question 6

What are pseudo-classes in CSS?

Answer 6

Pseudo-classes are selectors like :focus, :visited, :disabled, and :active that select only specific elements with a class of special or based on their state.

Question 7

What is a descendant combinator?

Answer 7

A descendant combinator (.main-list li) selects the element <li> with the .main-list class using a space between selectors.

Question 8

What are web safe fonts?

Answer 8

Web safe fonts are fonts that are widely available across different systems and browsers, ensuring consistent display.

Question 9

What CSS properties control text alignment and justify?

Answer 9

text-align with values: left, center, right, justify

Question 10

What is the opacity property in CSS?

Answer 10

Opacity determines how transparent an element is, with values from 1 (fully visible) to 0 (transparent).

Question 11

What is the CSS Box Model?

Answer 11

The Box Model consists of margin (outermost), border, padding, and content (innermost). Height and width define the content area.

Question 12

What does border: 3px solid coral; do?

Answer 12

It creates a border that is 3 pixels wide, with a solid style, in coral color (width, style, color format).

Question 13

What is the difference between width and margin: 0 auto?

Answer 13

width (e.g., 400px) sets the element width. margin: 0 auto centers the divs in their containing elements.

Question 14

What are min-width and max-width?

Answer 14

min-width and max-width set limits on how wide an element can become, helping with responsive design.

Question 15

What does the overflow property control?

Answer 15

Overflow controls what happens to content that spills outside its box, with values: hidden, scroll, or visible.

Question 16

What does the visibility property do?

Answer 16

Visibility hides elements (hidden, visible, collapse). With ‘none’, the element is completely removed and space will be invisible.

Question 17

What is box-sizing: border-box?

Answer 17

In border-box model, the height and width of the box will remain fixed. Border and padding will be included inside the box (content, padding, border). Dimensions of elements remain the same regardless of border and padding.

Question 18

What are block-level elements?

Answer 18

Block-level elements take the full width of their parent elements and prevent other elements from appearing in the same horizontal space. Examples: <h1>, <p>, <div>, <footer>

Question 19

What is the position: relative property?

Answer 19

Position relative allows positioning with top/bottom/left/right values. All other elements on the page will ignore the element and act like it’s not present.

Question 20

What is position: absolute?

Answer 20

Position absolute positions all other elements on the page as if the element doesn’t exist. The element will be positioned relative to its closest ancestor with position property set to anything other than static. Element will scroll.

Question 21

What is position: fixed?

Answer 21

Position fixed fixes an element to a specific position on the page (regardless of scrolling) and accompanies it with the offset properties of top, bottom, left, right.

Question 22

What is position: sticky?

Answer 22

Sticky keeps the element in the document flow as the user scrolls, but sticks to a specified position as the page is scrolled further.

Question 23

What is z-index?

Answer 23

z-index controls the layering of elements, with higher values appearing on top. It works with display: inline, block, inline-block.

Question 24

What is the default display of <em>, <strong>, and <a> elements?</a></strong></em>

Answer 24

The default display is inline - they only take the amount of space necessary to display their content and can appear next to each other. We can specify their dimensions using width and height with inline-block.

Question 25

What are block elements?

Answer 25

Block elements fill the entire width of the page by default. Width can be set. Examples:

,

,

,

Question 26

What is inline-block?

Answer 26

inline-block combines features of both inline and block elements. Elements can appear next to each other and we can specify their dimensions using width and height. Images use inline-block.

Question 27

What is the float property?

Answer 27

Float property is used to move elements as far right or left as possible in the container. Must have width specified.

Question 28

What are color formats in CSS?

Answer 28

Colors can be named (coral), RGB (3 values 0-255 for red-green-blue), HSL (hue-saturation-lightness), or Hex (hexadecimal 3-6 characters).

Question 29

What is the alpha value in colors?

Answer 29

Alpha represents the opacity/transparency in HSLA and RGBA formats. Values: 1 = opaque, 0 = transparent. Example: hsla(34, 100%, 50%, 0.1)

Question 30

What does color: transparent do?

Answer 30

It makes the foreground color transparent, appearing as if no color is applied.

Question 31

What is foreground color in CSS?

Answer 31

Foreground color is the color that an element appears in (using the color property).

Question 32

What color systems are available in CSS?

Answer 32

Named colors, RGB (3 values 0-255 for red-green-blue), HSL (hue 0-360, saturation %, lightness %), Hex (3-6 characters), with opacity/alpha options for HSLA and RGBA.

Question 33

What typography properties are available in CSS?

Answer 33

font-family, font-weight (400 normal, 700 bold), font-style (italic), text-transform (uppercase), letter-spacing (2px), word-spacing (0.3rem), line-height (1.4), text-align (right)

Question 34

How do you use custom fonts with @font-face?

Answer 34

Use @font-face { font-family: 'MyFont'; src: url('fonts/Roboto.woff2'); format('woff2'); } at the top of your stylesheet, then reference with font-family: 'MyFont', sans-serif;

Question 35

What is serif vs sans-serif?

Answer 35

Serif fonts have extra details on the ends of the main strokes of letters. Sans-serif fonts lack those extra strokes.

Question 36

Where should you reference font files?

Answer 36

Move the woff2 files to a folder inside my website's working directory using @font-face at the top of the stylesheet.

Question 37

What are link states in CSS?

Answer 37

Link states include normal (:link), hover (:hover), active/clicked (:active), and visited (:visited). Different cursor styles can be applied: a { cursor: pointer; }

Question 38

What is Flexbox?

Answer 38

Flexbox is a CSS layout system where all divs with class container have display: flex, creating a flex container with flex items inside arranged along the main axis or cross axis.

Question 39

What does justify-content do in Flexbox?

Answer 39

justify-content controls alignment along the main axis with values: flex-start, flex-end, center, space-around (equal space before and after each item), space-between

Question 40

What does align-items do in Flexbox?

Answer 40

align-items controls alignment along the cross axis with values: flex-start (min-height), flex-end (max-height), center (min-width), baseline (max-width), stretch

Question 41

What is flex-grow?

Answer 41

flex-grow allows us to specify if items should grow to fill a container and which items should grow proportionally more or less than others. Margins are unaffected.

Question 42

What is flex-shrink?

Answer 42

flex-shrink specifies which elements will shrink and in what proportions when the container becomes too small.

Question 43

What is flex-basis?

Answer 43

flex-basis specifies the width of an item before it stretches or shrinks (in flex). Example: flex-basis: 150px

Question 44

What is the flex shorthand property?

Answer 44

flex is shorthand for specifying flex-grow, flex-shrink, and flex-basis. Example: flex: 2 1 150px means grow twice as much, shrink, with 150px basis (undefined affects the element).

Question 45

What does flex-wrap do?

Answer 45

flex-wrap moves flex items to the next line with values: wrap, wrap-reverse, nowrap

Question 46

What is align-content?

Answer 46

align-content aligns elements within a single row when a flex container has multiple rows of content. Use it to space rows from top to bottom with values: flex-start, flex-end, center, space-between, space-around, stretch

Question 47

What is flex-direction?

Answer 47

flex-direction specifies how flex items are ordered. The main and cross axis are interchangeable using this property. Values: row, row-reverse, column, column-reverse. flex-direction: column makes flex items ordered vertically, not horizontally.

Question 48

What is flex-flow?

Answer 48

flex-flow declares both flex-wrap and flex-direction properties in one line. Example: .container { display: flex; flex-flow: column wrap; } equals display: flex, flex-flow: column wrap

Question 49

What is a grid in responsive design?

Answer 49

A grid system uses gutters (negative space between columns), columns, and margins to organize content and create layouts for different screen sizes.

Question 50

What is the typical grid column setup for different devices?

Answer 50

Desktop: 12 columns, Tablet: 6 columns, Mobile: 3 columns

Question 51

What is white space (negative space)?

Answer 51

White space or negative space can be manipulated with CSS properties like line-height and margin to improve readability and visual hierarchy.

Question 52

What is active whitespace?

Answer 52

Active whitespace refers to enhancing the overall page structure through space to emphasize content or guide users from one point to the next.

Question 53

What is the difference between px and relative measurements?

Answer 53

px is a hard-coded measurement. Relative measurements like em and percentages are better for responsive design.

Question 54

What is the em unit?

Answer 54

em is the font-size of the current element or the default base font-size set by the browser if none is given. Em sizes fonts relative to the font-size of a parent element. 1em = 16px

Question 55

What is the rem unit?

Answer 55

rem (root em) sizes fonts relative to the root element instead of checking parent elements. The root element is the tag. Best for sizing elements consistently across an entire website.

Question 56

What are percentages used for in CSS?

Answer 56

Percentages are used to size non-text HTML elements relative to their parent elements (width-height-padding-border-margins). For height & width: margin-top: 20%

Question 57

What are min-width and max-width used for?

Answer 57

You can limit how wide an element becomes using min-width and max-width properties.

Question 58

What are min-height and max-height used for?

Answer 58

min-height and max-height properties set minimum and maximum height limits for elements.

Question 59

How do you scale images and videos?

Answer 59

For a container with width: 50%, height: 200px, overflow: hidden and an image inside with max-width: 100%, height: auto, display: block - the image height will automatically scale proportionally with the width. This prevents images from attempting to align with other content on the page and scales the width of an image to the width of a container.

Question 60

How do you create scaling background images?

Answer 60

Use body { background-image: url('#'); background-repeat: no-repeat; background-position: center; background-size: cover; }

Question 61

What are media queries?

Answer 61

Media queries adapt a website's content to different screen sizes using syntax like:

Question 62

What is the syntax for a media query?

Answer 62

@media only screen and (max-width: 480px) { page-title { font-size: 12px; } } - This targets devices with a width of 480px or smaller using media features.

Question 63

What does min-width in a media query target?

Answer 63

min-width targets screens ABOVE a certain size. Example: @media only screen and (min-width: 320px) and (max-width: 480px) targets the range 320px-480px.

Question 64

What are media query ranges?

Answer 64

@media only screen and (min-width: 320px) and (max-width: 480px) { } creates a ruleset for screens smaller than 480px. Use range for 320px-480px.

Question 65

What is dots per inch (DPI) / screen resolution?

Answer 65

DPI measures screen resolution. Media queries can target specific resolutions: @media only screen and (min-resolution: 300 dpi) { }

Question 66

What is a comma-separated list in media queries?

Answer 66

If only one of multiple media features in a media query must be met, media features can be separated in a comma-separated list. Example: @media only screen and (min-width: 480px) (orientation: landscape) { } (requires only 1 of the media features to be true for the CSS to apply)

Question 67

What are breakpoints?

Answer 67

Breakpoints are the points at which media queries are set. Rather than set breakpoints based on specific devices, the best practice is to resize your browser to view where the website naturally breaks based on its content. The dimensions at which the layout breaks or looks odd become your media query breakpoints.

Question 68

What is clickability in web design?

Answer 68

Clickability refers to affordances - objects that offer the ability for users to interact with them in various ways.

Question 69

What are signifiers in UX design?

Answer 69

Signifiers are aspects of an object that a designer uses to indicate potential and intended affordances of an object.

Question 70

What are UX patterns?

Answer 70

UX patterns establish reusable solutions to common problems in user experience design.

Question 71

What is a wireframe?

Answer 71

A wireframe is a basic visual layout showing the structure and hierarchy of a webpage, focusing on visual hierarchy, cohesion, and continuity.