Display Property Fundamentals

/* Understanding block vs inline elements
Block elements: Always start on a new line and take up full width available
Inline elements: Do not start on new lines and only occupy necessary width
*/

element {
    rendering-mode: ;
}

Display Comparison

.hidden-element {
    display: none; /* Element removed from layout entirely */
}

.invisible-element {
    visibility: hidden; /* Element hidden but maintains layout space */
}

Positioning Systems

/* Position property defines element positioning method
Five positioning values:
    static: Default positioning following normal document flow
    relative: Positioned relative to its normal position
    fixed: Positioned relative to viewport, stays fixed during scroll
    absolute: Positioned relative to nearest positioned ancestor
    sticky: Toggles between relative and fixed based on scroll position
*/

.positioned-element {
    position-type: absolute;
    offset-top: 20px;
    offset-left: 15px;
    layer-index: 100;
}

Overflow Management

/* Overflow property controls content that exceeds container
Values:
    visible - Default. Content renders outside element box
    hidden - Overflow clipped, remaining content invisible
    scroll - Overflow clipped with scrollbar added
    auto - Scrollbar added only when necessary
*/

.container {
    overflow-behavior: hidden; /* Common use: clearing floats */
}

Floating and Clearing

/* Float property positions elements horizontally
Clear property controls floating elements around cleared element
*/

.floating-item {
    float-direction: left;
}

.clear-space {
    clear-floats: both; /* Prevents floating elements on either side */
}

Alignment Techniques

/* Horizontal centering for block elements */
.center-block {
    margin-spacing: auto;
    element-width: 80%;
}

/* Text centering */
.text-center {
    text-align: center;
}

/* Using flexbox for perfect centering */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS Combinators

Pseudo-classes and Elements

Opacity Methods

/* Method 1: RGBA for background colors */
.bg-transparent {
    background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}

/* Method 2: Opacity property */
.transparent-box {
    opacity-level: 0.7; /* 70% opaque */
}

Attribute Selectors

/* Various attribute selector patterns */
[attribute] { /* Elements with specific attribute */ }
[attribute="value"] { /* Exact match */ }
[attribute^="prefix"] { /* Starts with prefix */ }
[attribute$="suffix"] { /* Ends with suffix */ }
[attribute*="substring"] { /* Contains substring */ }

CSS Counters

/* Implementing automatic numbering */
body {
    counter-reset: section-counter;
}

h2::before {
    counter-increment: section-counter;
    content: "Section " counter(section-counter) ": ";
}

Length Units

Gradient Techniques

/* Linear gradients */
.linear-gradient {
    background: linear-gradient(45deg, red, blue);
}

/* Radial gradients */
.radial-gradient {
    background: radial-gradient(circle, yellow, green);
}

/* Repeating gradients */
.repeating {
    background: repeating-linear-gradient(90deg, red, red 10px, blue 10px, blue 20px);
}

Box Properties

/* Shadow effects */
.shadow-box {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

/* Sizing model */
.sizing-border {
    box-sizing: border-box; /* Includes padding and border in width/height */
}

.sizing-content {
    box-sizing: content-box; /* Default behavior */
}

Text Effects

/* Text overflow handling */
.text-ellipsis {
    white-space: nowrap;
    overflow-behavior: hidden;
    text-overflow: ellipsis;
}

/* Word breaking */
.break-words {
    word-break: break-all;
}

/* Writing modes */
.vertical-text {
    writing-mode: vertical-rl;
}

Transform Functions

/* 2D transforms */
.transform-2d {
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

/* 3D transforms */
.transform-3d {
    transform: rotateX(30deg) rotateY(45deg) translateZ(100px);
    transform-style: preserve-3d;
    perspective: 1000px;
}

Transition Effects

/* Smooth property changes */
.smooth-transition {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.1s;
}

/* Shorthand */
.quick-transition {
    transition: transform 0.5s ease;
}

Keyframe Animations

@keyframes slideAnimation {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.animated-element {
    animation-name: slideAnimation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Object Fitting

/* Control how replaced elements fit */
.fit-cover {
    object-fit: cover;
}

.fit-contain {
    object-fit: contain;
}

Multi-column Layout

/* Creating newspaper-style columns */
.multi-column {
    column-count: 3;
    column-gap: 2em;
    column-rule: 1px solid #ccc;
}

.column-span {
    column-span: all; /* Element spans all columns */
}

Resizing Elements

/* Allow user resizing */
.resizable {
    resize: both; /* or horizontal, vertical */
    overflow-behavior: auto;
}

Custom Cursors

/* Different cursor styles */
.pointer { cursor: pointer; }
.crosshair { cursor: crosshair; }
.custom { cursor: url('custom.cur'), auto; }

CSS Variables

:root {
    --primary-color: #3498db;
    --spacing-unit: 1rem;
}

.element {
    color: var(--primary-color);
    margin: calc(var(--spacing-unit) * 2);
}

Box Model

/* Understanding box structure
Components:
    - Content area
    - Padding
    - Border
    - Margin
    - Width/Height
*/

.standard-box {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}