Learn CSS

Introduction to CSS

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

HTML provides the structure of a webpage, while CSS controls how that structure looks and how elements are arranged.

Topics Covered

1. CSS Syntax

A CSS rule consists of a selector followed by one or more declarations.

selector {
    property: value;
}

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

2. CSS Selectors

Selectors determine which HTML elements a CSS rule will apply to.

Element Selector

p {
    color: blue;
}

Class Selector

.important {
    font-weight: bold;
}

ID Selector

#header {
    background-color: black;
}

Group Selector

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

3. CSS Colors

CSS provides several ways to specify colors.

Named Colors

p {
    color: red;
    background-color: yellow;
}

Hexadecimal Colors

p {
    color: #333333;
    background-color: #f5f5f5;
}

RGB Colors

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

Background Color

.card {
    background-color: #f8f9fa;
}

4. Text and Fonts

Typography controls how text appears on a webpage.

Font Family

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

Font Size

h1 {
    font-size: 36px;
}

Font Weight

strong {
    font-weight: 700;
}

Font Style

em {
    font-style: italic;
}

Line Height

p {
    line-height: 1.6;
}

Text Alignment

h1 {
    text-align: center;
}

Text Decoration

a {
    text-decoration: none;
}

Text Transform

5. CSS Box Model

Every HTML element can be considered as a box. The CSS box model consists of four main parts:

Practical Box Model Example

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

box-sizing

The box-sizing property determines how an element's width and height are calculated.

* {
    box-sizing: border-box;
}

Margin, Padding, and Borders

Directional Properties

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

.box {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Shorthand

.box {
    margin: 10px 20px;
    padding: 10px 20px;
}

6. Display and Positioning

Display Property

Position Property

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

7. CSS Flexbox

Flexbox is a CSS layout system designed primarily for arranging elements in one dimension.

Basic Flex Container

.container {
    display: flex;
}

Flex Direction

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

You can also use column, row-reverse, and column-reverse.

Justify Content

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

Align Items

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

Flex Wrap

.container {
    display: flex;
    flex-wrap: wrap;
}

Gap

.container {
    display: flex;
    gap: 20px;
}

8. CSS Grid

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

Two Columns

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

Three Columns

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

Four Columns

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

Rows and Columns

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

9. Flexbox vs Grid

10. Responsive Design

Responsive web design allows a webpage to adapt to different screen sizes such as desktops, tablets, and smartphones.

Viewport

A responsive page normally includes the viewport meta tag in its HTML document.

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

Relative Units

Responsive Images

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

11. CSS Media Queries

Media queries allow CSS rules to change based on characteristics such as viewport width.

Practical Responsive Example

.container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

@media (max-width: 768px) {

    .container {
        flex-direction: column;
    }

}

In this example, the layout uses a row on larger screens and changes to a column when the viewport width is 768px or smaller.

12. CSS Transitions

Transitions create smooth changes between different property values.

.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

13. CSS Transforms

Transforms can change the position, size, rotation, or shape of an element.

Scale

.card:hover {
    transform: scale(1.05);
}

Other Transform Functions

• translate() - moves an element
• scale() - changes its size
• rotate() - rotates an element
• skew() - skews an element

14. CSS Animations

CSS animations allow an element to change from one style to another over time.

@keyframes

@keyframes moveBox {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100px);
    }

}

.box {
    animation: moveBox 2s ease-in-out;
}

Animation Property

The animation property controls the animation name, duration, timing, delay, repetition, and other animation behavior.

15. Common CSS Mistakes

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

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

16. Final Project: Responsive Personal Profile Page

Now combine the CSS concepts you have learned to create a responsive personal profile page.

Stage 1: Create the HTML Structure

<header>
    <nav>
        <a href="#">Home</a>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<main>

    <section>
        <h1>Your Name</h1>
        <p>Web Developer</p>
    </section>

    <section id="about">
        <h2>About Me</h2>
    </section>

    <section id="skills">
        <h2>Skills</h2>
    </section>

    <section id="projects">
        <h2>Projects</h2>
    </section>

    <section id="contact">
        <h2>Contact</h2>
    </section>

</main>

Stage 2: Add Colors and Typography

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

header {
    background-color: #222222;
}

h1 {
    font-size: 40px;
}

section {
    padding: 40px 20px;
}

Stage 3: Build the Navigation with Flexbox

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

Stage 4: Build the Skills or Projects with Grid

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

Stage 5: Make the Page Responsive

@media (max-width: 768px) {

    nav {
        flex-direction: column;
    }

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

}

Stage 6: Add a Hover Effect

.project {
    transition: transform 0.3s ease;
}

.project:hover {
    transform: scale(1.03);
}

17. CSS Cheat Sheet

18. What You Have Learned

After completing this CSS tutorial, you should understand the following concepts:

• CSS syntax and selectors
• Colors and backgrounds
• Typography and text formatting
• The CSS box model
• Margin, padding, and borders
• Display and positioning
• Flexbox
• CSS Grid
• Responsive design
• Media queries
• Transitions and transforms
• CSS animations

20. Frequently Asked Questions