Comprehensive CSS Tutorial with Hands-on Lessons (Revision)

Created: 29th Aug 24 1 Views
Review needed
Verified
Loading...
Loading...
Comments

Table of Contents

Introduction to CSS

CSS (Cascading Style Sheets) is used to style and layout web pages. It describes how HTML elements should be displayed on screen, paper, or other media.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
    property: value;
    property: value;
}

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

CSS Selectors

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

Selector Example Description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
element p Selects all <p> elements
element, element div, p Selects all <div> elements and all <p> elements

Try it:

This is a paragraph.

This is a highlighted paragraph.

This is a special paragraph.

CSS Colors

CSS supports various color formats:

  • Color names: red, blue, green, etc.
  • Hexadecimal: #FF0000 (red), #00FF00 (green), #0000FF (blue)
  • RGB: rgb(255, 0, 0) (red), rgb(0, 255, 0) (green), rgb(0, 0, 255) (blue)
  • RGBA: rgba(255, 0, 0, 0.5) (semi-transparent red)

Try it:

Color name

Hexadecimal color

RGB color

RGBA color

CSS 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.

.box {
    width: 300px;
    border: 15px solid green;
    padding: 50px;
    margin: 20px;
}

Try it:

This is a box

CSS Flexbox

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

.container {
    display: flex;
    justify-content: space-between;
}
.item {
    flex: 1;
}

Try it:

1
2
3

CSS Grid

CSS Grid is a two-dimensional layout system for the web.

.container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

Try it:

1
2
3
4
5
6

CSS Transitions

CSS transitions allow you to change property values smoothly, over a given duration.

.transition-example {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 2s, background-color 2s;
}

.transition-example:hover {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

Try it:

CSS Animations

CSS animations allow you to animate transitions from one CSS style configuration to another.

@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

.animation-example {
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Try it:

CSS Media Queries

Media queries allow you to apply CSS styles depending on a device's general type or specific characteristics and parameters.

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Try it:

Resize the browser window to see the effect.

CSS Variables (Custom Properties)

CSS variables allow you to store specific values to be reused throughout a document.

:root {
    --main-color: #3498db;
    --secondary-color: #e74c3c;
}

.element {
    color: var(--main-color);
    background-color: var(--secondary-color);
}

Try it:

This uses the primary color.
This uses the secondary color.

CSS Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements allow you to style specific states or parts of elements.

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

/* Pseudo-element */
p::first-line {
    font-weight: bold;
}

Try it:

Hover over me

CSS Transforms

CSS transforms allow you to rotate, scale, skew, or translate an element.

.transform-example {
    transform: rotate(45deg) scale(1.5) skew(10deg) translate(50px, 100px);
}

Try it:

CSS Filters

CSS filters provide graphical effects like blurring or color shifting to an element.

.filter-example {
    filter: blur(5px) brightness(150%) contrast(200%);
}

Try it:

Placeholder

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.

.gradient-example {
    background: linear-gradient(to right, red, yellow);
}

Try it:

CSS Grid Template Areas

Grid template areas provide a more intuitive way to define the structure of a grid layout.

.grid-container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Try it:

Header
Sidebar
Content
Footer

CSS Counters

CSS counters let you adjust the appearance of content based on its location in a document.

body {
    counter-reset: section;
}
h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

Try it:

Introduction

Background

Objectives

Methodology

Data Collection

Analysis

CSS Custom Properties (Variables) Scope

CSS custom properties can have different scopes, allowing for more flexible and maintainable stylesheets.

:root {
    --main-color: blue;
}
.container {
    --main-color: red;
}
.container .item {
    color: var(--main-color);
}
.example {
    --example-color: green;
    color: var(--example-color);
}

Try it:

This paragraph uses the root text color.

This paragraph uses the container's text color.

CSS Logical Properties

Logical properties allow you to control layout through logical, rather than physical, direction and dimension styles.

.example {
    margin-inline-start: 1em;
    padding-block-end: 2em;
    border-inline: 1px solid;
}

Try it:

Logical properties example
RTL example

CSS Scroll Snap

Scroll Snap allows you to create smooth snapping to certain points when scrolling.

.container {
    scroll-snap-type: y mandatory;
}
.item {
    scroll-snap-align: start;
}

Try it:

Item 1
Item 2
Item 3
Item 4

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!

Latest Posts
More Posts
    Random Posts