CSS Skills Flashcards

CSS Specificity and Selectors

• The selector with the highest specificity is .example a, as class selectors have more weight than other selector types.
• To select an element by attribute, the correct syntax is a[title] {...}, which targets anchors with a specified title attribute.

Clearing Floats

• Two techniques to clear floats include using the "clearfix hack" on the parent element or applying the overflow property with a non-visible value.

CSS Selectors Understanding

• The .nav class targets elements with a class of "nav", while nav targets all <nav> elements, and #nav targets the element with the ID "nav".

Opacity vs RGBA

• The opacity property applies transparency to the entire element, including content, while rgba() affects only the background color.

Block vs Inline Elements

• Block elements span the entire width of their container by default, while inline elements only take up as much width as their content.

CSS Grid and Flexbox

• CSS grid supports flexible layouts with the fr unit, which helps distribute remaining space among columns.

Understanding Line-Height

• The line-height property controls the vertical space between lines of content, impacting text readability.

Class Selector Truths

• Multiple classes can coexist within the same element, but a class cannot be applied multiple times to the same element.

Layouts and Positioning

• For a fixed navigation bar at the top of a page, the position property is essential.

Background Properties

• The shorthand background property combines multiple properties, with background-attachment defining image scrolling behavior.

Cascading Rules

• Specificity determines the final styles applied, where a style defined by a class selector takes precedence over tag selectors.

Z-Index Use

• The z-index property defines the stacking order of elements, with larger values appearing on top of those with smaller values.

Controlling Line Heights

• line-height values can be set in pixels for an absolute height or as a unitless number to scale relative to the font size.

Pseudo-Elements

• To style the first letter of each paragraph, use p::first-letter, which is a valid pseudo-element syntax.

Media Queries

• Current valid media types include print, screen, and speech, each targeting different devices or outputs.

Flexbox Layout

• To arrange flex items in a column, use flex-flow: column; or flex-direction: column;.

CSS Color Validity

• A string like color: 000000; is invalid, while hexadecimal color values with prefixes # or RGB formats are valid.

Margin Collapsing

• Vertical margin collapsing means adjacent margins don't accumulate; only the larger margin is applied in overlapping scenarios.

SVG and CSS

• SVGs can be manipulated with CSS, using properties like fill for color inside objects and stroke for borders.

Fixed Positioning

• Elements with position: fixed are anchored to the viewport and remain static relative to the visible area of the screen.

Background Repeat

• By default, a background image will repeat indefinitely in both horizontal and vertical directions.

Transformation Origins

• The default origin point for transformations is the top left corner of the element.

Important Declaration Precedence

• The highest precedence is given to important declarations in user stylesheets, which can override other styles.

Flex Direction Examples

• To control item layouts, set flex-direction values:
  • row for horizontal,
  • row-reverse for reversed horizontal,
  • column for vertical,
  • column-reverse for reversed vertical order.

Sibling Combinators

• Use the general sibling combinator (~) or adjacent sibling combinator (+) to select siblings under the same parent element, affecting style rules.### CSS Selectors and Properties
• Tilde (~) selector targets all sibling elements after a specified element.
• Plus (+) selector targets only the direct sibling element following a specified element.
• justify-content property in flexbox controls spacing between items along the main axis.
• Icon fonts can be styled with typography properties like font-size and color, enhancing accessibility and design.

Display Properties

• display: none removes an element from view and normal document flow, while visibility: hidden hides it but retains space in the layout.
• For hover effects to scale an element, use transform: scale(0.5);.

Font Weight and Sizing

• The font-weight property values include numeric values where 400 is normal and 700 is bold.
• The calc() function allows for dynamic calculations in CSS properties.

Pseudo-elements and Classes

• The ::placeholder pseudo-element styles placeholder text in form controls.
• In many CSS frameworks, the single colon (:) and double colon (::) form are interchangeable, but double colons are preferred for pseudo-elements to distinguish them from pseudo-classes.

Box Model and Positioning

• Margin adds space outside an element, while padding adds space within an element.
• The position: absolute; property allows an item to be placed at a fixed location within its container.
• The z-index property controls the stacking order of overlapping elements, with larger values appearing on top.

Responsive Design

• Use larger image dimensions for Retina displays (e.g., resizing to 800 x 400 pixels for a 400 x 200 pixel area).

Project Organization

• Recommended naming for the images folder in projects is simply images, prioritizing simplicity and clarity.

Inline CSS Advantages

• Easier to add multiple styles directly within HTML elements compared to separate stylesheets, useful for quick testing of local CSS overrides.

Common CSS Mistakes

• An error in @font-face includes problematic font-family declarations without proper handling of fallbacks.

Test your knowledge of CSS selectors with these flashcards. Each card presents a question focused on different aspects of CSS specificity and attributes. Perfect for both beginners and those looking to refresh their CSS skills.