CSS Framework

Cascading Style Sheets - The language for styling web pages

Styling Layout Responsive Animations

What is CSS?

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

CSS is one of the cornerstone technologies of the World Wide Web, alongside HTML and JavaScript. It allows web developers to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.

Key Features of CSS

Styling

Control colors, fonts, sizes, spacing, and other visual aspects of web elements

Layout

Create flexible layouts with Flexbox, Grid, and positioning properties

Responsive Design

Create websites that work on all devices using media queries and responsive units

Animations

Create smooth transitions and animations without JavaScript

CSS Syntax

CSS consists of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule has three parts:

selector {
    property: value;
    property: value;
}
Selector

Points to the HTML element you want to style

Property

The style attribute you want to change (color, font, etc.)

Value

The value you want to assign to the property

CSS Example

Here's a simple example of CSS styling:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

.header {
    background: #35424a;
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
}

.button {
    display: inline-block;
    background: #0d6efd;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.button:hover {
    background: #0b5ed7;
}

Styled Header

This is an example of text styled with CSS. Notice the font, spacing, and colors.

Sample Button

CSS Selectors

CSS selectors are patterns used to select the element(s) you want to style. Here are some common selectors:

Selector Example Description
Element p Selects all <p> elements
ID #header Selects the element with id="header"
Class .button Selects all elements with class="button"
Attribute [target] Selects all elements with a target attribute
Pseudo-class a:hover Selects links on mouse hover

CSS Version History

CSS Level 1 (1996)

The first official specification of CSS, published by the W3C. Included basic font properties, colors, text attributes, and alignment.

CSS Level 2 (1998)

Added support for positioning, z-index, media types, and bidirectional text. CSS2.1 fixed errors in CSS2.

CSS3 (1999-present)

Modular approach with separate specifications for different features. Introduced animations, transitions, gradients, flexbox, grid, and much more.

CSS4 (Ongoing)

Not a single monolithic specification but rather various level 4 modules that extend CSS3 with new selectors and features.

CSS Frameworks & Preprocessors

While CSS is powerful on its own, various tools have been developed to extend its capabilities:

CSS Frameworks

Pre-prepared libraries that allow for easier, more standards-compliant styling

  • Bootstrap
  • Tailwind CSS
  • Foundation
  • Bulma
CSS Preprocessors

Scripting languages that extend CSS and get compiled into regular CSS

  • Sass (Syntactically Awesome Style Sheets)
  • Less (Leaner Style Sheets)
  • Stylus
CSS Documentation