CSS Flashcards

This category covers the basic syntax, concepts, and most common properties a learner encounters first. Selectors & Syntax: (Targeting elements by id, class, element type, and attribute) CSS Inclusion: (Internal <style>, External <link>, and Inline style="" methods) The Cascade & Specificity: (How CSS decides which rule "wins," including !important) Colors & Backgrounds: (color, background-color, background-image, opacity) Text & Font Styling: (font-family, font-size, font-weight, text-align, color)

What does CSS stand for?: Cascading Style Sheets.
What is the purpose of CSS?: To style and layout web pages such as colors, fonts, and spacing.
Which property changes text color?: color property.
Which property changes background color?: background-color property.
Which property changes font size?: font-size property.
Which property changes font style?: font-style property.
Which property changes font weight?: font-weight property.
Which selector targets all elements?: The universal selector (*).
How do you select an element with id "header"?: #header selector.
How do you select elements with class "menu"?: .menu selector.
Which property controls text alignment?: text-align property.
Which property adds space inside an element?: padding property.
Which property adds space outside an element?: margin property.
Which property sets element width?: width property.
Which property sets element height?: height property.
Which property adds border to elements?: border property.
Which property rounds element corners?: border-radius property.
Which property changes text decoration?: text-decoration property.
Which property changes letter spacing?: letter-spacing property.
Which property changes line spacing?: line-height property.
Which CSS property hides an element?: display:none or visibility:hidden.
Which property sets background image?: background-image property.
Which property controls element transparency?: opacity property.
Which property sets cursor type?: cursor property.
Which property changes list style?: list-style property.
Which property controls overflow behavior?: overflow property.
Which property adds shadow to text?: text-shadow property.
Which property adds shadow to boxes?: box-shadow property.
Which property sets background color?: background-color property.
Which property controls element visibility?: visibility property.
What is specificity in CSS?: The rule determining which CSS style is applied when multiple rules match.
Which selector has higher specificity: class or id?: ID selector has higher specificity.
What does display:block do?: Makes an element take full width and start on a new line.
What does display:inline do?: Displays element inline without starting new line.
What does display:inline-block do?: Displays inline but allows width and height styling.
What does z-index control?: Stack order of positioned elements.
What is the default position value?: static.
What does position:relative do?: Positions element relative to its normal position.
What does position:absolute do?: Positions element relative to nearest positioned ancestor.
What does position:fixed do?: Fixes element relative to viewport.
What does position:sticky do?: Switches between relative and fixed depending on scroll.
What is a pseudo-class?: A keyword added to selectors to define a special state.
Example of pseudo-class?: hover, active, focus.
What is a pseudo-element?: A keyword used to style specific parts of elements.
Example of pseudo-element?: ::before or ::after.
Why is CSS called cascading?: Because multiple styles can cascade and override each other based on priority.
What is the difference between display:none and visibility:hidden?: display:none removes element from layout, visibility:hidden hides but keeps space.
What is the CSS box model?: It consists of content, padding, border, and margin.
What does box-sizing:border-box do?: Includes padding and border inside width/height calculations.
What is CSS inheritance?: Some CSS properties automatically inherit values from parent elements.
Which CSS property defines layout display type?: display property.
Which display value creates a flex container?: display:flex.
Which display value creates a grid container?: display:grid.
Which property sets flex direction?: flex-direction property.
Which property aligns items horizontally in flexbox?: justify-content property.
Which property aligns items vertically in flexbox?: align-items property.
Which property allows wrapping in flexbox?: flex-wrap property.
Which property sets spacing between grid columns?: column-gap property.
Which property sets spacing between grid rows?: row-gap property.
Which shorthand sets row and column gap?: gap property.