Complete CSS Tutorial

Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

/* Change color of all <p> elements */
p {
    color: red;
    font-size: 16px;
}

/* Center align heading */
h1 {
    text-align: center;
}

CSS Syntax

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

selector {
    property: value;
    /* more properties */
}

CSS Comments

/* This is a single-line comment */

/*
This is a
multi-line comment
*/

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

.box {
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
    background-color: lightgray;
}

Box Model Components

• Content - The content of the box (text, images, etc.)
• Padding - Clears an area around the content (inside the border)
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border (transparent)

Display Property

The display property specifies the display behavior of an element.

CSS Positioning

The position property specifies the type of positioning method used for an element.

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

.fixed-box {
    position: fixed;
    bottom: 0;
    right: 0;
}

CSS Flexbox

The Flexible Box Layout Module makes it easier to design flexible responsive layout structure without using float or positioning.

Flex Container Properties

.container {
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: stretch | flex-start | flex-end | center | baseline;
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

Flex Item Properties

.item {
    order: <integer>;
    flex-grow: <number>;
    flex-shrink: <number>;
    flex-basis: <length> | auto;
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages.

Grid Container Properties

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px;
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Grid Item Properties

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto;
    grid-column-end: <number> | <name> | span <number> | span <name> | auto;
    grid-row-start: <number> | <name> | span <number> | span <name> | auto;
    grid-row-end: <number> | <name> | span <number> | span <name> | auto;
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
}

Colors & Backgrounds

CSS provides several properties for styling colors and backgrounds of elements.

Color Values

color: red;                  /* Named color */
color: #ff0000;              /* HEX color */
color: rgb(255, 0, 0);       /* RGB color */
color: rgba(255, 0, 0, 0.5); /* RGB with alpha transparency */
color: hsl(0, 100%, 50%);    /* HSL color */
color: hsla(0, 100%, 50%, 0.5); /* HSL with alpha */

Background Properties

background-color: #ffffff;
background-image: url("image.jpg");
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-position: center top | 50% 50% | 100px 200px;
background-size: cover | contain | 100px 100px;
background-attachment: scroll | fixed | local;

CSS Typography

CSS provides many properties for styling text and fonts.

Font Properties

font-family: Arial, sans-serif;
font-size: 16px | 1em | 100%;
font-weight: normal | bold | 100-900;
font-style: normal | italic | oblique;
line-height: 1.5 | 24px;

Text Properties

text-align: left | right | center | justify;
text-decoration: none | underline | overline | line-through;
text-transform: none | capitalize | uppercase | lowercase;
letter-spacing: normal | 2px;
word-spacing: normal | 5px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

Borders & Shadows

CSS provides properties to style borders and add shadow effects.

Border Properties

border: 1px solid black;  /* Shorthand */
border-width: 1px;
border-style: solid | dotted | dashed | double | groove | ridge | inset | outset;
border-color: black;
border-radius: 5px;       /* Rounded corners */

Shadow Effects

box-shadow: 5px 5px 10px rgba(0,0,0,0.3); /* Box shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Text shadow */

CSS Transitions

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

.box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, background 2s;
}

.box:hover {
    width: 200px;
    height: 200px;
    background: blue;
}

Transition Properties

transition-property: width | height | all | none;
transition-duration: 2s | 500ms;
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
transition-delay: 1s | 200ms;

CSS Animations

CSS animations allow animation of most HTML elements without JavaScript.

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

.box {
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Animation Properties

animation-name: example;
animation-duration: 3s;
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
animation-delay: 1s;
animation-iteration-count: 3 | infinite;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-fill-mode: none | forwards | backwards | both;

Responsive Design

Responsive web design makes your web page look good on all devices.

Viewport Meta Tag

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

Media Queries

/* For screens smaller than 600px */
@media  screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* For screens between 600px and 900px */
@media  screen and (min-width: 600px) and (max-width: 900px) {
    body {
        background-color: lightgreen;
    }
}

Responsive Units

• vw - 1% of viewport width
• vh - 1% of viewport height
• vmin - 1% of viewport's smaller dimension
• vmax - 1% of viewport's larger dimension
• rem - Relative to root element's font-size
• % - Relative to parent element

CSS Variables

CSS variables (custom properties) allow you to store values that you want to reuse throughout your stylesheet.

:root {
    --main-color: #4CAF50;
    --padding: 15px;
}

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

CSS Best Practices

• Use semantic HTML as a base
• Organize your CSS with comments
• Use consistent naming conventions (BEM, OOCSS, etc.)
• Keep selectors specific but not overly complex
• Use shorthand properties when possible
• Group related properties together
• Use variables for colors and repeated values
• Mobile-first approach for responsive design
• Minify CSS for production
• Use CSS preprocessors (Sass, Less) for large projects