CSS Documentation

Cascading Style Sheets - Style your web pages with beauty and precision

Introduction
CSS Syntax
Selectors
Box Model
Layout Techniques
Responsive Design
Animations
Examples

Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS3 is the latest evolution of the CSS language, bringing new features like animations, transitions, and flexible layouts.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
    property: value;
    property: value;
}

Example:

p {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
}

CSS Selectors

Selectors are patterns used to select the element(s) you want to style.

Basic Selectors

Selector	Example	Description
Element	`p`	Selects all <p> elements
Class	`.classname`	Selects all elements with class="classname"
ID	`#idname`	Selects the element with id="idname"
Universal	`*`	Selects all elements
Attribute	`[target]`	Selects all elements with a target attribute

Combinator Selectors

Selector	Example	Description
Descendant	`div p`	Selects all <p> elements inside <div> elements
Child	`div > p`	Selects all <p> elements that are direct children of <div>
Adjacent Sibling	`div + p`	Selects the first <p> element that is immediately after <div>
General Sibling	`div ~ p`	Selects all <p> elements that are siblings of <div>

The Box Model

Every HTML element is treated as a rectangular box. The CSS box model describes the space an element occupies.

Box Model Components: Content, Padding, Border, Margin

div {
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

Box Sizing

By default, width and height only apply to the content area. Use box-sizing: border-box; to include padding and border in the element's total width and height.

* {
    box-sizing: border-box;
}

Layout Techniques

Flexbox

Flexible Box Layout Module makes it easy to design flexible responsive layouts.

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

CSS Grid

CSS Grid Layout offers a grid-based layout system, with rows and columns.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

.grid-item {
    grid-column: span 2;
}

Positioning

Control the position of elements using the position property.

Value	Description
`static`	Default. Elements are positioned according to the normal flow
`relative`	Positioned relative to its normal position
`absolute`	Positioned relative to its nearest positioned ancestor
`fixed`	Positioned relative to the viewport
`sticky`	Toggles between relative and fixed, depending on the scroll position

Responsive Design

Make your website look good on all devices using media queries.

Media Queries

/* Mobile first approach */
body {
    font-size: 14px;
}

@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
}

Viewport Units

Use viewport-relative units for responsive sizing:

vw - Viewport width percentage
vh - Viewport height percentage
vmin - Minimum of vw and vh
vmax - Maximum of vw and vh

Animations & Transitions

Transitions

Smoothly change property values over a specified duration.

button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: red;
}

Keyframe Animations

Create complex animations with keyframes.

@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.element {
    animation: slide-in 1s ease-out;
}

Practical Examples

Center an Element

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Create a Card

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 10px;
}

Create a Navigation Bar

.navbar {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #333;
}

.navbar li a {
    color: white;
    padding: 15px 20px;
    text-decoration: none;
}

.navbar li a:hover {
    background: #555;
}