Learn CSS3 From Beginner
To Advanced

CSS3 Introduction

CSS stands for Cascading Style Sheets. CSS is used to control the visual presentation and layout of HTML documents.

HTML creates the structure of a webpage, while CSS controls how that structure looks. With CSS3, developers can create responsive layouts, animations, transitions, modern interfaces and interactive visual experiences.

CSS Syntax

A CSS rule consists of a selector, property and value.

selector {
    property: value;
}

Example

p {
    color: cyan;
    font-size: 18px;
}

Here p is the selector, color and font-size are properties, and their corresponding values are cyan and 18px.

CSS Selectors

CSS selectors are used to select HTML elements that you want to style.

/* Element selector */
p {
    color: white;
}

/* Class selector */
.card {
    padding: 20px;
}

/* ID selector */
#header {
    background: black;
}

/* Universal selector */
* {
    box-sizing: border-box;
}

CSS Colors & Backgrounds

CSS provides several ways to define colors, including named colors, HEX, RGB, RGBA, HSL and HSLA.

h1 {
    color: red;
}

.box {
    color: #22d3ee;
}

.card {
    background: rgb(7, 17, 31);
}

.overlay {
    background: rgba(34, 211, 238, .15);
}

Background Properties

CSS Text & Fonts

CSS provides many properties for controlling typography.

h1 {
    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}

p {
    font-size: 16px;
    line-height: 1.7;
}

CSS Box Model

Every HTML element can be considered as a rectangular box. The CSS box model consists of content, padding, border and margin.

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid cyan;
    margin: 30px;
}

CSS Display Property

The display property controls how an element participates in the layout.

CSS Positioning

The position property determines how an element is positioned on a webpage.

.box {
    position: absolute;
    top: 20px;
    right: 20px;
}

Float & Clear

The float property was traditionally used for creating layouts and positioning images beside text. Modern websites generally use Flexbox and Grid for page layouts.

.image {
    float: left;
    margin-right: 20px;
}

.clear {
    clear: both;
}

CSS Flexbox

Flexbox is a one-dimensional layout system designed to arrange elements efficiently in rows or columns.

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

Important Flexbox Properties

CSS Grid

CSS Grid is a two-dimensional layout system that allows developers to create rows and columns.

.products {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 20px;
}

Common Grid Properties

Responsive Web Design

Responsive design allows websites to automatically adapt to different screen sizes such as smartphones, tablets and desktop computers.

.cards {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;
}

CSS Media Queries

Media queries allow CSS rules to change according to screen characteristics.

body {
    font-size: 18px;
}

@media (max-width: 700px) {

    body {
        font-size: 15px;
    }

}

CSS Transitions

CSS transitions create smooth changes between property values.

.button {
    background: cyan;
    transition: .3s;
}

.button:hover {
    transform: translateY(-4px);
}

CSS Animations

CSS animations allow elements to change styles over time without JavaScript.

@keyframes move {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }

}

.box {
    animation:
        move 2s infinite alternate;
}

CSS Transform

The transform property allows an element to be moved, rotated, scaled or skewed.

.box:hover {
    transform: scale(1.1);
}

.rotate {
    transform: rotate(45deg);
}

.move {
    transform: translateX(50px);
}

CSS Variables

CSS custom properties, commonly called CSS variables, allow reusable values to be stored and used throughout a stylesheet.

:root {
    --primary: #22d3ee;
    --dark: #07111f;
}

button {
    background: var(--primary);
}

body {
    background: var(--dark);
}

CSS Pseudo Classes

Pseudo-classes select elements based on a particular state or condition.

a:hover {
    color: #22d3ee;
}

input:focus {
    border-color: #22d3ee;
}

li:nth-child(2) {
    font-weight: bold;
}

CSS Pseudo Elements

Pseudo-elements allow developers to style a specific part of an element or insert generated content.

p::first-letter {
    font-size: 40px;
}

.card::before {
    content: "";
    display: block;
}

.card::after {
    content: "→";
}

CSS Specificity

CSS specificity determines which CSS rule takes priority when multiple rules target the same element.

Advanced CSS

Once you understand the fundamentals, you can move toward advanced CSS techniques used in professional websites.

CSS3 Practice Projects

The best way to learn CSS is to build real projects. Start with simple projects and gradually increase the complexity.

CSS3 Interview Questions

CSS3 Frequently Asked Questions