CSS
CSS Basic Concepts:
A quick reference to selectors, the box model, layout, and other CSS fundamentals.
1 view
- Selectors: Target HTML elements to style (e.g., element, class, ID, attribute).
- Properties: Style attributes applied to elements (e.g., color, font-size, margin).
- Values: Settings for properties (e.g., red, 16px, auto).
- Box Model: Structure of elements (content, padding, border, margin).
- Display: Controls element rendering (e.g., block, inline, flex, grid).
- Positioning: Placement of elements (e.g., static, relative, absolute, fixed, sticky).
- Flexbox: Layout model for flexible alignment and distribution of items.
- Grid: Two-dimensional layout system for rows and columns.
- Units: Measurement types (e.g., px, %, vw, vh, rem, em).
- Colors: Define element colors (e.g., hex, RGB, RGBA, HSL).
- Typography: Font styles (e.g., font-family, font-size, font-weight, line-height).
- Pseudo-classes: Style elements based on state (e.g., :hover, :active, :first-child).
- Pseudo-elements: Style parts of elements (e.g., ::before, ::after).
- Specificity: Determines which styles apply when rules conflict.
- Inheritance: Styles passed from parent to child elements.
- Cascading: Order of style application (browser defaults, external, internal, inline).
- Media Queries: Apply styles based on device conditions (e.g., screen size).
- Transitions: Smooth changes for property values over time.
- Animations: Keyframe-based movement or style changes.
- Transforms: Modify element appearance (e.g., rotate, scale, translate).
- Overflow: Controls content exceeding element bounds (e.g., hidden, scroll).
- Z-index: Manages stacking order of positioned elements.
- Variables: Custom properties for reusable values (e.g., --main-color).
- Box-sizing: Defines how box model calculates width/height (e.g., content-box, border-box).
- Float: Positions elements left or right, affecting document flow.
- Clear: Prevents elements from wrapping around floated elements.