Part 1: CSS Foundations

Welcome to the CSS Masterclass. In this chapter, we will understand what CSS is, why it exists and how it connects with HTML.

What is CSS?

CSS stands for Cascading Style Sheets.

CSS is used to control the visual appearance and presentation of HTML documents.

HTML provides the structure while CSS controls how that structure looks.

HTML vs CSS

Basic CSS Syntax

selector {
    property: value;
}

Example

p {
    color: blue;
    font-size: 20px;
}

Three Ways to Add CSS

1. Inline CSS

<p style="color: red;">
    Hello World
</p>

2. Internal CSS

<style>

p {
    color: blue;
}

</style>

3. External CSS

<link rel="stylesheet" href="style.css">

Recommended Method

For most real-world websites, keeping CSS in external stylesheet files helps keep structure and presentation separate.

Part 1 Challenge

1. Create an HTML file.
2. Create a CSS file named style.css.
3. Connect the CSS file to HTML.
4. Change the color of an H1.
5. Change the font size of a paragraph.
6. Add a background color.

Part 2: CSS Selectors

Selectors tell CSS which HTML elements should receive a particular style.

Element Selector

p {
    color: red;
}

Class Selector

.card {
    padding: 20px;
}

ID Selector

#header {
    background-color: black;
}

Universal Selector

* {
    margin: 0;
}

Grouping Selector

h1, h2, p {
    font-family: Arial;
}

Descendant Selector

.card p {
    color: gray;
}

Child Selector

.menu > li {
    list-style: none;
}

Attribute Selector

input[type="text"] {
    border: 1px solid black;
}

Part 3: Colors, Backgrounds & Borders

Color

p {
    color: red;
}

Hexadecimal Colors

body {
    background-color: #ffffff;
}

RGB

p {
    color: rgb(255, 0, 0);
}

RGBA

div {
    background-color: rgba(0, 0, 0, 0.5);
}

Background Image

body {
    background-image: url("background.jpg");
}

Border

.box {
    border: 2px solid black;
}

Border Radius

.box {
    border-radius: 15px;
}

Part 4: Text & Typography

Font Size

p {
    font-size: 18px;
}

Font Family

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

Font Weight

h1 {
    font-weight: bold;
}

Text Alignment

h1 {
    text-align: center;
}

Line Height

p {
    line-height: 1.6;
}

Letter Spacing

h1 {
    letter-spacing: 2px;
}

Text Decoration

a {
    text-decoration: none;
}

Part 5: CSS Box Model

Every HTML element can be understood as a box. The CSS box model consists of:

1. Content
2. Padding
3. Border
4. Margin

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

Box Sizing

* {
    box-sizing: border-box;
}

Part 6: Width, Height & Overflow

Width

.box {
    width: 300px;
}

Height

.box {
    height: 200px;
}

Maximum Width

.container {
    max-width: 1200px;
}

Overflow

.box {
    overflow: auto;
}

Common overflow values include visible, hidden, scroll and auto.

Part 7: Display & Visibility

Block

div {
    display: block;
}

Inline

span {
    display: inline;
}

Inline Block

.button {
    display: inline-block;
}

None

.hidden {
    display: none;
}

Visibility

.invisible {
    visibility: hidden;
}

Part 8: CSS Positioning

CSS positioning allows elements to be placed relative to different reference points.

Static

.box {
    position: static;
}

Relative

.box {
    position: relative;
    top: 20px;
}

Absolute

.box {
    position: absolute;
    top: 0;
    right: 0;
}

Fixed

.navbar {
    position: fixed;
    top: 0;
}

Sticky

.header {
    position: sticky;
    top: 0;
}

Z-Index

.modal {
    position: fixed;
    z-index: 1000;
}

Part 9: Flexbox

Flexbox is a powerful one-dimensional layout system for arranging elements in rows or columns.

Creating a Flex Container

.container {
    display: flex;
}

Direction

.container {
    flex-direction: row;
}

.container {
    flex-direction: column;
}

Justify Content

.container {
    justify-content: center;
}

Align Items

.container {
    align-items: center;
}

Gap

.container {
    gap: 20px;
}

Flex Wrap

.container {
    flex-wrap: wrap;
}

Flex Item

.item {
    flex: 1;
}

Part 10: CSS Grid

CSS Grid is a two-dimensional layout system that works with rows and columns.

Creating a Grid

.container {
    display: grid;
}

Columns

.container {
    grid-template-columns: 1fr 1fr 1fr;
}

Rows

.container {
    grid-template-rows: 100px 200px;
}

Gap

.container {
    gap: 20px;
}

Grid Area

.header {
    grid-column: 1 / 4;
}

Repeat Function

.container {
    grid-template-columns:
        repeat(3, 1fr);
}

Part 11: Responsive Web Design

Responsive design allows websites to adapt to different screen sizes such as phones, tablets and desktops.

Media Query

@media (max-width: 768px) {

    .container {
        flex-direction: column;
    }

}

Responsive Width

img {
    max-width: 100%;
    height: auto;
}

Mobile First Concept

A mobile-first approach starts with styles for smaller screens and progressively adds styles for larger screens.

Part 12: Pseudo Classes & Pseudo Elements

:hover

button:hover {
    background: black;
    color: white;
}

:focus

input:focus {
    outline: 2px solid blue;
}

:first-child

li:first-child {
    font-weight: bold;
}

::before

.title::before {
    content: "★ ";
}

::after

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

Part 13: Transitions & Animations

Transition

button {
    transition: 0.3s;
}

button:hover {
    transform: scale(1.05);
}

Transform

.box {
    transform: rotate(10deg);
}

Keyframes

@keyframes slide {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }

}

Animation

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

Part 14: Advanced CSS

Combinators

div p {
    color: red;
}

div > p {
    color: blue;
}

h2 + p {
    margin-top: 0;
}

Specificity

When multiple CSS rules target the same element, the browser uses the cascade and specificity rules to determine which declaration applies.

!important

.title {
    color: red !important;
}

Use !important carefully because excessive use can make CSS difficult to maintain.

Inheritance

body {
    color: #222;
}

p {
    color: inherit;
}

Part 15: CSS Variables & Functions

CSS Variables

:root {
    --main-color: #2563eb;
    --spacing: 20px;
}

.button {
    background-color: var(--main-color);
    padding: var(--spacing);
}

calc()

.box {
    width: calc(100% - 40px);
}

min()

.container {
    width: min(90%, 1200px);
}

max()

.container {
    width: max(50%, 300px);
}

clamp()

h1 {
    font-size:
        clamp(2rem, 5vw, 4rem);
}

Part 16: CSS Best Practices

1. Use meaningful class names.
2. Avoid unnecessary duplication.
3. Prefer external stylesheets for larger projects.
4. Keep CSS organized.
5. Use responsive layouts.
6. Prefer reusable components.
7. Avoid excessive use of !important.
8. Use modern layout systems such as Flexbox and Grid.
9. Keep accessibility in mind.
10. Test websites on different screen sizes.

Part 17: Real World CSS Projects

The best way to master CSS is to build real projects.

Project 1: Profile Card

Create a profile card using borders, spacing, typography and colors.

Project 2: Navigation Bar

Build a responsive navigation bar using Flexbox.

Project 3: Landing Page

Build a complete landing page using typography, backgrounds, Flexbox and responsive design.

Project 4: Product Cards

Create a responsive product grid using CSS Grid.

Project 5: Portfolio Website

Build a complete responsive portfolio using semantic HTML and modern CSS.

Final CSS Challenge

Build a complete responsive website containing:

• Responsive navigation
• Hero section
• Cards
• Buttons
• Responsive grid
• Flexbox layouts
• CSS animations
• Hover effects
• Mobile layout
• Footer