CSS Course

CSS stands for Cascading Style Sheets. CSS is used to control the appearance and layout of HTML elements.

While HTML provides the structure of a web page, CSS controls how that structure looks.

Basic CSS Example

h1 {
    color: blue;
    font-size: 40px;
}

Connecting CSS to HTML

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

The link element connects an external CSS file to an HTML document.

Why Do We Use CSS?

• Change colors.
• Change fonts and text styles.
• Add spacing.
• Create layouts.
• Make websites responsive.

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

Element Selector

p {
    color: #334155;
}

This selector targets every <p> element.

Class Selector

.title {
    color: blue;
    font-size: 30px;
}

A class selector starts with a dot . and targets elements with that class.

ID Selector

#header {
    background: black;
    color: white;
}

An ID selector starts with # and targets an element with a matching ID.

Multiple Selectors

h1,
h2,
h3 {
    color: #0b5ed7;
}

Important Point

Good selector usage helps keep your CSS organized, readable and easier to maintain.

CSS provides many properties for controlling the appearance of text and other elements.

Text Color

body {
    color: #334155;
}

Background Color

body {
    background-color: #f8fafc;
}

Font Size

h1 {
    font-size: 40px;
}

Font Weight

h1 {
    font-weight: 700;
}

Text Alignment

h1 {
    text-align: center;
}

Example

The CSS box model is one of the most important concepts in web design.

Every HTML element can be considered as a box containing content, padding, border and margin.

CSS Box Model

.card {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    margin: 30px;
}

Padding

Padding creates space between the content and the element's border.

Margin

Margin creates space outside the element.

Border

A border creates a visible boundary around an element.

Box Sizing

* {
    box-sizing: border-box;
}

Using border-box makes sizing elements much easier to manage in modern layouts.

Flexbox is a powerful CSS layout system. It makes it easier to arrange elements in rows and columns.

Basic Flexbox

.container {
    display: flex;
}

Horizontal Alignment

.container {
    display: flex;
    justify-content: center;
}

Vertical Alignment

.container {
    display: flex;
    align-items: center;
}

Space Between Elements

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

Flex Direction

.container {
    display: flex;
    flex-direction: column;
}

Practical Example

CSS Grid is another powerful layout system. It is especially useful for creating structured two-dimensional layouts.

Basic Grid

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

Responsive Grid

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

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

What is Responsive Design?

Responsive design means that a website can automatically adapt to different screen sizes, including desktops, tablets and mobile phones.

Media Queries

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
}

Why Responsive Design Matters

• Websites work better on mobile devices.
• Layouts adapt to different screen sizes.
• Users get a better experience.
• Modern websites are expected to be responsive.

In this final lesson, we combine several CSS techniques to create a professional-looking component.

Card Example

.card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, 0.08);
}

.card:hover {
    transform: translateY(-5px);
}

Professional CSS Techniques

• Use consistent spacing.
• Use a clear color system.
• Use readable typography.
• Use responsive layouts.
• Keep CSS organized.
• Avoid unnecessary repetition.
• Test websites on different screen sizes.

Final Example

Congratulations! You have completed all seven CSS lessons. You now have the foundation needed to style HTML pages and create responsive layouts.