CSS Basics
This principle explains how styles are applied when multiple rules conflict, and it includes concepts like specificity and inheritance
What is the Cascade?
This selector targets all elements within a specific container that share a common parent and are the first of their particular tag
What is :first-of-type?
:first-of-type is useful when you want to select the first element of a specific tag within each group of siblings, even if it's not the very first child.
This shorthand property allows you to set all four margin values (top, right, bottom, left) in a single declaration
What is margin?
Using shorthand properties like margin, padding, border, and font makes your CSS more concise
This unit is always relative to the root element's font-size, making it useful for creating scalable and consistent typography across a website.
What is rem?
rem (root em) provides a way to size elements relative to a single base value, promoting consistency and easier maintenance.
This is the recommended method for incorporating Google Fonts into a webpage for optimal performance.
What is using the <link> tag with the preconnect and dns-prefetch resource hints?
preconnect and dns-prefetch hints help the browser establish an early connection to the Google Fonts server, speeding up font loading.
This is the term for the three primary ways to include CSS in a web page, one of which is generally discouraged due to maintenance concerns.
What are inline, internal (embedded), and external?
You would use this CSS selector to add style to every paragraph element on a page with the class "intro".
What is p.intro?
Combining an element selector (p) with a class selector (.intro) allows you to target specific elements with that class.
This CSS property controls the spacing between lines of text within an element
What is line-height?
line-height not only affects readability but also contributes to the vertical rhythm of your design.
Using this unit can cause font sizes to compound unexpectedly if nested elements have font sizes defined with it.
What is em?
While em units are powerful, their relative nature can lead to unexpected results if not carefully managed in nested elements.
In the context of Google Fonts, this term refers to the specific weight and style of a font, such as "Roboto Regular" or "Open Sans Bold Italic".
What is a font variant (or font style)?
When selecting fonts from Google Fonts, you need to choose the specific variants you intend to use.
This method of including CSS allows for browser caching, potentially leading to faster page load times.
What is an external stylesheet?
This selector could be used to target all <a> elements with an href attribute that ends in ".pdf".
What is a[href$=".pdf"]?
This is an attribute selector. The $ signifies that the attribute value should end with the specified string.
This property allows you to specify a list of fonts, creating a fallback system if the user's browser doesn't support the primary font
What is font-family?
A font stack in font-family ensures that your text is displayed in a suitable font even if the preferred font isn't available
You want an element's width to always be half the width of its parent container. This is the most appropriate unit to use.
What is a percentage (%)?
Percentages are relative to the parent element's dimensions, making them suitable for creating flexible layouts.
This CSS property within the @font-face rule specifies the location of the font file when self-hosting a Google Font.
What is src?
While using Google's CDN is common, you can also download and host Google Fonts on your own server. The src property within @font-face points to the font file's URL.
These are two significant advantages of separating CSS from HTML.
What are improved code maintainability/readability and reusability of styles?
If an element has an inline style, an external style, and an internal style all setting the color property, this is the style that will take precedence
What is the inline style?
Inline styles have the highest specificity in the cascade, overriding styles defined elsewhere.
This style declaration would create a 1-pixel, solid, red border around an element.
What is border: 1px solid red;?
This demonstrates the border shorthand property, which sets the width, style, and color of a border.
These two units can be used to set an element's dimensions relative to the browser window's current width and height.
What are vw (viewport width) and vh (viewport height)?
vw and vh are useful for creating elements that scale directly with the viewport size, enabling full-screen designs or responsive elements.
This CSS technique allows you to define a set of styles that will only be applied if a certain condition is met, such as the browser supporting a particular feature.
What are feature queries using @supports?
Feature queries are a powerful tool for progressive enhancement, allowing you to use new CSS features while providing fallbacks for older browsers. This relates to best practices of building for browser compatibility.
This CSS at-rule is essential for importing external resources, such as stylesheets or fonts.
What is @import?
This is what you would use inside a CSS rule to target an element with the unique id attribute of "header"
What is #header?
The # symbol signifies an ID selector. Remember, ID attributes must be unique within an HTML document.
These two CSS properties, used together, can prevent an image from becoming distorted when resized
What are max-width: 100%; and height: auto;?
This is a common technique for creating responsive images. Setting max-width to 100% ensures the image never exceeds its container's width, while height: auto maintains the aspect ratio.
This absolute unit is not recommended for on-screen display but is still used for print stylesheets.
What is a point (pt)?
Points (pt) are traditionally used in print design and are tied to physical measurements. Pixels (px) are more appropriate for screen media.
This is a popular naming convention in CSS that promotes modularity and maintainability by using a structured approach to class names.
What is BEM (Block, Element, Modifier)?
BEM is a widely adopted methodology for writing more organized, scalable, and understandable CSS. This enhances maintainability, which is a core best practice.