Scribd
Upload
3 views

CSS Tutorial

This document is a comprehensive guide to Cascading Style Sheets (CSS), covering its basics, syntax, and advanced concepts such as the CSS Box Model, Flexbox, media queries, transitions, and animations. It explains the importance of CSS for web design, including its benefits like content separation, reusability, and improved accessibility. Additionally, it details various CSS properties and techniques for styling and layout management in web development.

Uploaded by

Soumen Golder
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Tutorial

This document is a comprehensive guide to Cascading Style Sheets (CSS), covering its basics, syntax, and advanced concepts such as the CSS Box Model, Flexbox, media queries, transitions, and animations. It explains the importance of CSS for web design, including its benefits like content separation, reusability, and improved accessibility. Additionally, it details various CSS properties and techniques for styling and layout management in web development.

Uploaded by

Soumen Golder
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

CSS Tutorial: A Complete Guide

Cascading Style Sheets (CSS) Basics to Advanced

Chapter 1: Introduction to CSS


What is CSS?

CSS (Cascading Style Sheets) is used to style and design web pages. It controls the layout,
colors, fonts, spacing, and much more.

Why Use CSS?

 Separation of Content & Design: HTML handles structure, CSS handles styling.
 Reusability: A single CSS file can style multiple web pages.
 Faster Page Loading: Optimized CSS reduces page load time.
 Better Accessibility: Improves UI/UX.

Types of CSS

1. Inline CSS (Applied directly to an HTML element)

<p style="color: red; font-size: 20px;">Hello World</p>

2. Internal CSS (Defined inside a <style> tag in the <head>)

<style>
p { color: blue; font-size: 18px; }
</style>

3. External CSS (Stored in a .css file and linked in HTML)

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

p { color: green; font-size: 16px; }


Chapter 2: CSS Syntax
selector {
property: value;
}
CSS Properties: Color & Background:
CSS Properties: Text & Font:
CSS Box Model: Complete Guide with Examples:

What is the CSS Box Model?


The CSS Box Model is a fundamental concept in CSS that describes how elements are structured
and spaced on a webpage. Every HTML element is represented as a box that consists of the
following parts:

1. Content – The actual text, image, or other elements inside the box.
2. Padding – Space between the content and the border.
3. Border – The outline of the box.
4. Margin – Space between the box and adjacent elements.

 Box Model Calculation

To determine the total size of an element:

Total Width = width + left padding + right padding + left border + right border + left margin + right margin

Total Height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Display and Visibility Properties in CSS:

 display: none; = The element is completely removed.


 visibility: hidden; = The element is invisible but takes space.
 opacity: 0; = The element is invisible but still interactive. Its value varies from 0 to 1.
Alpha Channel in CSS:
The Alpha Channel in CSS controls the opacity or transparency of a colour. It is used in RGBA, HSLA, and
the opacity property to make elements partially or fully transparent.
CSS Position Properties:
The position property in CSS is used to control the positioning of elements in a webpage. It determines
how an element is placed relative to its parent, other elements, or the viewport.
CSS Flexbox:
Flexbox (Flexible Box Layout) is a CSS layout model that allows elements to be automatically
aligned, distributed, and resized inside a container. It is useful for

 Centering elements (vertically & horizontally)


 Creating flexible grids & responsive layouts
 Easily aligning items (without using float)

Basic Terminology:

 Flex Container: The parent element (display: flex)


 Flex Items: The direct children of the flex container
 Main Axis: The primary direction of flex items (row or column)
 Cross Axis: The perpendicular axis to the main axis
Flex Container Properties:
These properties are applied to the parent container to control its children.

1. display
o display: flex; → Enables flexbox layout.
o display: inline-flex; → Enables flexbox but acts like an inline element.
2. flex-direction
Defines the main axis direction.
o row (default) → Left to right.
o row-reverse → Right to left.
o column → Top to bottom.
o column-reverse → Bottom to top.
3. flex-wrap
Determines whether items wrap or stay in a single line.
o nowrap (default) → No wrapping.
o wrap → Wrap onto multiple lines.
o wrap-reverse → Wrap but in reverse order.
4. flex-flow
Shorthand for flex-direction and flex-wrap.
o Example: flex-flow: row wrap;
5. justify-content
Aligns items along the main axis.
o flex-start (default) → Items start at the beginning.
o flex-end → Items align at the end.
o center → Items align in the center.
o space-between → Space between items, no space at edges.
o space-around → Equal space around all items.
o space-evenly → Equal space between and around all items.
6. align-items
Aligns items along the cross axis.
o stretch (default) → Items stretch to fill container height.
o flex-start → Aligns items at the start.
o flex-end → Aligns items at the end.
o center → Aligns items at the center.
o baseline → Aligns items by their text baselines.
7. align-content
Aligns multiple flex lines when flex-wrap is set.
o stretch (default) → Stretches to fill container.
o flex-start → Aligns at the start.
o flex-end → Aligns at the end.
o center → Aligns at the center.
o space-between → Equal space between lines.
o space-around → Equal space around lines.
Flex Item Properties:
These properties are applied to flex items inside the container.

8. order
Specifies item order (default is 0). Lower values appear first.
o Example: order: 2;
9. flex-grow
Defines how much an item should grow relative to others. Default is 0.
o Example: flex-grow: 1; (Item takes available space equally)
10. flex-shrink
Defines how much an item should shrink relative to others. Default is 1.
o Example: flex-shrink: 0; (Prevents shrinking)
11. flex-basis
Specifies the default size before growing/shrinking.
o Example: flex-basis: 200px; (Item starts with 200px width)
12. flex
Shorthand for flex-grow, flex-shrink, and flex-basis.
o Example: flex: 1 1 auto;
13. align-self
Aligns an individual item along the cross axis (overrides align-items).
o auto (default) → Inherits from align-items.
o flex-start → Aligns at start.
o flex-end → Aligns at end.
o center → Aligns at center.
o baseline → Aligns based on text baseline.
o stretch → Stretches to fill height.
Introduction to Media Queries
Media queries in CSS allow you to apply styles based on the device's characteristics such as
screen width, height, resolution, orientation, etc. They are essential for responsive web design.

Basic Syntax
A media query consists of:

1. The @media rule


2. A media type (e.g., screen, print)
3. A condition (e.g., max-width: 768px)
4. CSS rules inside {}

Types of Media Queries


1. Media Types

Media queries can target specific device types:

 all → Default (targets all devices)


 screen → Computers, tablets, smartphones, etc.
 print → Styles for printed documents
 speech → Styles for screen readers
2. Media Features

Media queries can target specific device properties such as:

a) Width & Height

Used to apply styles based on screen size.


CSS Transitions: A Complete Guide
CSS transitions allow for smooth changes between property values over a specified duration,
improving the user experience by making animations fluid and natural.

1. What Are CSS Transitions?


CSS transitions enable changes to CSS properties to occur smoothly over a set duration rather
than instantly. This helps create engaging effects like fading, scaling, and moving elements.

2. Transition Syntax

The transition property follows this general syntax:


CSS transform properties allow you to modify the appearance and position of elements in a 2D or
3D space. Here’s a full list of CSS transform properties along with examples:
CSS animations allow elements to change styles over time using keyframes. Below is a comprehensive
list of all CSS animation properties, their usage, and examples.

List of CSS Animation Properties


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

You might also like