What does CSS stand for?
Cascading Style Sheets — a language for describing the presentation of HTML documents.
What are the three ways to add CSS to an HTML page?
Inline styles (style attribute), internal stylesheet (<style> tag in <head>), and external stylesheet (<link></link> to a .css file).</style>
What is a CSS rule made up of?
A selector (what to style) and a declaration block (how to style it), e.g. p { color: red; }
What is the universal selector?
The asterisk (*) — it matches every element on the page.
What is the difference between a class selector and an ID selector?
A class (.name) can be reused on many elements. An ID (#name) should be unique per page and has higher specificity.
What does the cascade mean in CSS?
When multiple rules target the same property on the same element, the cascade algorithm decides which wins based on origin, specificity, and source order.
What is specificity and how is it ranked?
The weight of a selector. Inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, which beat type selectors/pseudo-elements.
What does !important do and why should you avoid it?
It forces a declaration to win the cascade regardless of specificity. It makes debugging painful and should be a last resort.
What is inheritance in CSS?
Some properties (like color and font-family) pass their value down to child elements automatically. Others (like border and margin) do not.
Name the four areas of the CSS box model from inside out.
Content, padding, border, margin.
What is the difference between content-box and border-box?
content-box: width/height = content only, padding and border add to the total. border-box: width/height includes content + padding + border.
What is margin collapsing?
When adjacent vertical margins overlap, they merge into one margin equal to the larger value instead of adding together.
What is the difference between block and inline elements?
Block elements break onto a new line and take full width. Inline elements flow within text and ignore width/height.
What does display: inline-block do?
The element flows inline like text but respects width, height, and vertical margin/padding like a block.
What does display: none do vs visibility: hidden?
display: none removes the element from layout entirely. visibility: hidden hides it visually but it still takes up space.
How does position: relative work?
The element stays in normal flow but can be offset with top/right/bottom/left. Its original space is preserved.
How does position: absolute work?
The element is removed from flow and positioned relative to its nearest positioned ancestor (or the viewport if none).
What does position: sticky do?
The element scrolls normally until it hits a threshold (e.g. top: 0), then it sticks in place until its parent scrolls out of view.
What is z-index and when does it work?
It controls stacking order of overlapping elements. It only works on positioned elements (not static).
How do you create a flex container?
Set display: flex on the parent. Its direct children become flex items.
What are the main axis and cross axis in flexbox?
The main axis follows flex-direction (row or column). The cross axis is perpendicular to it.
What does justify-content do?
Distributes flex items along the main axis — values include flex-start, center, space-between, space-around, space-evenly.
What does align-items do?
Aligns flex items along the cross axis — values include stretch (default), flex-start, center, flex-end, baseline.
What does flex: 1 mean?
Shorthand for flex: 1 1 0 — the item grows to fill available space, can shrink, with a basis of zero.
