The universal selector (*) targets all elements on an HTML page. It is often used for global resets or to apply default styles to every element.
While powerful for broad styling, its low specificity means it is easily overridden by more specific selectors.
Card 2
Type Selector
Answer
A type selector targets all instances of a specific HTML element, such as p for paragraphs or h1 for heading level 1. It applies styles based on the element's tag name.
This is the most basic selector, directly applying styles to all occurrences of an element type.
Card 3
Class Selector
Answer
A class selector targets elements that have a specific class attribute, denoted by a dot (.) followed by the class name. Multiple elements can share the same class, and an element can have multiple classes.
Classes are highly versatile for applying reusable styles across different element types, unlike ID selectors which are unique.
Card 4
ID Selector
Answer
An ID selector targets a single, unique element in an HTML document that has a specific ID attribute, denoted by a hash (#) followed by the ID name. Each ID must be unique within a page.
IDs are for unique elements and carry very high specificity, making them harder to override than classes.
Card 5
Attribute Selector
Answer
An attribute selector targets elements based on the presence or value of an HTML attribute, such as [type="text"] or [data-info]. It offers flexible targeting beyond standard classes or IDs.
This selector is useful for styling elements based on their inherent properties, even if they do not have a class or ID.
Card 6
Descendant Selector
Answer
A descendant selector targets an element that is nested inside another element, separated by a space (e.g., div p). The descendant element does not have to be a direct child.
This allows for broad targeting of elements within a specific parent, regardless of how many levels deep they are.
Card 7
Child Selector
Answer
A child selector targets an element that is a direct child of another element, separated by a greater-than sign (>) (e.g., ul > li). It only applies styles to immediate children.
This is more restrictive than a descendant selector, ensuring styles only apply to direct parent-child relationships.
Card 8
Pseudo-class
Answer
A pseudo-class targets elements based on their state or position in the document tree, such as :hover for mouse-over effects or :nth-child() for specific children. They add dynamic styling capabilities.
Pseudo-classes allow styling elements without modifying the HTML, based on user interaction or structural relationships.
Card 9
Pseudo-element
Answer
A pseudo-element targets a specific part of an element or inserts content before or after it, such as ::before to add generated content or ::first-line to style the first line of text. They are denoted by a double colon.
Pseudo-elements are distinct from pseudo-classes as they target parts of elements or create content, rather than elements in a specific state.
Card 10
Content Box
Answer
The content box is the innermost part of the CSS box model, containing the actual content of an element like text or images. Its dimensions are defined by the element's width and height properties.
In the default 'content-box' model, padding and border are added outside of these explicit width and height values.
Card 11
Padding Box
Answer
The padding box surrounds the content box and provides spacing between the content and the element's border. Padding adds space inside the element, increasing its overall size.
Padding is transparent and takes on the background color of the element, effectively extending the background beyond the content.
Card 12
Border Box
Answer
The border box surrounds the padding box and is the visual boundary of an element. It can have various styles, widths, and colors, and its presence adds to the element's total dimensions.
The border is the visible edge of an element, and its width contributes to the element's space on the page.
Card 13
Margin Box
Answer
The margin box is the outermost layer of the box model, providing transparent space around the element. It creates separation between an element and adjacent elements.
Margins are always transparent and represent the space outside an element's border, pushing other elements away.
Card 14
box-sizing: border-box
Answer
This CSS property value changes the box model calculation so that an element's specified width and height include its padding and border. The content area shrinks to accommodate them.
Using 'border-box' simplifies layout calculations by ensuring that an element's total width and height precisely match the values set in CSS, preventing unexpected size increases.
Card 15
Collapsing Margins
Answer
Collapsing margins occur when the top margin of one block element and the bottom margin of an adjacent block element vertically collapse, with the larger of the two margins being used for separation. This also happens with parent-child elements without borders/padding separating them.
This behavior can be unexpected, as it means the total vertical space between elements is not always the sum of their individual margins.
Card 16
Specificity
Answer
Specificity is the algorithm browsers use to determine which CSS rule applies to an element when multiple rules target the same element and property. It is calculated based on the type and number of selectors.
Understanding specificity is crucial for debugging why certain styles are not being applied as expected, as higher specificity rules always win.
Card 17
!important rule
Answer
The !important rule, when added to a CSS declaration, gives that declaration the highest possible specificity, overriding all other declarations for that property on that element, except for other !important rules with higher cascade order.
While powerful, !important should be used sparingly as it makes CSS harder to maintain and debug due to its ability to break the natural cascade and specificity rules.
Card 18
Flex Container
Answer
A flex container is an HTML element with the display property set to flex or inline-flex. It becomes the parent of flex items and defines the layout context for its direct children.
Applying 'display: flex' to a parent element is the essential first step to enable Flexbox layout for its children.
Card 19
Flex Item
Answer
A flex item is a direct child of a flex container. These items are laid out according to the Flexbox properties defined on their parent container.
Only direct children of a flex container become flex items and participate in the Flexbox layout.
Card 20
main-axis
Answer
The main-axis is the primary axis along which flex items are laid out within a flex container. Its direction is determined by the flex-direction property.
Understanding the main-axis is key to using properties like 'justify-content' which aligns items along this axis.
Card 21
cross-axis
Answer
The cross-axis is the axis perpendicular to the main-axis within a flex container. Its direction is also determined by the flex-direction property.
Understanding the cross-axis is key to using properties like 'align-items' which aligns items along this axis.
Card 22
justify-content
Answer
The justify-content property aligns flex items along the main-axis of the flex container. It controls the distribution of space between or around items.
Common values like 'space-between' or 'center' are used to control horizontal (or vertical, if flex-direction is column) spacing.
Card 23
align-items
Answer
The align-items property aligns flex items along the cross-axis of the flex container. It controls how items are positioned perpendicular to the main-axis.
Common values like 'center', 'flex-start', or 'stretch' are used to control vertical (or horizontal, if flex-direction is column) positioning.
Card 24
Grid Container
Answer
A grid container is an HTML element with the display property set to grid or inline-grid. It establishes a block-level or inline-level grid formatting context for its direct children.
Setting 'display: grid' on a parent element is the foundational step to enable CSS Grid layout for its children.
Card 25
Grid Item
Answer
A grid item is a direct child of a grid container. These items are placed and sized within the grid structure defined by their parent container.
Only direct children of a grid container become grid items and participate in the CSS Grid layout.
Card 26
grid-template-columns
Answer
The grid-template-columns property defines the number and width of columns in a grid layout. It specifies the track sizes for columns.
This property is essential for defining the structure of your grid by explicitly setting up its columns.
Card 27
grid-template-rows
Answer
The grid-template-rows property defines the number and height of rows in a grid layout. It specifies the track sizes for rows.
This property is essential for defining the structure of your grid by explicitly setting up its rows.
Card 28
fr unit
Answer
The fr unit (fractional unit) is a flexible length unit in CSS Grid that distributes available space among grid tracks. It represents a fraction of the free space in the grid container.
The fr unit simplifies responsive grid layouts by allowing columns or rows to automatically resize proportionally to the remaining space.
Card 29
Media Queries
Answer
Media queries are CSS rules that apply styles conditionally based on characteristics of the user's device or browsing context, such as screen width, height, or orientation. They are fundamental for responsive web design.
Media queries allow websites to adapt their layout and appearance to different screen sizes, providing an optimal experience across devices.
Card 30
Viewport Meta Tag
Answer
The viewport meta tag (<meta name="viewport">) is an HTML tag placed in the <head> of a document that controls how a web page's content is rendered on mobile devices. It typically sets the width of the viewport to the device width and initial zoom level.
This tag is crucial for responsive design as it tells the browser to correctly scale the webpage to the device's screen size, preventing mobile browsers from rendering pages at desktop widths.