Scribd
Upload
21 views56 pages

Style Your Page With CSS

This document provides a comprehensive guide on CSS, covering its basics, typography, the box model, layout techniques, positioning elements, interactive effects, animations, and responsive design. It explains how CSS enhances web pages by defining styles for HTML elements and offers practical examples for implementation. The guide aims to equip readers with the skills to create polished and interactive web pages using CSS.

Uploaded by

Ros
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views56 pages

Style Your Page With CSS

This document provides a comprehensive guide on CSS, covering its basics, typography, the box model, layout techniques, positioning elements, interactive effects, animations, and responsive design. It explains how CSS enhances web pages by defining styles for HTML elements and offers practical examples for implementation. The guide aims to equip readers with the skills to create polished and interactive web pages using CSS.

Uploaded by

Ros
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

Style your page with CSS

Topic 1: CSS Basics and Setup

●​ What is CSS, and why is it used?


●​ How does CSS work?(selectors,properties and values)
●​ Ways to include CSS
●​ Project setup and linking CSS file

Topic 2: Typography: Fonts and Colors

●​ Font family, font-weight, and line-height, alignment


●​ Background-color and font-color
●​ The color property for text styling

Topic 3: Box Model—Margins, Padding, and Borders

●​ Understanding the box model: content, padding, border, and margin


●​ Adding borders, padding, and margins to images and cards

Topic 4: Layout Techniques: Flexbox and Grid

●​ Inline and Block elements


●​ Flexbox: flex container and items, justify-content, align-items
●​ CSS grid properties for responsive layouts

Topic 5: Positioning Elements

●​ The position property


●​ Managing Stacking Context with Z-Index
●​ Understanding float and clearfix

Topic 6: Interactive Elements—Hover Effects

●​ Hover and active Effects on Buttons, Links, and Images


●​ Hover Effects for Dropdowns and Tooltips

Topic 7: CSS Transition and Animations

●​ Smooth transition effects for interactive elements


●​ Defining keyframes and creating animations
Topic 8: Responsive Design

●​ Media queries for tablet and mobile views


●​ Conclusion

Content
Hello and welcome to this guided project on CSS! Today, we’re taking a big step
into the world of styling by creating a personal webpage from scratch.

Have you ever visited a beautifully designed website and wondered, How did they
make it look so polished and professional? All those layouts, colors,
animations—it feels like magic! But here’s the cool part: you can see exactly how
it’s done.

Let me show you something interesting. Open up any webpage (say amazon.com)
right-click, and select Inspect (or use F12 on your keyboard). Then, find the
<head> section and remove it by clicking on the backspace key. Instantly, you’ll
notice the page changes dramatically—it loses all its styling, layout, and colors,
leaving just the plain structure of text and images.

This is because CSS (Cascading Style Sheets) is what brings a webpage to life.
It’s the design layer that transforms bare HTML into something beautiful and
user-friendly. Without CSS, a web page is just a skeleton, like a book with only
black and white text and no images, fonts, or style.

In this project, you’re going to learn exactly how CSS works and how to use it to
create your own polished, responsive, and interactive webpage. By the end, you’ll
have the skills to style and customize any webpage—just like the ones you admire!
So let’s dive in and unlock the power of CSS together!

Topic 1: CSS Basic Setup.

1.1: What is CSS?


CSS, or Cascading Style Sheets, is a language crafted to make web pages visually
appealing with ease. It enables you to style HTML documents by defining how
elements should appear, including their colors, fonts, spacing, and layout. With
CSS, developers and designers gain precise control over the visual presentation of
a webpage, transforming basic HTML into an engaging and polished experience.

Why is CSS Important?

Imagine a house built with just walls, floors, and a roof—it serves its purpose, but
it’s not inviting or visually appealing. Now, imagine that same house with beautiful
paint, furniture, decorations, and lighting—it’s much more welcoming and
impressive.

That’s the role of CSS in web design. HTML provides the structure (the walls and
floors), and CSS adds the style (the decorations and lighting). CSS is what makes
websites visually engaging and user-friendly. It allows you to create layouts, set
colors, choose fonts, and even add animations, ensuring a seamless and attractive
user experience.

Without CSS, the internet as we know it would look plain and uninspiring. CSS
turns ideas into designs and designs into experiences.

1.2 How Does CSS Work?

CSS works by using selectors, properties, and values to target and style HTML
elements. Let’s break this down:

●​ Selectors: These specify which HTML elements you want to style. For
example, a <p> selector targets all paragraph tags.
●​ Properties: These define what aspect of the element you want to style, like
color, font-size, or margin.
●​ Values: These specify how the property should be styled, like making the
color blue or the font size 16px.

Syntax:

selector {

property: value;

}
Here’s an example:

p{

color: blue;

font-size: 16px;

text-align: center;

This CSS block selects all <p> elements and styles them to have blue text, a font
size of 16px, and centered alignment.

1.3 Ways to include CSS?

Alright, so now we know how to write a CSS code for an element. But how do we
actually get CSS to work on a webpage? Well, there are three main ways to include
CSS, and each has its own perks.

1. Inline CSS
As the name suggests inline that means in between the code line, Imagine you want
to make a quick change to a single element, like turning a paragraph blue. That’s
where inline CSS comes in handy. You add styles directly into the HTML element
using the style attribute.

Here’s what it looks like:

<p style="color: blue;">This is styled with inline CSS.</p>

Quick, right? But here’s the catch: it’s not very efficient for larger projects. If you
style every element this way, your HTML will become a cluttered mess. Inline
CSS is great for one-off tweaks but not for managing entire websites.

2. Internal CSS

Let’s say you’re working on a single-page project, and you want to keep all your
styles in one place. That’s where internal CSS comes in. You write your CSS rules
inside a <style> tag in the <head> section of your HTML file.
Here’s an example:

<head>

<style>

p{

color: green;

font-size: 18px;

</style>

</head>

This is neat and keeps everything in one file. But imagine your website grows to
multiple pages—managing styles across all those pages with internal CSS would
become a nightmare!

3. External CSS

Now for the big one: external CSS. This is the superhero of CSS inclusion,
especially for larger projects. You write all your styles in a separate .css file and
then link it to your HTML file using a <link> tag in the <head>.

Here’s how you link it:

<head>

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

</head>

And your styles.css file would look something like this:

body {

background-color: #f4f4f4;

color: #333;

}
External CSS keeps your HTML clean and makes it easy to reuse styles across
multiple pages. Plus, if you need to update a style, you only have to do it in one
place. This is the method we’ll use in this project because it’s scalable, organized,
and professional.

1.4 Project setup and linking CSS.

Since we’re using our Compiler, a lot of the setup has already been taken care of
for us. We’re ready to jump straight into styling and experimenting. Here’s how we
can get everything organized and ready to go:

You can see the files name index.html and styles.css are already there

You don’t need to worry about creating new files or organizing them manually,
which is pretty handy.

Now, we need to link our styles.css, this can be done using <link> tag in our header
section.

<head>

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

</head>

<link> Tag:​
The <link> tag is used in the <head> section of an HTML document to link
external resources like CSS stylesheets, icons, or fonts to the HTML page.

rel="stylesheet":​
The rel attribute specifies the relationship between the HTML document and the
linked file. In this case, rel="stylesheet" tells the browser that the linked file is a
CSS (Cascading Style Sheets) file, which contains styles for the web page.

href="styles.css":​
The href attribute specifies the location of the external file. styles.css is the name of
the CSS file we want to link to. This tells the browser, "Look for a file called
styles.css in the same folder as this HTML file.

To get started, let’s create a basic template of HTML in which we can do our
styling.

Sample code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>My First CSS Project</title>

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

</head>

<body>

<h1>Welcome to My First CSS Project</h1>

<p>This is a simple webpage where we’ll learn to use CSS!</p>

<</body>

</html>

This is our basic boilerplate, in the next video we will learn how to style it using
CSS.

Topic 2: Typography: Fonts and Colors

Now, let’s dive into the CSS starting with our typographies,Typography and colors
are the soul of any webpage design. They set the tone, convey the brand’s
personality, and make your content easier to read and visually appealing. Let’s
learn about them one by one:

2.1 Font family, font-size, font-weight, and line-height alignment.

Font-family: Fonts are everywhere—serif fonts like Times New Roman give a
formal look, while sans-serif fonts like Arial look modern and clean. The
font-family property lets us choose how the text appears on a webpage.

For example:

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

This means the entire web page will use Arial font for the web-page, and in case
the Aerial isn’t available the browser will move to generic sans-serif font. Always
include the fallback options so that your web page looks good in all the browsers.

Font Size: Adjusting Text Size

The size of your text can enhance readability and emphasize hierarchy. Use the
font-size property to set text sizes in pixels, em, rem, or percentages.

For example:

h1 {

Font-size: 30px;

p{

font-size:16px;

Relative Units like em or rem are great for making your site responsive as they
adjust according to the screen sizes:

●​ 1em equals the font size of the parent element.


●​ 1rem equals the root font size (often 16px by default).

Font Weight: Bold or Subtle?

The font-weight property allows you to adjust the boldness of text, creating visual
contrast between headings, subheadings, and regular text.

h1 {

Font-size: 30px;

font-weight:600/bold

}
p{

Font-size:16px;

font-weight:400;

Line-height

The line-height property controls the spacing between lines of text. Proper spacing
makes your content more readable.

For example:

p{

Font-size:16px;

Font-weight:400;

Line-height: 1.6; (for normal spacing)

This is the basic solace between the lines you can increase or decrease it according
to your convenience, and you can also use pixels to specify them

For example:

p{

Line-height: 30px; (for normal spacing)

Why It Matters: Cramped text feels congested, while too much space looks
disconnected. A balanced line-height makes your content visually appealing.

Text-alignment

Alignment decides where your text appears:

●​ Left-aligned: Default for most languages, perfect for body text.


●​ Center-aligned: Eye-catching for headings or banners.
●​ Right-aligned: Stylish for unique designs or captions.
●​ Justify: Aligns text to both left and right margins, giving a clean block
appearance.

For example:

h1 {

text-align:center;

p{

text-align:justify;

Now, we have defined the appearance of text. Let's move to colors.

Vertical-alignment

The vertical-align property is used to align the text vertically at top, bottom,
baseline, middle, it is mostly used when we are creating tables

For example:

td {

vertical-align:middle;

<table>

<td>This is vertical alignment</td>

</table>

This will set the data in the center of the cell.

2.2 Background-Color and Font-Color

The background-color and color properties work together to make your text
visually striking.
Background-color: It gives color to the background of the specified element.

Color: It gives color to the text.

h1 {

Font-size: 30px;

font-weight:600;

Background-color:grey;

color:black;

p{

Font-size:16px;

Font-weight:400;

Background-color:black;

color:white;

Text Transform and Text Decoration

In addition to font styles we have text-transform and text-decoration. These


properties can add subtle but impactful touches to your design.

Text Transform

The text-transform property controls the capitalization of text. It’s great for
headings, labels, or any text that needs uniform styling. Here’s how it works:

uppercase: Converts all text to uppercase.

lowercase: Converts all text to lowercase.

capitalize: Capitalizes the first letter of each word.​


​
Example:​
h1 {

text-transform: uppercase;

This property is perfect for ensuring consistent text styling across your webpage.

Text Decoration

The text-decoration property lets you add or remove lines around text for emphasis
or stylistic purposes. It’s commonly used for links or special content.

underline: Adds an underline to the text.​


Example:​
a{

text-decoration: underline;

line-through: Strikes through the text.​


Example:​
del {

text-decoration: line-through;

none: Removes any existing decoration.​


Example:​
a{

text-decoration: none;

overline: Adds a line above the text.​


Example:​
span {

text-decoration: overline;
}

2.3 Color properties

Color is an essential part of web design, as it conveys mood, brand identity, and
usability. CSS provides several ways to define and use colors. Let’s break them
down in detail.

1. Named Colors

CSS supports a list of predefined color names, making it easy to apply common
colors without remembering codes.

Examples:

h1 {

color: red;

Named colors are convenient but limited in variety. For precise control, we use
other formats.

2. Hexadecimal Colors (Hex Codes)

Hex codes are a popular way to represent colors in CSS. They start with a # and
consist of six characters:

●​ The first two characters represent red.


●​ The next two represent green.
●​ The last two represent blue.

Example:

h1 {

color: #FF5733; ( A bright orange )

Each pair ranges from 00 (no intensity) to FF (full intensity).​


For instance:
●​ #000000: Black (no red, green, or blue)
●​ #FFFFFF: White (full red, green, and blue)

3. RGB Colors

The RGB color model specifies the intensity of Red, Green, and Blue in a range
from 0 to 255.

Syntax:

color: rgb(red, green, blue);

Example:

p{

color: rgb(255, 87, 51); (bright orange)

Use RGB for intuitive control over the color balance. For instance:

●​ rgb(0, 0, 0) → Black
●​ rgb(255, 255, 255) → White
●​ rgb(255, 0, 0) → Red

4. RGBA Colors

The A in RGBA stands for alpha, which controls transparency. The alpha value
ranges from 0 (completely transparent) to 1 (fully opaque).

Syntax:

color: rgba(red, green, blue, alpha);

Example:

div {

background-color: rgba(255, 87, 51, 0.5); ( Semi-transparent orange )

RGBA is excellent for overlay effects or when you want colors to blend with their
background.
So, we know how to enhance the appearance of our text and apply colors. In the
next Video, we’ll explore The Box Model to structure and organize your web page
elements, ensuring everything looks clean and professional.

Topic 3: Box Model-Margins, paddings and borders

3.1Understanding the CSS Box Model

Imagine each element on a webpage as a box, whether it’s visible or not. This box
has multiple layers that define how the element interacts with its surroundings. The
CSS Box Model is the backbone of how web layouts work. It’s made up of the
following four parts:

1.​ Content: The actual content inside the element, like text, an image, or a
button.
2.​ Padding: Space between the content and the border, like a cushion around
the content.
3.​ Border: A visible line (or frame) that surrounds the content and padding.
4.​ Margin: The outermost layer that creates space between this box and other
elements.

To understand this box model in more better way let’s start by making an box:

<div class="box">

This is a simple box.

</div>

Now we need to give styles to this box to specify its properties

.box {

width: 200px;

height: 100px;

background-color: lightblue;

This will create a simple box of specified height and width, now we need to add
some padding, margins and borders to make this box look better.

Adding Padding
Let’s give the content some breathing room by adding padding.

.box {

width: 200px;

height: 100px;

background-color: lightblue;

padding: 20px;

This will create a specified space between the content and edge of the box.

Imagine it as wrapping a gift: the gift is your content, and the padding is the bubble
wrap protecting it.

Padding can also be defined for each side of an element like:

Padding-top: To add padding to the top.

Padding-bottom: To add padding to the bottom.

Padding-left:To add padding to the left.

Padding-right: To add padding to the right

Adding a Border

Next, we’ll add a border to give our box some structure.

.box {

width: 200px;

height: 100px;

background-color: lightblue;

padding: 20px;

border: 1px solid black;


}

Here’s what the border does:

It wraps around the padding, giving the box a defined edge.

Adding Margins

Finally, let’s add some margin to create space between this box and other elements.

.box {

width: 200px;

height: 100px;

background-color: lightblue;

padding: 20px;

border: 5px solid black;

margin: 20px;

This margin creates 20 pixels of empty space outside the box which prevents the
box from overlapping with other elements, ensuring clean spacing.

Margin can also be defined for each side of an element like:

Margin-top: To add Margin to the top.

Margin-bottom: To add Margin to the bottom.

Margin-left:To add Margin to the left.

Margin-right: To add Margin to the right.

The margins can padding can be included in paragraphs and headings too, For
example:

p{

padding-top:20px;
padding:left:30px;

padding-right:10px;

padding-bottom:40px;

Instead of writing padding for each direction separately we can include it within a
line For example:

Syntax:

Padding:top, right, bottom, left;

Example

padding:20px, 10px, 40px, 30px;

In a same way we can do for margins, for example:

margin:10px, 20px, 30px, 40px;

Margins and padding play a crucial role in making our web page neat and
presentable.

3.2Understanding the CSS Box Model

Let’s understand the box model better with a practical example. By combining the
properties we learnt above, we can create well-structured and visually appealing
layouts.

Example: let’s create a visually appealing card with an image and some text in it.

First, we need to create html file

<div class="card">

<img src="image.jpg" alt="Nature View">

<h2>Serene Landscape</h2>

<p>Experience the beauty of nature in this tranquil setting.</p>

</div>
This is looking very plain and boring so let’s add CSS to create a magic.

CSS

.card {

width: 300px;

background-color: #f9f9f9;

padding: 20px;

border: 2px solid #ddd;

margin: 30px auto;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

text-align: center;

border-radius: 10px;

.card img {

width: 100%;

border-radius: 8px;

margin-bottom: 15px;

.card h2 {

margin: 10px 0;

color: #333;

.card p {

margin: 10px 0;
color: #666;

line-height: 1.6;

As you can see we have created a proper card which has an image and the content
in it.

With just a few lines of CSS, we’ve transformed a plain structure into a visually
appealing card. The soft shadows, rounded corners, and carefully chosen spacing
make the card look polished and professional.

This example demonstrates the power of the box model and CSS styling in
real-world applications. Whether you’re designing individual elements or creating
a full webpage, mastering these foundational properties allows you to build clean,
organized, and visually stunning layouts.

Next, we’ll take your layout skills to the next level with Flexbox and Grid, two
essential tools for creating responsive and dynamic designs. Let’s dive in and
unlock their potential!

Topic 4: Layout Techniques: Flexbox and Grid

4.1 Inline and block element

Welcome back! In this video, we’ll dive into the fascinating world of Flexbox and
Grid, two incredibly powerful tools in CSS for designing responsive and dynamic
layouts. But before we jump into these advanced techniques, it’s crucial to
understand a key foundational concept: the display property.

The display property defines how an element is visually laid out on the screen.
Whether an element behaves as a block or inline element has a huge impact on
how your layout takes shape. Let’s break it down!

Block element

Block elements take up the full width of their container and always start on a new
line.

Common examples: <div>, <p>, <h1>-<h6>, <section>, <header>.

Example:
<h4> I am a block element </h4>

<p> I am another block element </p>

As you can see the output shows that each element takes up the full width unless
stated otherwise.

Inline elements

Inline elements only take up as much width as their content and stay "inline" with
other elements.

Common examples: <span>, <a>, <strong>, <em>, <img>.

Example:

<p>This is a <span style="color: red;">highlighted</span> word in a


sentence.</p>

You can observe in this output that the span element is only taking the space as that
of their content.

We can also specify in the css if we want the element to be displayed as inline or
block.

For Example:

.block-item {

display: block;

.inline-item

display: inline;

Understanding how the display property works is the foundation for mastering
advanced layout techniques like Flexbox and Grid. These tools build on these
concepts to provide even more control over element alignment and positioning.
4.2 Flexbox: The Flexible Layout

Flexbox (short for Flexible Box) is a layout model that makes it easy to create
one-dimensional layouts, where elements can be aligned, spaced, and distributed
evenly within a container. It’s great when you need to build layouts that adapt to
different screen sizes without too much hassle.

The Flexbox Container and Items

To start using Flexbox, you need to define a flex container, which will hold the
flex items (the elements inside the container). This is done by setting the
container’s display property to flex. Once you do that, all the direct children of the
container automatically become flex items.

Flexbox items are direct children of flexbox containers. These items can be
arranged vertically and horizontally inside flexbox containers based on need.

.container {

display: flex;

Flex Properties
There are some properties of flex to make them look presentable, before we need
to know about axes. There are two axis element in the flexbox:

1.​Main Axis: Main axis is the primary axis along which items are arranged in
a container. By default this is the horizontal axis.
2.​Cross Axis: Cross axis is perpendicular axis to primary axis. By default this
is the vertical axis.

Based upon these items are aligned in a flexbox.

1.​ justify-content: Aligns items along the main axis


●​ flex-start: Aligns items at the start.
●​ flex-end: Aligns items at the end.
●​ center: Centers the items.
●​ space-between: Distributes items evenly, with the first item at the start
and the last at the end.
●​ space-around: Distributes items with space around each item.
2.​ align-items: Aligns items along the cross axis (vertical by default).
●​ flex-start: Aligns items to the top.
●​ flex-end: Aligns items to the bottom.
●​ center: Centers items vertically.
●​ stretch: Stretches items to fill the container (default).
●​ baseline: Aligns items to their baselines.

3.​ flex-direction: Defines the direction of the main axis (row or column).
●​ row: Default value, lays out items horizontally.
●​ column: Lays out items vertically.
●​ row-reverse: Lays out items horizontally in reverse order.
●​ column-reverse: Lays out items vertically in reverse order.

To understand these alignments let’s take an example, take a container in which


items are displayed as flex and we will define the alignment properties.

.container {

display: flex;

justify-content:center;

align-items:flex-start;

flex-direction: column;

Let’s create an layout to understand the flexbox practically:


<!DOCTYPE html>

<html lang="en">

<head>

<style>

.container {

display: flex;
flex-direction: row;

justify-content: space-between;

align-items: center;

height: 100vh;

.item {

background-color: light coral;

padding: 20px;

margin: 10px;

border: 3px solid #ccc;

</style>

</head>

<body>

<div class="container">

<div class="item">Item 1</div>

<div class="item">Item 2</div>

<div class="item">Item 3</div>

</div>

</body>

</html>

This will create three boxes in a row with the specified property, like this we can
use flexbox to make dynamic cards, image galleries and many more.

4.3 CSS grid properties for responsive layouts

While Flexbox is great for one-dimensional layouts, CSS Grid is a


two-dimensional layout system. It allows you to create complex layouts with rows
and columns, giving you precise control over both horizontal and vertical
alignment.

To create a grid layout, you first need to define a grid container. This is done by
setting the container's display property to grid or inline-grid.
.grid-container {

display: grid;

Once the container is set to grid, its children become grid items, and you can use
grid properties to control their placement.

Defining Rows and Columns

To define the grid structure, you use the grid-template-columns and


grid-template-rows properties. These allow you to specify the number and size of
rows and columns in the grid.

Grid Columns

●​ Fixed Column Widths: You can specify exact sizes like 200px or
percentages like 30%.
●​ Flexible Columns: Use 1fr (fractional unit) to divide space dynamically.

For example:

.grid-container {

display: grid;

grid-template-columns: 100px 200px 1fr;

Grid Rows

Similar to columns, you can define the height of rows.

.grid-container {

display: grid;
grid-template-rows: 100px auto; (auto means second row will take remaining
space)

Repeat Function

Instead of repeating the same value, you can use the repeat() function for cleaner
code.

.grid-container {

grid-template-columns: repeat(3, 1fr); (this means three columns will be of same


height)

Grid Gaps

You can add gaps (spacing) between rows and columns using grid-gap, row-gap, or
column-gap.

.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 20px;

Placing Grid Items

Grid items can be placed in specific cells using grid-column and grid-row
properties.

Example: Placing an Item

.grid-item {

grid-column: 2 / 4; (will span from column 2 to column 4)

grid-row: 1 / 3;(will span from column 1 to column 3)


}

Named Grid Areas

For more readable and semantic layouts, you can name grid areas using the
grid-template-areas property.

Example: Named Grid Layout

.grid-container {

display: grid;

grid-template-areas:

"header header header"

"sidebar content content"

"footer footer footer";

grid-template-rows: auto 1fr auto;

grid-template-columns: 200px 1fr 1fr;

.header {

grid-area: header;

.sidebar {

grid-area: sidebar;

.content {

grid-area: content;

}
.footer {

grid-area: footer;

The grid is divided into rows and columns.

The words (header, sidebar, content, footer) are grid area names:

●​ "header header header": The first row spans three columns and is
dedicated to the header.
●​ "sidebar content content": The second row has the sidebar in the
first column and content in the remaining two columns.
●​ "footer footer footer": The third row spans all three columns for the
footer.

This creates a visually descriptive layout that maps the purpose of each grid cell.

grid-template-rows: auto 1fr auto;

The first and last row (header and footer) will takes the height as that of content
while the 1fr(the sidebar content content) row will takes the remaining space

grid-template-columns: 200px 1fr 1fr;

200px: The first column (sidebar) has a fixed width of 200 pixels.

1fr: The second and third columns share the remaining space equally.

Grid Alignment in CSS Grid

Since, we have created our grid and specified its width and height now we need to
specify its alignment. CSS Grid offers precise alignment options to position items
within a grid, both vertically and horizontally. Let’s explore these alignment
techniques in detail with examples:

1. Align Items (Vertical Alignment)

The align-items property adjusts the vertical alignment of all grid items within
their respective grid rows. The values define how items are placed relative to the
height of the grid rows.

align-items: start | end | center | stretch;


Values

1.​ start: Aligns items to the top of the row.


2.​ end: Aligns items to the bottom of the row.
3.​ center: Centers items vertically within the row.
4.​ stretch (default): Stretches items to fill the full height of the row.

2. Justify Items (Horizontal Alignment)

The justify-items property controls the horizontal alignment of grid items within
their respective columns.

justify-items: start | end | center | stretch;

Values

1.​ start: Aligns items to the left edge of the column.


2.​ end: Aligns items to the right edge of the column.
3.​ center: Centers items horizontally within the column.
4.​ stretch (default): Stretches items to fill the entire width of the column.

Let’s take an example to understand the alignments.

Example
Create a grid containing 3 items

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

Now let’s give CSS to create a magic:

.grid-container {

display: grid;

grid-template-rows: 100px 100px 100px;

grid-template-columns: 100px 100px 100px;


align-items:center;

justify-items: end;

gap: 10px;

.item {

background-color: lightblue;

text-align: center;

border: 1px solid black;

In this case, all items will align to the right within their columns and at the center
of the row.

3. Place Items (Shortcut for Vertical and Horizontal Alignment)

We can also use the shortcut for the vertical and horizontal alignment. The
place-items property is a shorthand for combining align-items and justify-items.

Syntax

place-items: <align-items-value> <justify-items-value>;

Example

.grid-container {

display: grid;

grid-template-rows: 100px 100px 100px;

grid-template-columns: 100px 100px 100px;

place-items: center end; gap: 10px;

}
This will vertically center items and align them to the right horizontally in each
cell.

So, using these properties of Grid we can create dynamic and responsive layouts
such as image galleries, proper web layouts, portfolio and project display layouts
and much more.

Let’s create an web page layout using grids

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Grid Web Page Layout</title>

<style>

/* Basic Reset */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

.grid-container {

display: grid;

grid-template-areas:

"header header header"


"nav content sidebar"

"footer footer footer";

grid-template-rows: auto 1fr auto;

grid-template-columns: 200px 1fr 200px;

min-height: 100vh;

gap: 10px;

.header {

grid-area: header;

background-color: #4caf50;

color: white;

padding: 20px;

text-align: center;

.nav {

grid-area: nav;

background-color: #2196f3;

color: white;

padding: 20px;

.sidebar {

grid-area: sidebar;

background-color: #ff9800;
color: white;

padding: 20px;

.content {

grid-area: content;

background-color: #f1f1f1;

color: #333;

padding: 20px;

.footer {

grid-area: footer;

background-color: #333;

color: white;

padding: 20px;

text-align: center;

</style>

</head>

<body>

<div class="grid-container">

<header class="header">Header</header>

<nav class="nav">Navigation</nav>

<aside class="sidebar">Sidebar</aside>
<main class="content">Main Content</main>

<footer class="footer">Footer</footer>

</div>

</body>

</html>

As you can see you have created a blue-print web page layout, now using some
more properties of css you have learned you can also create a well structured
webpage.

We've explored the powerful layout systems of Flexbox and CSS Grid, equipping
you with the tools to create dynamic, responsive designs for modern web pages.
From aligning items with Flexbox to building complex, structured layouts with
Grid, these techniques are essential for professional web development.

Now that you have a strong foundation in layout techniques, let’s move forward to
an equally exciting topic: Positioning Elements!

Topic 5: Positioning Elements

Welcome back! In this lesson, we dive into one of the most exciting aspects of web
design—positioning elements. While tools like Flexbox and Grid are fantastic for
structuring layouts, the position property gives us granular control to place
elements exactly where we want them. From floating buttons to sticky headers,
let’s explore the possibilities!

5.1 The Position Property

The position property in CSS allows you to specify how an element is positioned
within the document or its containing element. There are five key positioning
values:

Static: The default position for elements. They appear in the normal flow of the
document and are unaffected by offset properties (e.g., top, left).

example:

.static-item {

position: static;
}

The element stays in its natural order within the container.

Relative: The element's original position is according to normal flow of the page
just like static value. But now the left/right/top/bottom/z-index will work.

Example:​
.relative-item {

position: relative;

top: 10px;

left: 20px;

The element moves 10px down and 20px right from its original position while still
occupying its original space.

Absolute: The element is completely removed from the document flow. It is then
positioned with respect to its containing block (the container in which it is placed),
and its edges are placed using the side-offset properties. An absolutely positioned
element may overlap other elements, or be overlapped by them.

Example:​
.absolute-item {

position: absolute;

top: 0;

right: 0;

The element is pinned to the top-right corner of its container. It no longer affects
the layout of sibling elements.

Fixed: The element's fixed positioning is just like absolute positioning, except the
containing block of a fixed element is always the viewport. Here the element is
totally removed from the document's flow i.e from its container, it is no longer part
of the container or has a position relative to any part of the document.The element
stays in place, even when scrolling.

Example:​
.fixed-item {

position: fixed;

bottom: 20px;

right: 20px;

Here the item will be pinneed at the 20px from bottom and 20px from right of the
viewpoint.

Sticky: A hybrid of relative and fixed positioning.The element "sticks" within a


container when a certain scroll position is reached.

The difference between the fixed and sticky position is that in sticky the item
remains within its container while in fixed the item is no longer the part of any
container.

Example:​
.sticky-item {

position: sticky;

top: 0;

Here the item will be stuck to the top of the container and won’t move while
scrolling.

5.2 Managing Stacking Context with Z-Index


Sometimes the position properties may cause overlapping problem to solve this
issue we have z-index property

The z-index property controls the stacking order of elements, determining which
element appears on top when elements overlap. The higher the z-index value, the
closer the element is to the viewer.
How Z-Index Works:​
For z-index to take effect, the element must have a position value other than static
(e.g., relative, absolute, fixed, or sticky)

To understand z-index let’s take example:

<div class="container">

<div class="box1">Box 1</div>

<div class="box2">Box 2</div>

</div>

CSS​
.box1 {

position: absolute;

width: 100px;

height: 100px;

background-color: red;

z-index: 1;

.box2 {

position: absolute;

width: 100px;

height: 100px;

background-color: blue;

margin-left: -50px;

z-index: 2;

}
Here the boxes will overlap but the box2 will appear above the box1 as it has a
higher. This z-index property is more useful in cases like dropdowns, tooltips
which we will learn further in this Project.

5.3 Understanding float and clearfix in CSS

Next, let's learn about the float and clearfix property in CSS. The float property in
CSS is a powerful tool that allows elements to be positioned horizontally, creating
layouts where elements align beside each other. However, floating elements can
disrupt the natural flow of a document, so understanding how to manage them with
techniques like the clearfix is essential.

What is the float Property?

The float property is used to position elements to the left or right within their
container, allowing inline content (like text) to flow around them.

Syntax:

float: none | left | right | inherit;

●​ none: Default value; the element does not float.


●​ left: The element floats to the left of its container.
●​ right: The element floats to the right of its container.
●​ inherit: The element inherits the float value of its parent.

Example: Creating a Two-Column Layout

<div class="container">

<div class="left-column">Left Content</div>

<div class="right-column">Right Content</div>

</div>

CSS:

.container {

width: 100%;

}
.left-column {

width: 20%;

float: left;

background-color: lightblue;

padding: 10px;

.right-column {

width: 20%;

float: right;

background-color: lightgreen;

padding: 10px;

Here the left column will be placed at the left position while the right column will
be placed at the right position.

Problems with Float

While float is great for layouts, it can cause issues:

1.​ Collapsed Parent Container: When child elements are floated, their parent
container may "collapse," as it no longer recognizes the floated children.
2.​ Content Overlap: Floated elements can overlap or behave unpredictably if
not managed properly.

The Problem:

<div class="container">

<div class="floating-box">I am floated!</div>

</div>

CSS
.container {

background-color: lightgray;

.floating-box {

float: left;

width: 100px;

height: 100px;

background-color: lightblue;

Result: The container collapses because it doesn't "see" the floated child.

The Solution: Adding Clearfix

Clearfix is a technique to fix the collapsing container issue caused by floated


elements. It forces the parent container to recognize its floated children,
maintaining proper layout structure. We can use it using this syntax:

.container::after {

content: "";

display: table;

clear: both;

Here this will create a pseudo element which will help to maintain the proper flow
of the container and display:table ensures that the pseudo-element is a block
element and ensures that it occupies the full width of the parent while clear: both
This clears the float from both sides (left and right).

This ensures the container recognizes its floated children and adjusts its height
accordingly.
Clearfix helps to prevent problems like container collapse, uneven heights,
overlapping content, inconsistent alignment.

In this topic, we learned the intricacies of positioning elements with the position
property, including static, relative, absolute, fixed, and sticky positioning values.
We also explored the z-index property for controlling stacking order and the float
and clearfix techniques to manage layout flow. With these tools, you can now place
elements with precision and handle layouts more effectively.Now in the next video
we will learn more about CSS interactivity through hover and active effect.

Topic 6:Interactive Elements—Hover Effects

Welcome to a new dimension of interactivity! In this topic, we’ll explore how to


bring life to your website by adding hover and click effects to buttons, links,
images, and more. These effects enhance user experience by making elements
more responsive to user actions, whether it's a simple hover or a more complex
interaction like modals and dropdowns.

6.1 Hover and active Effects on Buttons, Links, and Images

The :hover pseudo-class allows you to define styles for elements when the mouse
is placed over them. This creates a dynamic effect that engages users while the
:active pseudo-class allows you to define styles for elements when the mouse is
clicked over them. These effects are used to make our elements very interactive.

For example we can take a div and give it a hover effect that when we hover over
that div its background color will change. And when we click over it it’s border
color changes

Example:

<div>

This is a sample div.

</div>

CSS

div {

width:200px;
height:300px;

font-size:14px;

color:black;

border: 1px solid black;

div:hover {

background-color:#b43436;

color:white;

div:active {

border: 1px solid #b43436;

As you can see in the output that when we hover over the div it changes its
background color to #b43436 which is a shade of red while its text color changes
to white. While when we click over it, the border color changes. Similarly we can
add hover and active effects to any element.

Hover and Active Effects on Buttons​


Buttons are prime candidates for hover effects. Whether it’s changing the
background color, adding a shadow, or scaling the button, hover effects can make
them more interactive.​
Example:

<button> Hover me or Click me!!! </button>

CSS​
.button {

padding: 10px 20px;

background-color: #4CAF50;
color: white;

border: 1px solid black;

cursor: pointer;

.button:hover {

border: 1px solid #45a049;

.button:active {

background-color: #45a049;

Explanation:​
When the user hovers over the button, the border color changes and when clicks it,
the background color changes.

Hover and Active Effects on Links​


Links often change color or underline when hovered or clicked over, but you can
get creative with transitions and animations to add visual appeal.​
Example:

a{

color: #000;

text-decoration: none;

transition: color 0.3s; (this is used to create a smooth effect)

a:hover {

color: #ff6347;

text-decoration: underline;
a:active {

transform: scale(1.1); (This will scale up the link when clicked over it.)

Explanation:​
The link changes color and underlines when hovered, while it grows when we click
over it, with a smooth transition to enhance the experience.

Hover and Active Effects on Images​


Hovering over images can trigger zooms, blurs, or even animations that reveal
more content or details.​
Example:​
.image-container {

position: relative;

overflow: hidden;

.image-container img {

width: 100%;

transition: transform 0.3s ease;

.image-container:hover img {

transform: scale(1.1); (using this we can scale up or zoom the image to 1.1 scale.

.image-container:active img {

transform: scale(0.95); (using this we can scale down or shrink the image to 0.95
scale.

}
Explanation:​
When the user hovers and clicks over the image, it slightly zooms and shrinks in to
give a more interactive feel.

These are some of the simple usage of hover and active effects, we can use hover
effect with any element when with paragraph and heading tag to make it more
interactive.

6.2 Hover Effects for Dropdowns and Tooltips

Now, let’s move forward to see the usage of hover effect. Interactive elements like
dropdowns and tooltips often rely on hover or click events to display hidden
content, adding more functionality to a page.

Hover Dropdown Menus​


Dropdowns are great for hiding additional navigation or options. When a user
hovers over a menu item, the drop down appears.​
Example:​
.dropdown {

position: relative;

display: inline-block;

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 160px;

z-index: 1;

.dropdown:hover .dropdown-content {

display: block;
}

<div class="dropdown">

<span>Mouse over me</span>

<div class="dropdown-content">

<p>Hello World!</p>

</div>

</div>

Explanation:​
When the user hovers over the .dropdown element, the .dropdown-content
becomes visible, showing the hidden text.

Tooltips on Hover​
Tooltips are small pop-up elements that display additional information when the
user hovers over an element.

Example:​
.tooltip {

position: relative;

display: inline-block;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 5px;
padding: 5px 0;

position: absolute;

z-index: 1;

bottom: 125%;

left: 50%;

margin-left: -60px;

opacity: 0;

transition: opacity 0.3s;

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

Explanation:​
The tooltip becomes visible when the user hovers over the .tooltip element,
displaying extra information about the element.

You’ve successfully learned how to enhance your website’s interactivity by using


hover and active effects. These small but impactful design elements can
significantly elevate the user experience on your site by adding visual feedback and
making your elements responsive to user actions.

In the next topic, we’ll dive deeper into animations and transitions, where you’ll
learn how to create smoother, more complex effects for your web projects. Get
ready to take your CSS skills to the next level!
Topic 7: Transitions and Animation

In this topic, we’ll learn how to make web pages come alive using transitions and
animations. These tools help create smooth, attractive effects when elements
change, making websites more interactive and fun to use. Let’s dive into the
details!

7.1 Smooth Transition Effects for Interactive Elements


We will start this video by understanding what transitions are?

A transition makes changes (like color, size, or position) on a web page happen
gradually, instead of instantly. For example, when you hover over a button, its
color can fade smoothly from one shade to another. This creates a more polished
and professional look.

How to Use Transitions

The transition property tells the browser which CSS property to animate, how long
it should take, and how smooth the change should be.

Key Components of the transition Property

transition-property: Specifies which CSS property will change smoothly for


example background color, transformation or all.

transition-duration: Sets the time the transition takes to complete (in seconds or
milliseconds ms).​
transition-delay: Adds a delay before the transition starts.​
transition-timing-function: Defines the speed curve of the transition.​
Common values:

●​ ease (default): Starts slow, speeds up, then slows down.


●​ linear: Constant speed throughout.
●​ ease-in: Starts slow, then speeds up.
●​ ease-out: Starts fast, then slows down.
●​ ease-in-out: Slow at the start and end, faster in the middle.

These components are used in combination to define transition. For example:

Transition:transition-property transition-duration transition timing function


transition delay;
Here’s a button that changes its color and grows larger when you hover over it:

<button>Hover Me!</button>

css

.button {

padding: 10px 20px;

background-color: #4CAF50;

color: white;

border: none;

transition: background-color 0.3s ease 0.2s;transform 0.5s ease-in-out 0.2s

.smooth-button:hover {

background-color: #45a049;

transform: scale(1.1);

In the output you can see that, when we hover over the button its color changes and
also it grows to 1,1 scale with 0.2sdelay. Like this we can add the transition to
many elements of our website to make it look interactive and attractive.

7.2 Keyframes and Creating Animations

Now, we have learnt about transition so next will learn animations.

What Are Animations?

Animations are like a movie for a web element. Instead of just one change,
animations allow you to define multiple stages of movement or appearance. For
example, a box can move up, down, or change color in a repeating cycle.

How to Use Keyframes


Animations use @keyframes to define the steps (or frames) of the animation. Each
step tells the browser what the element should look like at that point in time.

To use animation first we need to understand its key property

Key Properties of the animation Rule

animation-name​
Specifies the name of the keyframes to use for the animation.​
Example:​
animation-name: bounce;

animation-duration​
Defines how long the animation will take to complete one cycle. Use seconds (s) or
milliseconds (ms).

animation-delay​
Adds a delay before the animation starts.​
animation-iteration-count​
Determines how many times the animation will repeat. You can use numbers or
infinite for endless repetition.​
Example:​
animation-iteration-count: infinite;

animation-direction​
Controls the direction of the animation on each cycle. For example:normal,
reverse, alternate, alternate-reverse(alternates but with reverse direction)

animation-timing-function​
Defines the speed curve of the animation. Common values:ease, ease-in-out (same
as transition)

animation-fill-mode​
Specifies what styles should be applied before and after the animation.

○​ none (default): Resets to original styles after the animation.


○​ forwards: Keeps the final keyframe style after the animation ends.
○​ backwards: Applies the starting keyframe style during the delay.
○​ both: Applies both forwards and backwards.​
These properties may look too much but when we apply them, it will be easy. Let’s
understand with an example

Example: A Bouncing Box

Let’s create a box that looks like it’s bouncing up and down:

html

<div class="ball"></div>

Css

.ball {

width: 50px;

height: 50px;

background-color: red;

border-radius: 50%;

position: relative;

animation-name: bounce;

animation-duration: 2s;

animation-delay: 0.5s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: ease-in-out;

animation-fill-mode: both;

Now, we will define keyframes to make the browser understand how the object
will look at a particular step

@keyframes bounce {
0% {

transform: translateX(0);

50% {

transform: translateX(200px);

background-color: blue;

100% {

transform: translateX(0);

Here when the animation is 0% or 100% complete then the object will be at its
original position but when the animation is at 50% then it will translate (moves up
as X axis changes) 200px.

Now instead of writing too many lines for defining animation we can define it in a
single line too using shorthand property.

animation:name duration function-timing delay interaction direction;

For example:

animation: bounce 2s ease-in-out 0.5s infinite alternate;

So, in this way you can use animation to create interactive web pages.

Now that you’ve learned the basics, get creative! Try combining transitions and
animations to make your web designs even more exciting. In the next topic, we’ll
explore advanced techniques to make our website responsive and how to use them
in real-world projects.
Topic 8: Responsive Design

Responsive design ensures that your website looks great and works well on all
devices, including desktops, tablets, and smartphones. Let’s learn how to create
responsive layouts using media queries.

8.1 What Are Media Queries?

Media queries are a CSS technique used to apply styles based on the size and type
of the user’s device. They allow you to create different layouts for different screen
sizes, making your website adaptable and user-friendly.

8.2 Syntax of Media Queries

The basic syntax is:

css

@media (condition) {

For example:

css

@media (max-width: 768px) {

body {

font-size: 12px;

Like this we can provide styles for every screen size so that our website looks
responsive.
Conclusion:

Congratulations! You’ve completed the course and now have a solid understanding
of CSS basics, transitions, and animations. Here’s a quick summary of what we’ve
covered:

●​ CSS fundamentals like selectors, colors, borders, and spacing.


●​ Dynamic effects with transitions.
●​ Advanced interactivity through animations.

Now it’s your turn to get creative! Experiment with these concepts to build
engaging, interactive websites. Remember, CSS is all about enhancing user
experience, so keep practicing and exploring new techniques to make your designs
stand out.

Happy Coding!

You might also like