CSS Tutorial

Introduction to CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing 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.

/* External CSS file */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
}

CSS Syntax

CSS syntax consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons.

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

CSS Selectors

CSS selectors are used to find (or select) the HTML elements you want to style. There are several different types of selectors, each with its own syntax and use cases.

/* Element selector */
p {
    text-align: center;
    color: red;
}

/* ID selector */
#navbar {
    background-color: black;
}

/* Class selector */
.highlight {
    background-color: yellow;
}

/* Multiple selectors */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

Colors & Backgrounds

CSS colors can be specified using predefined color names, RGB, HEX, HSL, RGBA, or HSLA values. Background properties are used to define the background effects for elements.

Background Properties

CSS background properties allow you to control the background of elements, including setting a background color or image, repeating or positioning the background, and more.

body {
    background-color: #f0f0f0;
}

header {
    background-image: url('pattern.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/* Shorthand property */
div {
    background: #f5f5f5 url('image.png') no-repeat center / cover;
}

Text Styling

CSS provides properties to control various aspects of text styling, including font, size, weight, color, alignment, decoration, spacing, and more.

h1 {
    font-family: 'Helvetica', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

p {
    font-family: 'Georgia', serif;
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
}

Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. Understanding the box model is crucial for layout and positioning in CSS.

div {
    width: 300px;
    padding: 20px;
    border: 10px solid #333;
    margin: 30px;
    
    /* Total width calculation:
    300px (content) + 40px (padding) + 20px (border) + 60px (margin) = 420px */
}

/* Alternative box-sizing */
* {
    box-sizing: border-box;
    /* With this, width and height include content, padding, and border */
}

Layout & Positioning

CSS layout and positioning properties control where elements appear on a page. The position property specifies the type of positioning method used for an element.

/* Relative positioning */
.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
}

/* Absolute positioning */
.absolute-box {
    position: absolute;
    top: 50px;
    right: 10px;
}

/* Fixed positioning */
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
}

Flexbox

The Flexible Box Layout Module, or flexbox, provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 1 0 200px; /* grow shrink basis */
}

CSS Grid

CSS Grid Layout is a two-dimensional layout system designed specifically for the web. It allows you to layout items in rows and columns, and has many features that make building complex layouts straightforward.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    grid-gap: 10px;
}

.header {
    grid-column: 1 / 4; /* span 3 columns */
    grid-row: 1;
}

.sidebar {
    grid-column: 1;
    grid-row: 2;
}

.content {
    grid-column: 2 / 4; /* span 2 columns */
    grid-row: 2;
}

.footer {
    grid-column: 1 / 4; /* span 3 columns */
    grid-row: 3;
}

Responsive Design

Responsive web design ensures that web pages look good on all devices. Media queries are used to apply different styles based on the screen size, viewport, or device.

/* Base styles for all screen sizes */
body {
    font-size: 16px;
}

.container {
    width: 100%;
    padding: 15px;
}

/* Styles for screens 600px and wider */
@media screen and (min-width: 600px) {
    .container {
        width: 80%;
        margin: 0 auto;
    }
}

/* Styles for screens 900px and wider */
@media screen and (min-width: 900px) {
    body {
        font-size: 18px;
    }
    
    .container {
        width: 70%;
    }
}