CSS Basics

Learn how to style your web pages and create beautiful, responsive designs.

What is 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.

Key Concepts

  • Selectors: Target HTML elements to apply styles
  • Properties: Aspects of elements you can change (color, size, etc.)
  • Values: Settings for properties (red, 16px, etc.)
  • Declarations: Property-value pairs
  • Cascade: How styles from different sources are applied
  • Specificity: How the browser decides which styles to apply when multiple rules target the same element
  • Inheritance: How styles are passed from parent to child elements

CSS Syntax and Selectors

Basic Syntax

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

For example:

h1 {
    color: blue;
    font-size: 24px;
    margin-bottom: 20px;
}

Ways to Include CSS

1. External CSS (Recommended)

<!-- In HTML file -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

2. Internal CSS

<!-- In HTML file -->
<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
    </style>
</head>

3. Inline CSS (Use sparingly)

<h1 style="color: blue; font-size: 24px;">Heading</h1>

Common Selectors

Selector Example Description
Element p { } Selects all <p> elements
Class .intro { } Selects all elements with class="intro"
ID #header { } Selects the element with id="header"
Universal * { } Selects all elements
Grouping h1, h2, p { } Selects all h1, h2, and p elements

Advanced 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> elements
Adjacent Sibling h1 + p { } Selects the first <p> element that immediately follows an <h1> element
General Sibling h1 ~ p { } Selects all <p> elements that follow an <h1> element
Attribute [type="text"] { } Selects all elements with type="text"

Pseudo-classes and Pseudo-elements

Pseudo-classes select elements based on a state or position:

/* Style links on hover */
a:hover {
    color: red;
}

/* Style the first child of a parent */
li:first-child {
    font-weight: bold;
}

/* Style odd rows in a table */
tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Pseudo-elements select parts of an element:

/* Style the first line of a paragraph */
p::first-line {
    font-weight: bold;
}

/* Add content before an element */
h2::before {
    content: "→ ";
    color: blue;
}

/* Style the selection of text */
::selection {
    background-color: yellow;
    color: black;
}

Colors and Backgrounds

Color Values

/* Color names */
color: red;
color: blue;
color: mediumseagreen;

/* Hex values */
color: #ff0000;  /* Red */
color: #0000ff;  /* Blue */
color: #3cb371;  /* Medium Sea Green */

/* RGB values */
color: rgb(255, 0, 0);    /* Red */
color: rgb(0, 0, 255);    /* Blue */
color: rgb(60, 179, 113); /* Medium Sea Green */

/* RGBA values (with alpha/transparency) */
color: rgba(255, 0, 0, 0.5);    /* Semi-transparent red */
color: rgba(0, 0, 255, 0.3);    /* Semi-transparent blue */

/* HSL values (hue, saturation, lightness) */
color: hsl(0, 100%, 50%);      /* Red */
color: hsl(240, 100%, 50%);    /* Blue */

/* HSLA values (with alpha/transparency) */
color: hsla(0, 100%, 50%, 0.5);    /* Semi-transparent red */
color: hsla(240, 100%, 50%, 0.3);  /* Semi-transparent blue */

Background Properties

/* Background color */
background-color: #f0f0f0;

/* Background image */
background-image: url('image.jpg');

/* Background repeat */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

/* Background position */
background-position: center;
background-position: top right;
background-position: 50% 25%;

/* Background size */
background-size: cover;
background-size: contain;
background-size: 200px 100px;

/* Background attachment */
background-attachment: fixed;
background-attachment: scroll;

/* Shorthand property */
background: #f0f0f0 url('image.jpg') no-repeat center / cover;

Gradients

/* Linear gradient */
background: linear-gradient(to right, red, yellow);
background: linear-gradient(45deg, red, yellow);
background: linear-gradient(to bottom right, red, yellow, green);

/* Radial gradient */
background: radial-gradient(circle, red, yellow);
background: radial-gradient(ellipse at top, red, transparent);

/* Repeating gradients */
background: repeating-linear-gradient(45deg, red, red 10px, yellow 10px, yellow 20px);
background: repeating-radial-gradient(circle at center, red, blue 10%, red 20%);

Typography

Font Properties

/* Font family */
font-family: Arial, Helvetica, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Courier New', Courier, monospace;

/* Font size */
font-size: 16px;
font-size: 1.2em;
font-size: 1.2rem;
font-size: 120%;

/* Font weight */
font-weight: normal;
font-weight: bold;
font-weight: 400;
font-weight: 700;

/* Font style */
font-style: normal;
font-style: italic;
font-style: oblique;

/* Font variant */
font-variant: normal;
font-variant: small-caps;

/* Line height */
line-height: 1.5;
line-height: 24px;
line-height: 150%;

/* Shorthand property */
font: italic bold 16px/1.5 Arial, sans-serif;

Text Properties

/* Text alignment */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

/* Text decoration */
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline red wavy;

/* Text transform */
text-transform: none;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

/* Text indent */
text-indent: 50px;

/* Letter spacing */
letter-spacing: 2px;

/* Word spacing */
word-spacing: 5px;

/* Text shadow */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

Web Fonts

Using custom fonts with @font-face:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2'),
         url('fonts/mycustomfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

Using Google Fonts:

<!-- In HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* In CSS */
body {
    font-family: 'Roboto', sans-serif;
}

Box Model

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

Box Model Components

  • Content: The actual content of the element (text, images, etc.)
  • Padding: Space between the content and the border
  • Border: A line around the padding
  • Margin: Space outside the border, between elements
/* Width and height (content only by default) */
width: 300px;
height: 200px;

/* Padding */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
padding: 10px 20px; /* top/bottom right/left */
padding: 10px 20px 15px 25px; /* top right bottom left */
padding: 10px; /* all sides */

/* Border */
border-width: 2px;
border-style: solid;
border-color: black;
border: 2px solid black; /* shorthand */
border-radius: 5px; /* rounded corners */

/* Margin */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
margin: 10px 20px; /* top/bottom right/left */
margin: 10px 20px 15px 25px; /* top right bottom left */
margin: 10px; /* all sides */
margin: 0 auto; /* center horizontally */

Box Sizing

The box-sizing property changes how the width and height of elements are calculated:

/* Default - width/height only includes content */
box-sizing: content-box;

/* Width/height includes content, padding, and border */
box-sizing: border-box;

/* Common reset to apply border-box to all elements */
* {
    box-sizing: border-box;
}

Layout Techniques

Display Property

/* Common display values */
display: block;       /* Takes up full width, starts on new line */
display: inline;      /* Takes only needed width, no line breaks */
display: inline-block; /* Inline but can have width/height */
display: none;        /* Removes element from layout */
display: flex;        /* Flexible box layout */
display: grid;        /* Grid layout */
display: table;       /* Table layout */

Position Property

/* Static - default flow (not positioned) */
position: static;

/* Relative - positioned relative to normal position */
position: relative;
top: 10px;
left: 20px;

/* Absolute - positioned relative to nearest positioned ancestor */
position: absolute;
top: 0;
right: 0;

/* Fixed - positioned relative to viewport */
position: fixed;
bottom: 20px;
right: 20px;

/* Sticky - positioned based on scroll position */
position: sticky;
top: 0;

Flexbox Layout

Flexbox is a one-dimensional layout method designed for laying out items in rows or columns.

/* Parent (flex container) */
.container {
    display: flex;
    
    /* Main axis direction */
    flex-direction: row; /* default */
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
    
    /* Wrapping */
    flex-wrap: nowrap; /* default */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
    
    /* Shorthand for direction and wrap */
    flex-flow: row wrap;
    
    /* Alignment along main axis */
    justify-content: flex-start; /* default */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    
    /* Alignment along cross axis */
    align-items: stretch; /* default */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;
    
    /* Alignment of multiple lines */
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch; /* default */
}

/* Children (flex items) */
.item {
    /* Order */
    order: 0; /* default */
    
    /* Grow factor */
    flex-grow: 0; /* default */
    flex-grow: 1;
    
    /* Shrink factor */
    flex-shrink: 1; /* default */
    flex-shrink: 0;
    
    /* Base size */
    flex-basis: auto; /* default */
    flex-basis: 200px;
    
    /* Shorthand for grow, shrink, and basis */
    flex: 0 1 auto; /* default */
    flex: 1; /* same as flex: 1 1 0% */
    
    /* Self-alignment (overrides container's align-items) */
    align-self: auto; /* default */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}

CSS Grid Layout

CSS Grid is a two-dimensional layout system designed for complex layouts.

/* Parent (grid container) */
.container {
    display: grid;
    
    /* Define columns */
    grid-template-columns: 100px 200px 100px;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: minmax(100px, 1fr) 2fr 1fr;
    
    /* Define rows */
    grid-template-rows: 100px auto 100px;
    grid-template-rows: repeat(3, 100px);
    
    /* Gap between items */
    column-gap: 10px;
    row-gap: 15px;
    gap: 15px 10px; /* row column */
    gap: 10px; /* both */
    
    /* Alignment of all items within their cells */
    justify-items: stretch; /* default */
    justify-items: start;
    justify-items: end;
    justify-items: center;
    
    align-items: stretch; /* default */
    align-items: start;
    align-items: end;
    align-items: center;
    
    /* Alignment of the grid within the container */
    justify-content: start;
    justify-content: end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    
    align-content: start;
    align-content: end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;
    
    /* Named areas */
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

/* Children (grid items) */
.item {
    /* Placement by line numbers */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    
    /* Shorthand for column start/end */
    grid-column: 1 / 3;
    grid-column: 1 / span 2;
    
    /* Shorthand for row start/end */
    grid-row: 1 / 2;
    grid-row: 1 / span 1;
    
    /* Shorthand for both */
    grid-area: 1 / 1 / 2 / 3;
    
    /* Placement by area name */
    grid-area: header;
    
    /* Self-alignment (overrides container's alignment) */
    justify-self: stretch; /* default */
    justify-self: start;
    justify-self: end;
    justify-self: center;
    
    align-self: stretch; /* default */
    align-self: start;
    align-self: end;
    align-self: center;
}

Responsive Design

Responsive design ensures that web pages look good on all devices and screen sizes.

Viewport Meta Tag

Always include this meta tag in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

Media queries allow you to apply different styles based on device characteristics:

/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
    .sidebar {
        display: none;
    }
}

/* Styles for screens between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
    .container {
        padding: 10px;
    }
}

/* Styles for print */
@media print {
    .no-print {
        display: none;
    }
    body {
        font-size: 12pt;
    }
}

/* Styles for dark mode preference */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
        color: #fff;
    }
}

Responsive Units

/* Relative to font-size */
font-size: 1.5em;   /* Relative to parent's font-size */
font-size: 1.5rem;  /* Relative to root element's font-size */

/* Relative to viewport */
width: 50vw;   /* 50% of viewport width */
height: 50vh;  /* 50% of viewport height */
padding: 5vmin; /* 5% of viewport's smaller dimension */
font-size: 5vmax; /* 5% of viewport's larger dimension */

/* Percentages */
width: 100%;  /* 100% of parent's width */
max-width: 1200px; /* Won't exceed 1200px */

/* Calculated values */
width: calc(100% - 40px); /* Full width minus 40px */

Responsive Images

/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Using the picture element for art direction */
<picture>
    <source media="(max-width: 600px)" srcset="small-image.jpg">
    <source media="(max-width: 1200px)" srcset="medium-image.jpg">
    <img src="large-image.jpg" alt="Description">
</picture>

/* Using srcset for resolution switching */
<img src="image.jpg"
     srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     alt="Description">

CSS Variables and Modern Features

CSS Variables (Custom Properties)

/* Defining variables in :root (global scope) */
:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --font-size-base: 16px;
    --spacing-unit: 8px;
}

/* Using variables */
.button {
    background-color: var(--primary-color);
    color: white;
    padding: calc(var(--spacing-unit) * 2);
    font-size: var(--font-size-base);
}

/* Local scope variables */
.card {
    --card-padding: 20px;
    padding: var(--card-padding);
}

/* Fallback values */
.element {
    color: var(--undefined-color, black);
}

Transitions

/* Individual properties */
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0.1s;

/* Shorthand */
transition: background-color 0.3s ease-in-out 0.1s;

/* Multiple transitions */
transition: background-color 0.3s ease,
            color 0.2s linear;

Animations

/* Define keyframes */
@keyframes slide-in {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply animation */
.element {
    animation-name: slide-in;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

/* Shorthand */
.element {
    animation: slide-in 1s ease-out 0.5s 1 normal forwards;
}

Transforms

/* 2D Transforms */
transform: translate(50px, 20px);
transform: translateX(50px);
transform: translateY(20px);
transform: scale(1.5);
transform: scaleX(1.5);
transform: scaleY(0.5);
transform: rotate(45deg);
transform: skew(10deg, 20deg);

/* 3D Transforms */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: perspective(500px) rotateY(45deg);

/* Multiple transforms */
transform: translate(50px, 20px) rotate(45deg) scale(1.5);

Next Steps

Now that you understand the basics of CSS, you're ready to:

Practice Your Skills

Check out our Projects section for hands-on exercises to reinforce what you've learned.

Explore Advanced Topics

Visit our Resources page for links to advanced CSS tutorials, tools, and references.