CSS Definition

CSS stands for Cascading Style Sheets. It's 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.

What CSS Does:

• Styling: Colors, fonts, backgrounds, borders
• Layout: Positioning, spacing, alignment
• Responsive Design: Adapting to different screen sizes
• Animations: Transitions and keyframe animations
• Print Styles: How content appears when printed

Basic CSS Example

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

h1 {
    color: #333;
    text-align: center;
    font-size: 2.5rem;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

Types of Selectors

/* Element Selector */
p {
    color: blue;
}

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

/* ID Selector */
#header {
    font-size: 24px;
}

/* Descendant Selector */
div p {
    margin: 10px 0;
}

/* Pseudo-class Selector */
a:hover {
    color: red;
}

/* Pseudo-element Selector */
p::first-letter {
    font-size: 2em;
}

CSS Specificity

CSS specificity determines which styles are applied when there are conflicting rules:

• Inline styles: 1000 points
• ID selectors: 100 points
• Class selectors: 10 points
• Element selectors: 1 point

Box Model Components

.box {
    /* Content */
    width: 200px;
    height: 100px;
    
    /* Padding - space inside the border */
    padding: 20px;
    
    /* Border */
    border: 2px solid black;
    
    /* Margin - space outside the border */
    margin: 10px;
    
    /* Box-sizing affects how width/height are calculated */
    box-sizing: border-box;
}

Font Properties

body {
    /* Font family */
    font-family: 'Arial', sans-serif;
    
    /* Font size */
    font-size: 16px;
    
    /* Font weight */
    font-weight: 400; /* normal */
    font-weight: bold; /* 700 */
    
    /* Font style */
    font-style: italic;
    
    /* Line height */
    line-height: 1.6;
    
    /* Text alignment */
    text-align: left;
    text-align: center;
    text-align: right;
    text-align: justify;
}

Color Formats

/* Named colors */
color: red;
color: blue;

/* Hexadecimal */
color: #ff0000; /* red */
color: #00ff00; /* green */
color: #0000ff; /* blue */

/* RGB */
color: rgb(255, 0, 0); /* red */
color: rgba(255, 0, 0, 0.5); /* red with 50% opacity */

/* HSL */
color: hsl(0, 100%, 50%); /* red */
color: hsla(0, 100%, 50%, 0.5); /* red with 50% opacity */

CSS Gradients

/* Linear Gradient */
background: linear-gradient(to right, #ff6b6b, #4ecdc4);

/* Radial Gradient */
background: radial-gradient(circle, #ff6b6b, #4ecdc4);

/* Multiple Color Stops */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);

Media Queries

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

Flexible Units

/* Relative units for responsive design */
.text {
    font-size: 1rem; /* 16px by default */
    line-height: 1.5em; /* 1.5 times the font size */
}

.container {
    width: 90%; /* 90% of parent width */
    max-width: 1200px;
    margin: 0 auto;
}

.sidebar {
    width: 20vw; /* 20% of viewport width */
    height: 100vh; /* 100% of viewport height */
}