Skip to main content

CSS

Key concepts:

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. Here are some key concepts in CSS:

  1. Selectors:

    • Element Selector: Selects all instances of an element. (p, h1)
    • Class Selector: Selects elements with a specific class. (.classname)
    • ID Selector: Selects a single element with a specific ID. (#idname)
    • Attribute Selector: Selects elements with a specific attribute. ([type="text"])

  2. Properties and Values:

    • Properties define the aspects of styling (e.g., color, font-size).
    • Values assign specific settings to properties (e.g., color: red;, font-size: 16px;).
    • Variables, aka custom properties, are defined by authors once and can be reused throughout.
    • @property allows authors to define the syntax and initial values of variables. Useful in animations.

  3. Box Model:

    • Content: The actual content of the element.
    • Padding: Space between the content and the border.
    • Border: The border surrounding the padding (and content).
    • Margin: Space outside the border.

  4. Display and Positioning:

    • display: Defines how an element is displayed (block, inline, flex, grid, etc.).
    • position: Defines how an element is positioned (static, relative, absolute, fixed, sticky).
    • z-index: Determines the stack order of elements (higher values are in front).

  5. Flexbox and Grid:

    • Flexbox: A layout model for distributing space along a single axis. (display: flex;)
    • Grid: A layout model for two-dimensional layouts. (display: grid;)

  6. Responsive Design:

    • Media Queries: Apply styles based on device characteristics (e.g., width, height, orientation). (@media screen and (max-width: 600px) { ... })
    • Units: Use relative units like percentages (%), viewport width (vw), and viewport height (vh) for responsiveness.

  7. Color:

    • Color Values: Defined using names (red), hex codes (#ff0000), RGB (rgb(255,0,0)), or HSL (hsl(0, 100%, 50%)).

  8. Typography:

    • font-family: Specifies the font of the text. (font-family: Arial, sans-serif;)
    • font-size: Sets the size of the text. (font-size: 16px;)
    • font-weight: Defines the weight (thickness) of the font. (font-weight: bold;)
    • line-height: Sets the height of a line of text. (line-height: 1.5;)

  9. Transitions and Animations:

    • Transitions: Smooth changes between property values. (transition: all 0.3s ease;)
    • Animations: More complex, keyframe-based animations. (@keyframes anim { 0% { opacity: 0; } 100% { opacity: 1; } })

  10. Pseudo-classes and Pseudo-elements:

    • Pseudo-classes: Define special states of an element (:hover, :active, :focus).
    • Pseudo-elements: Style specific parts of an element (::before, ::after).

Centering a div