3 CSS Styling and Layout Free Online FlashCards

What does CSS control?

CSS controls how HTML content looks and how its boxes are arranged.

What are the parts of a CSS rule?

A rule contains a selector and one or more declarations. Each declaration pairs a property with a value.

What does the selector `article p` match?

`article p` matches paragraph elements that are inside an `<article>` element.

How do class and ID selectors differ in purpose?

A class selector such as `.notice` can style multiple elements; an ID selector such as `#main` targets an element identified by that ID.

How does specificity rank ID, class, and type selectors?

In ordinary author CSS, an ID selector has greater specificity than a class selector, which has greater specificity than a type selector. If tied declarations otherwise remain equal, the later one wins.

How does CSS inheritance work?

Properties such as `color` and `font-family` normally inherit from a parent; `margin` and `border` generally do not. A declaration directly targeting an element takes precedence over an inherited value.

Why provide a fallback font stack?

A fallback font stack lets the browser use another available font if the first choice is unavailable.

What is a benefit of unitless `line-height`?

A unitless `line-height`, such as `1.5`, scales with the text size and helps provide consistent line spacing.

What do `color` and `background-color` set?

`color` sets an element’s foreground color, usually its text; `background-color` sets its background. Keep enough contrast for text to remain readable.

What is the order of the box model layers, inside to outside?

From inside to outside, a CSS box consists of content, padding, border, and margin.

What does `box-sizing: border-box` include in an element’s width?

With `box-sizing: border-box`, declared width and height include padding and border. Margins remain outside those dimensions.

How do block boxes and inline content behave in normal flow?

In normal flow, block boxes usually start on a new line and take the available width. Inline content flows within a line and wraps when needed.