vidux.sh - CSS

1 Inclusion & Syntax

CSS rules link to HTML documents via the <link> element inside the head container. Rules target nodes to declare key-value style pairs.

css · style.css

/* This is a CSS comment */

selector {
    property: value;
    another-property: value;
}

/* Example: styling all paragraphs */
p {
    color: #333333;
    line-height: 1.6;
}

Link your external stylesheet file inside the HTML <head> template using: <link rel="stylesheet" href="style.css">.

2 Core Selectors

Target precise document fragments using elements directly, custom class configurations, unique string ID handles, or structural states.

Element Targets all tags h1 { color: red; }

.class Reusable instances .card { padding: 20px; }

#id Unique single node #main-nav { top: 0; }

:hover Interactive state a:hover { opacity: 0.8; }

Combined Child nesting paths .wrapper p { margin: 0; }

* Universal resetting * { box-sizing: border-box; }

3 Colors & Typography

Control visual branding layers utilizing structured palette values alongside explicit scaling fonts metrics.

css · typography.css

.custom-text {
    /* Color Formats */
    color: #4a90e2;                    /* Hex Format */
    background-color: rgba(0, 0, 0, 0.05); /* RGBA (with Alpha) */

    /* Typography Rules */
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;                 /* Relative to root HTML size */
    font-weight: 500;                  /* Medium weight */
    text-align: center;
}

4 The Box Model

Every element behaves as a rectangular container box. Total dimensional real estate calculation includes layers of margins, borders, padding bounds, and core content boundaries.

css · boxmodel.css

.box-element {
    width: 300px;
    padding: 20px;          /* Space inside the border envelope */
    border: 2px solid #000; /* Edge boundary stroke line */
    margin: 15px auto;      /* Outer buffer space (centered horizontally) */

    /* Force dimensions to include padding and borders */
    box-sizing: border-box;
}

Always declare box-sizing: border-box; globally. Without it, adding padding will expand your element beyond its declared width, breaking structural layouts!

5 Display & Positioning

Alter how elements sit within the document layout using structural display properties or override normal document sorting flows using explicit positioning coordinates.

css · layout.css

.block-item  { display: block; }        /* Takes full line width */
.inline-item { display: inline; }       /* Inline context (ignores width) */

/* Positioning Contexts */
.parent-container {
    position: relative;              /* Establishes boundary anchor */
}

.floating-badge {
    position: absolute;
    top: 10px;
    right: 10px;                     /* Locks inside relative parent container */
}

6 Flexbox Context

Flexbox provides an efficient, one-dimensional layout engine to handle alignment, distribution, and content alignment inside flexible parent boxes.

css · flexbox.css

.flex-container {
    display: flex;
    flex-direction: row;            /* Arrange children side-by-side horizontally */
    justify-content: space-between; /* Distribute spacing along main axis */
    align-items: center;            /* Align items across cross axis vertically */
    gap: 15px;                      /* Fixed spacer gutter between inner rows */
}

.flex-child {
    flex: 1;                        /* Grow evenly to take up empty space */
}

7 Grid Layout

CSS Grid handles complex, two-dimensional user interfaces by splitting a container into explicit matrix columns and row tracks.

css · grid.css

.grid-container {
    display: grid;
    
    /* Construct 3 explicit columns utilizing fraction distribution tracks */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;                      /* Matrix intersection gutters */
}

.wide-grid-item {
    grid-column: span 2;            /* Force item to span over two columns */
}

8 Media Queries

Media queries allow you to build responsive layouts by conditionally applying style parameters based on target viewport width triggers.

css · responsive.css

/* Standard Desktop Baseline Styles */
.sidebar { width: 300px; display: block; }

/* Responsive Mobile Viewport Trigger */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        display: none; /* Hides component container on smartphone devices */
    }
}

Now that your presentation layers match standard conventions, study advanced preprocessor syntax workflows like **Sass/SCSS** or utility engines like **Tailwind CSS**.

CSS Beginner

Table of Contents

1 Inclusion & Syntax

2 Core Selectors

3 Colors & Typography

4 The Box Model

5 Display & Positioning

6 Flexbox Context

7 Grid Layout

8 Media Queries