Advance CSS

Transform
The `transform` property in CSS is used to apply various visual transformations to an
element. It allows you to modify the position, size, and appearance of an element without
affecting the normal flow of the document. The `transform` property accepts a variety of
transformation functions that specify the desired changes.
Here are some important aspects of the `transform` property:
1. `translate()`: Moves an element along the X and Y axes. It takes two values: `translate(x,
y)`. Positive values move the element to the right and down, while negative values move
it to the left and up.
2. `rotate()`: Rotates an element clockwise around a fixed point. It takes one value:
`rotate(angle)`. The angle is specified in degrees, and positive values rotate the element
clockwise.
3. `scale()`: Scales an element in size along the X and Y axes. It takes two values: `scale(x,
y)`. Values less than 1 shrink the element, while values greater than 1 enlarge it. A value
of 1 maintains the original size.
4. `skew()`: Skews an element along the X and Y axes. It takes two values: `skew(x-angle,
y-angle)`. Positive values skew the element to the right or bottom, while negative values
skew it to the left or top.
5. `transform-origin`: Specifies the point around which transformations are applied. By
default, it is set to `center`, meaning transformations are applied around the center of the
element. You can adjust the value to control the origin point.
6. `transform-style`: Specifies whether child elements should preserve their 3D
transformations. The default value is `flat`, which applies transformations only to the
element itself. The value `preserve-3d` maintains the 3D transformations of child
elements.

2
Example usage of the `transform` property:
.box {

width: 200px;

height: 200px;

background-color: blue;

transform: translate(50px, 50px) rotate(45deg) scale(1.5);

transform-origin: top left;

In this example, the `.box` class sets the width, height, and background color of an
element. The `transform` property is used to apply multiple transformations:
- `translate(50px, 50px)` moves the element 50 pixels to the right and 50 pixels down.
- `rotate(45deg)` rotates the element 45 degrees clockwise.
- `scale(1.5)` scales the element to 1.5 times its original size.
The `transform-origin` property is set to `top left`, indicating that the transformations are
applied around the top left corner of the element.
By using the `transform` property with its various transformation functions, you can
achieve visually appealing effects, such as moving, rotating, scaling, and skewing
elements, giving your web page a more dynamic and interactive feel.

3
 Transition
The `transition` property in CSS allows you to smoothly animate the changes in property
values of an element over a specified duration. It provides a way to add visual effects and
transitions to elements when they change state or property values.
Here are some important aspects of the `transition` property:
1. `transition-property`: Specifies the property or properties to which the transition
effect should be applied. You can specify multiple properties separated by commas, such
as `transition-property: width, height;`.
2. `transition-duration`: Specifies the duration of the transition effect. It accepts a time
value, such as `transition-duration: 0.5s;`, where `s` stands for seconds and `ms` stands
for milliseconds.
3. `transition-timing-function`: Determines the speed curve or timing function of the
transition. It defines how the intermediate property values are calculated over time.
Common values include `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, and more. You
can also use custom cubic-bezier functions for more precise control.
4. `transition-delay`: Specifies a delay before the transition effect starts. It accepts a time
value similar to `transition-duration`, such as `transition-delay: 0.2s;`.
Example usage of the `transition` property:
.box {

width: 200px;

height: 200px;

background-color: blue;

transition-property: width, height;

transition-duration: 0.5s;

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

.box:hover {

width: 300px;

height: 300px;

In this example, the `.box` class defines the initial properties of an element, such as width,
height, and background color. The `transition-property` property specifies that the
transition effect should be applied to the `width` and `height` properties. The `transition-
duration` property sets the duration of the transition effect to 0.5 seconds. The
`transition-timing-function` property specifies that the transition should have an ease-in-
out timing function, meaning it starts slowly, accelerates, and then slows down at the end.

4
When hovering over the element (`.box:hover`), the width and height properties are
changed, triggering the transition effect. As a result, the element smoothly transitions
from its initial size to the new size defined in the `:hover` state.
By using the `transition` property, you can add subtle or eye-catching animations to your
elements, enhancing the user experience and adding a polished feel to your website or
application.

5
 Animation
The `animation` property in CSS allows you to create complex and customizable
animations for elements. It provides a way to define keyframes and specify various
animation-related properties to control the timing, duration, and behavior of the
animation.
Here are some important aspects of the `animation` property:
1. `animation-name`: Specifies the name of the keyframe animation you want to apply.
This should match the `@keyframes` rule defined elsewhere in your CSS.
2. `animation-duration`: Specifies the duration of the animation. It accepts a time value,
such as `animation-duration: 2s;`, where `s` stands for seconds and `ms` stands for
milliseconds.
3. `animation-timing-function`: Determines the speed curve or timing function of the
animation. It defines how the intermediate animation keyframes are calculated over time.
Common values include `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, and more.
Custom cubic-bezier functions can also be used.
4. `animation-delay`: Specifies a delay before the animation starts. It accepts a time value
similar to `animation-duration`, such as `animation-delay: 0.5s;`.
5. `animation-iteration-count`: Determines the number of times the animation should
repeat. Values can be a number (e.g., `animation-iteration-count: 3;`) or `infinite` for
endless repetition.
6. `animation-direction`: Specifies whether the animation should play in a forward
direction (`normal`), in reverse (`reverse`), alternate between forward and reverse
(`alternate`), or alternate between forward and reverse with each iteration (`alternate-
reverse`).
Example usage of the `animation` property:
.box {

width: 100px;

height: 100px;

background-color: red;

animation-name: slide;

animation-duration: 2s;

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

animation-delay: 1s;

animation-iteration-count: infinite;

animation-direction: alternate;

6
 @keyframes slide {

0% {

transform: translateX(0);

50% {

transform: translateX(200px);

100% {

transform: translateX(0);

In this example, the `.box` class defines the initial properties of an element, such as width,
height, and background color. The `animation-name` property specifies that the
animation called `slide` should be applied. The `animation-duration` property sets the
duration of the animation to 2 seconds. The `animation-timing-function` property
specifies an ease-in-out timing function, providing a smooth acceleration and
deceleration effect. The `animation-delay` property sets a delay of 1 second before the
animation starts. The `animation-iteration-count` property is set to `infinite`, causing the
animation to repeat indefinitely. Lastly, the `animation-direction` property is set to
`alternate`, which means the animation will play forward and then reverse with each
iteration.
The `@keyframes` rule defines the intermediate keyframe positions for the animation. In
this example, the `slide` animation moves the element horizontally by translating its X
position using the `translateX()` transform function. At the start (0% keyframe), the
element is at the original position (0 pixels). At the middle (50% keyframe), it moves to
the right by 200 pixels. At the end (100% keyframe), it returns to the original position (0
pixels).
By using the `animation` property and defining keyframes, you can create dynamic and
engaging animations on your website or application, enhancing the visual appeal and
interactivity for your users.

7
 CSS Filters
CSS filters are a powerful tool that can be used to apply visual effects to elements on a
web page. Filters can be used to change the color, brightness, contrast, blur, and other
properties of elements.
To use a CSS filter, simply add the filter property to the element you want to apply the
filter to. The value of the filter property is the name of the filter you want to apply, followed
by any parameters that the filter takes.
For example, the following CSS code will apply a blur filter to an image:
img {

filter: blur(5px);

This will blur the image by 5 pixels.

Here are some other examples of CSS filters:
• brightness(): Adjusts the brightness of an element.
• contrast(): Adjusts the contrast of an element.
• grayscale(): Converts an element to grayscale.
• hue-rotate(): Rotates the hue of an element.
• invert(): Inverts the colors of an element.
• sepia(): Converts an element to sepia.
CSS filters can be combined to create complex visual effects. For example, the following
CSS code will apply a blur filter and a sepia filter to an image:
img {

filter: blur(5px) sepia(100%);

This will blur the image by 5 pixels and then convert it to sepia.
CSS filters are a powerful tool that can be used to create stunning visual effects on your
web pages. By experimenting with different filters and combining them together, you can
create unique and interesting looks for your website.
Here are some additional tips for using CSS filters:
• CSS filters can be applied to any element on a web page, including images, text, and
even other elements that have already been filtered.
• CSS filters can be used to create both subtle and dramatic effects.
• CSS filters can be used to create unique and interesting looks for your website.

8
Example:
Here is a well-commented code example covering all CSS filters property:
/* CSS filters */

/* blur() */

.blur {

filter: blur(5px); /* Blurs the element by 5 pixels. */

/* brightness() */

.brightness {

filter: brightness(200%); /* Makes the element 2 times brighter. */

/* contrast() */

.contrast {

filter: contrast(150%); /* Increases the contrast of the element by 50%. */

/* drop-shadow() */

.drop-shadow {

filter: drop-shadow(10px 10px 5px black); /* Adds a drop shadow to the element.
*/

/* grayscale() */

.grayscale {

filter: grayscale(100%); /* Converts the element to grayscale. */

/* hue-rotate() */

.hue-rotate {

filter: hue-rotate(90deg); /* Rotates the hue of the element by 90 degrees. */

/* invert() */

.invert {

filter: invert(100%); /* Inverts the colors of the element. */

/* opacity() */

.opacity {

9
 filter: opacity(50%); /* Makes the element 50% transparent. */

/* saturate() */

.saturate {

filter: saturate(200%); /* Makes the element 2 times more saturated. */

/* sepia() */

.sepia {

filter: sepia(100%); /* Converts the element to sepia. */

/* url() */

.url {

filter: url(#my-filter); /* Applies a custom SVG filter to the element. */

This code example covers all of the CSS filters properties, but it is just a starting point. You
can experiment with different values and combinations of filters to create unique and
interesting effects.
Here are some examples of how to use the different CSS filters properties:
• blur() can be used to blur images, text, or other elements. This can be useful for
creating a soft focus effect or for making an element less distracting.
• brightness() can be used to make elements brighter or darker. This can be useful
for adjusting the brightness of an image or for making an element stand out more.
• contrast() can be used to increase or decrease the contrast of an element. This can
be useful for making an element more readable or for creating a more dramatic
effect.
• drop-shadow() can be used to add a drop shadow to an element. This can be useful
for making an element stand out more or for creating a more realistic effect.
• grayscale() can be used to convert an element to grayscale. This can be useful for
creating a black and white effect or for making an element less distracting.
• hue-rotate() can be used to rotate the hue of an element. This can be useful for
creating a different color palette or for making an element stand out more.
• invert() can be used to invert the colors of an element. This can be useful for
creating a negative image effect or for making an element less distracting.
• opacity() can be used to make an element more or less transparent. This can be
useful for fading in or out an element or for making an element less distracting.

10
• saturate() can be used to increase or decrease the saturation of an element. This
can be useful for making an element more or less vibrant.
• sepia() can be used to convert an element to sepia. This can be useful for creating
an old-fashioned effect or for making an element less distracting.
• url() can be used to apply a custom SVG filter to an element. This can be useful for
creating complex and unique effects.

11
 CSS Responsive
Responsive web design is an approach to building websites that ensures optimal viewing
and usability across different devices and screen sizes. The goal is to create a seamless
user experience by adapting the layout, design, and functionality of the website to suit the
specific device being used, whether it's a desktop computer, tablet, or smartphone.
Here are some important principles of responsive web design:
1. Fluid Grids: Instead of using fixed pixel-based layouts, responsive design relies on
fluid grids. These grids proportionally scale elements, allowing them to adjust
their size based on the screen width. This ensures that content can be easily
rearranged and reflowed to fit different devices.
2. Flexible Images: Images play a crucial role in web design, and responsive design
ensures that they adapt to different screen sizes. By using CSS techniques like max-
width: 100%, images can be made responsive and automatically scale down to fit
smaller screens without losing their aspect ratio.
3. Media Queries: Media queries are a fundamental part of responsive design. They
allow you to apply specific CSS styles based on the characteristics of the device or
browser being used. Media queries can target screen width, height, orientation,
resolution, and other properties, enabling you to customize the layout and
appearance of your website accordingly.
4. Mobile-First Approach: A mobile-first approach involves designing the website
primarily for mobile devices and then progressively enhancing it for larger
screens. This ensures that the website's core content and functionality are
optimized for smaller screens and gradually enhanced with additional features as
the screen size increases.
5. Responsive Typography: Typography plays a significant role in web design.
Responsive typography adjusts the font size, line height, and other typographic
properties based on the screen size. This ensures that text remains legible and
readable on different devices.
6. Breakpoints: Breakpoints are specific screen widths at which the layout and
design of the website change to accommodate different devices. By strategically
defining breakpoints using media queries, you can optimize the user experience
at various screen sizes.
7. Testing and Iteration: Responsive web design requires thorough testing across
different devices and screen sizes to ensure a consistent and optimal user
experience. It's essential to iterate and refine the design based on real-world
testing to address any issues or inconsistencies that may arise.
By following these principles, responsive web design allows your website to adapt and
provide an optimal user experience regardless of the device being used. It ensures that
your content is accessible and visually appealing, leading to better engagement and
satisfaction for your website visitors.

12
 Flexbox
Flexbox, also known as Flexible Box Layout, is a CSS module that provides a flexible way
to arrange and align elements within a container. It simplifies the process of creating
responsive and dynamic layouts by offering powerful alignment and distribution
capabilities. Here are the important properties associated with Flexbox:
1. `display: flex;`:
This property is applied to the container element and establishes a flex container. It
enables flex properties to be used on the container's children.
2. `flex-direction`:
It determines the direction of the flex items within the flex container. It can be set to
`row` (default), `row-reverse`, `column`, or `column-reverse` to change the flow of items
horizontally or vertically.
3. `justify-content`:
This property aligns flex items along the main axis (horizontal axis by default) of the flex
container. It controls how extra space is distributed or how items are positioned when
they don't occupy all the available space. Values include `flex-start` (default), `flex-end`,
`center`, `space-between`, and `space-around`.
4. `align-items`:
It aligns flex items along the cross axis (vertical axis by default) of the flex container. It
determines how items are positioned vertically when they don't fill the entire container.
Values include `flex-start`, `flex-end`, `center`, `baseline`, and `stretch` (default).
5. `flex-wrap`:
By default, flex items are displayed in a single line. The `flex-wrap` property allows items
to wrap onto multiple lines as necessary. Values include `nowrap` (default), `wrap`, and
`wrap-reverse`.
6. `align-content`:
This property defines how multiple lines of flex items are aligned within the flex
container when they wrap onto multiple lines. It affects the spacing between lines. Values
include `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `stretch`
(default).
7. `flex-grow`:
It specifies how flex items grow relative to each other if there's extra space available
along the main axis. By default, all items have a value of `0`, but you can assign a positive
value to make an item grow proportionally.

13
8. `flex-shrink`:
This property determines how flex items shrink if there's not enough space available
along the main axis. By default, all items have a value of `1`, which means they shrink
equally. You can assign a value of `0` to prevent an item from shrinking.
9. `flex-basis`:
It specifies the initial size of a flex item along the main axis before any remaining space
is distributed. It can be set to a specific length or percentage value.
10. `order`:
The `order` property determines the order in which flex items are displayed. By default,
all items have an order of `0`. You can assign positive or negative integer values to reorder
items.
These are some of the key properties associated with Flexbox. Using these properties in
combination, you can create flexible and responsive layouts that adapt to different screen
sizes and orientations. Flexbox provides a convenient and powerful way to achieve
complex alignment and distribution of elements within containers, making it a valuable
tool in modern web design.
Here's a well-commented example that demonstrates various concepts of Flexbox:
/* Flex container */

.container {

display: flex; /* Establishes flex container */

flex-direction: row; /* Items flow in a row (default) */

justify-content: space-between; /* Items are distributed with space between

them */

align-items: center; /* Items are vertically centered */

flex-wrap: wrap; /* Items can wrap onto multiple lines */

align-content: space-around; /* Lines are distributed with space around

them */

/* Flex items */

.item {

flex-grow: 1; /* Items can grow to fill available space */

flex-shrink: 0; /* Items won't shrink */

flex-basis: 200px; /* Initial width of each item */

order: 0; /* Initial order of items */

html

14
 <!-- HTML structure -->

<div class="container">

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

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

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

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

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

</div>

In this example, we have a flex container with the class `.container`. The container has
several flex items with the class `.item`. Let's break down the CSS properties and their
comments:
- `.container` properties:
- `display: flex;` establishes the container as a flex container.
- `flex-direction: row;` specifies that the items should flow in a row (from left to right).
- `justify-content: space-between;` distributes the items with space between them along
the main axis.
- `align-items: center;` vertically centers the items along the cross axis.
- `flex-wrap: wrap;` allows the items to wrap onto multiple lines if needed.
- `align-content: space-around;` distributes the lines of items with space around them.
- `.item` properties:
- `flex-grow: 1;` allows the items to grow and fill any available space along the main axis.
- `flex-shrink: 0;` prevents the items from shrinking if there's not enough space.
- `flex-basis: 200px;` sets the initial width of each item to 200 pixels.
- `order: 0;` specifies the initial order of the items. In this case, all items have the same
order.
The HTML structure consists of a parent container element with the class `.container`,
and within it, we have child elements with the class `.item`. You can add more items or
modify the content as needed.
With the provided CSS, the items will be displayed in a row, with equal spacing between
them. If the container width is insufficient, the items will wrap onto a new line. The lines
of items will be distributed with space around them, and the items themselves will grow
to fill any available space.

15
 Grid
CSS Grid is a powerful layout system that allows you to create complex and responsive
grid-based layouts with ease. It provides a two-dimensional grid structure that consists
of rows and columns, allowing you to precisely position and align elements on a webpage.
Here are some key points about CSS Grid:
1. Grid Container: To create a grid layout, you need to define a container element as a
grid container by applying the `display: grid;` property. This establishes a new grid
formatting context for its direct children.
2. Grid Tracks: The grid is divided into tracks, which are the rows and columns of the
grid. You can define the size and number of tracks using the `grid-template-rows` and
`grid-template-columns` properties.
3. Grid Items: The elements inside the grid container are referred to as grid items. By
default, grid items occupy a single cell of the grid. You can position and span grid items
across multiple rows and columns using properties like `grid-row-start`, `grid-column-
end`, etc.
4. Grid Lines: Grid lines refer to the horizontal and vertical lines that form the grid. They
act as references for positioning and aligning grid items. You can refer to grid lines using
line numbers or names.
5. Grid Gaps: Grid gaps are the spaces between grid cells. You can specify the size of the
gap using the `grid-gap` or `gap` properties, which define the gap between rows and
columns respectively.
6. Grid Areas: Grid areas allow you to name and reference specific areas of the grid. By
assigning names to certain cells or groups of cells, you can easily position grid items in
those areas using the `grid-area` property.
7. Grid Responsive Layouts: CSS Grid makes it easy to create responsive layouts. You can
use media queries to adjust the grid structure, track sizes, or reposition grid items based
on different screen sizes.
Example usage of CSS Grid:
.container {

display: grid;

grid-template-columns: 1fr 2fr 1fr;

grid-template-rows: auto 200px;

grid-gap: 20px;

.item {

grid-area: auto / span 2;

16
In this example, the `.container` class represents the grid container element. It has three
columns defined using `grid-template-columns`, where the first and third columns take
up one fraction of the available space (`1fr`), and the second column takes up two
fractions (`2fr`). The grid container has two rows, the first row adjusts its height
automatically based on its content (`auto`), and the second row has a fixed height of 200
pixels (`200px`). The `grid-gap` property creates a 20-pixel gap between grid cells.
The `.item` class represents a grid item. It uses the `grid-area` property to position the
item automatically in the grid and spans across two columns using `span 2`.
CSS Grid provides a flexible and intuitive way to create responsive and dynamic layouts.
It offers precise control over the positioning and alignment of elements, making it a
powerful tool for building modern and visually appealing websites.

FR Unit
In CSS Grid, the "fr" unit stands for "fractional unit" and is used to allocate available space
within a grid container. It is a flexible unit that allows you to distribute the available space
among grid tracks (rows or columns) based on their proportion.
The `fr` unit works by dividing the available space into fractions. The value of `fr`
represents the proportion of space that a grid track should occupy relative to other tracks
with different `fr` values.
Here's an example to illustrate the usage of `fr` unit:
.grid-container {

display: grid;

grid-template-columns: 1fr 2fr 1fr;

In this example, the grid container with class `.grid-container` has three columns defined
using `grid-template-columns`. The first and third columns are set to `1fr`, while the
second column is set to `2fr`.
This means that the available horizontal space will be divided into four fractions: one
fraction for the first column, two fractions for the second column, and one fraction for the
third column. The second column will occupy twice as much space as the other columns.
By using `fr`, you can create responsive and flexible grid layouts that adapt to the available
space. If the grid container is resized, the columns with `fr` units will automatically adjust
their widths proportionally, ensuring a balanced distribution of space.
You can also use `fr` in combination with other length units or the `auto` keyword to create
more complex grid layouts. For example, `grid-template-columns: 1fr auto 100px` would
allocate one fraction of the available space to the first column, allow the second column
to adjust its width based on content (`auto`), and set the third column to a fixed width of
`100px`.

17
The `fr` unit is a powerful tool in CSS Grid that provides flexibility and responsiveness to
your grid layouts, allowing them to adapt and scale based on the available space and
content.
In CSS Grid, the `grid-template-areas` property is used to define named grid areas within
a grid container. It allows you to visually map out and arrange your grid items by assigning
them to specific areas on the grid using custom names.

Justify-Content & Align-Content

The `justify-content` and `align-content` properties in CSS are used in CSS Grid to control
the alignment and positioning of grid tracks (rows or columns) within the grid container
when there is extra space available.
justify-content:
The `justify-content` property is used to align and distribute the grid tracks horizontally
(along the main axis) within the grid container. It applies when there is extra space left
over after all the grid tracks have been placed.
Example usage:
.grid-container {

display: grid;

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

justify-content: space-between;

In this example, the `justify-content: space-between` property is used to distribute the

grid tracks horizontally, creating equal space between the columns. This will push the first
column to the start of the container and the last column to the end, with equal spacing
between the columns.
Other possible values for `justify-content` include:
- `flex-start`: Aligns the grid tracks to the start of the container.
- `flex-end`: Aligns the grid tracks to the end of the container.
- `center`: Centers the grid tracks horizontally within the container.
- `space-around`: Distributes the space evenly around the grid tracks.
- `space-evenly`: Distributes the space evenly between and around the grid tracks.

18
align-content:
The `align-content` property is used to align and distribute the grid tracks vertically
(along the cross-axis) within the grid container. It applies when there is extra space left
over after all the grid tracks have been placed.
Example usage:
.grid-container {

display: grid;

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

align-content: space-around;

In this example, the `align-content: space-around` property is used to distribute the grid
tracks vertically, creating equal space around the rows. This will push the first row to the
start of the container and the last row to the end, with equal spacing around the rows.
Other possible values for `align-content` include:
- `flex-start`: Aligns the grid tracks to the start of the container.
- `flex-end`: Aligns the grid tracks to the end of the container.
- `center`: Centers the grid tracks vertically within the container.
- `space-between`: Distributes the space evenly between the grid tracks.
- `space-evenly`: Distributes the space evenly between and around the grid tracks.
Both `justify-content` and `align-content` are useful when there is extra space available
within the grid container and you want to control how the tracks are aligned or
distributed. They allow you to create visually pleasing and balanced grid layouts.

Grid-template-areas:
1. Define the grid template areas:
- Within the grid container, use the `grid-template-areas` property to define the layout
of your grid areas.
- Each row is represented as a string, and the cells within the row are defined by custom
names or periods (.) for empty cells.
- Rows are separated by spaces or new lines
Example:
.grid-container {

display: grid;

grid-template-areas:

19
 "header header header"

"sidebar main main"

"footer footer footer";

In this example, the grid container with class `.grid-container` has three rows and three
columns.
- The first row has three cells named "header" that span across all three columns.
- The second row has a cell named "sidebar" on the first column, and two cells named
"main" that span the second and third columns.
- The third row has three cells named "footer" that span across all three columns.
2. Assign grid areas to grid items:
- Once you have defined the grid template areas, assign these area names to your grid
items using the `grid-area` property.
Example:
.header {

grid-area: header;

.sidebar {

grid-area: sidebar;

.main {

grid-area: main;

.footer {

grid-area: footer;

In this example, we have assigned the area names to each grid item using the `grid-area`
property. Each item will be placed within its respective area on the grid based on the
names assigned
By using `grid-template-areas`, you can create complex grid layouts with named areas,
making it easier to understand and visualize the structure of your grid. It provides a
convenient way to arrange grid items and helps with responsive design by allowing you
to rearrange or adjust the size of the grid areas as needed
Note: When using `grid-template-areas`, it's important to ensure that the number of cells
defined in the grid template matches the number of grid items in your layout.

20
Grid Column Start, Grid Column End, Grid Row Start, Grid Row End & Grid Areas
Both `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end` and `grid-
template-areas` are used to define the placement and sizing of grid items within a grid
layout. However, they have different approaches and use cases.
1. `grid-column-start` and `grid-column-end`, `grid-row-start`, `grid-row-end`:
- These properties provide a more precise and explicit way to define the starting and
ending lines of a grid item along the grid's column and row axes.
- You can specify the grid lines using numeric line numbers or named lines.
- They are useful when you want fine-grained control over the placement of individual
grid items within the grid, especially when the grid structure is not uniform or when you
need to span items across multiple columns or rows.
2. `grid-template-areas`:
- This property allows you to define named grid areas within a grid container.
- You visually map out and arrange the grid items by assigning them to specific areas on
the grid using custom names.
- It provides a higher-level, more declarative approach to define the layout structure.
- It's particularly useful when you have a repetitive or symmetrical grid structure, such
as a grid with header, sidebar, main content, and footer sections, where it's easier to define
and maintain the layout using names rather than individual line numbers.
While both approaches can be used to achieve similar layouts, `grid-template-areas`
offers a more visual and intuitive way to define the grid structure using named areas. It's
especially handy when the grid layout has a predictable and repetitive pattern. On the
other hand, `grid-column-start`, `grid-column-end`, `grid-row-start`, and `grid-row-end`
provide a more precise control over the placement and spanning of grid items, which is
beneficial when you need more flexibility or when the grid structure is more complex.
It's worth noting that `grid-template-areas` and `grid-column-start`, `grid-column-end`,
`grid-row-start`, `grid-row-end` can be used together to create more sophisticated grid
layouts, combining the visual representation provided by `grid-template-areas` with the
precise positioning capabilities of the individual line-based properties.

21
Need of Grid
Both CSS Grid and Flexbox are powerful layout tools in CSS, but they have different
purposes and strengths. Here's why we need CSS Grid even though we have Flexbox:
1. Two-Dimensional Layouts: CSS Grid is specifically designed for creating complex two-
dimensional grid layouts, where items can be positioned both horizontally and vertically.
It allows you to define rows and columns independently and position items anywhere
within the grid. This makes it ideal for creating grid-based designs with multiple rows
and columns, such as magazine-style layouts or advanced grid structures.
2. Grid Track Sizing: CSS Grid provides precise control over grid track sizing. You can
define fixed sizes for rows and columns, use flexible units like percentages or `fr` units, or
even let the grid automatically size tracks based on content. This level of control is
especially useful when you need to create responsive layouts that adapt to different
screen sizes or complex grid structures with varying track sizes.
3. Grid Alignment and Placement: CSS Grid offers powerful alignment and placement
capabilities. You can align items both horizontally and vertically within their grid cells,
and you have control over how items are distributed and spaced within the grid. Grid also
provides alignment control at the container level, allowing you to align and distribute
rows and columns as a whole.
4. Complex Nesting: CSS Grid supports complex nesting of grids within grids. You can
create hierarchical grid structures, where grids are nested inside each other to create
intricate layouts. This nesting capability is particularly beneficial when you have more
complex design requirements that go beyond the capabilities of a single Flexbox
container.
5. Tabular Data Layouts: CSS Grid is well-suited for creating tabular data layouts. It
allows you to create grids that resemble traditional HTML tables, making it easier to
display and manage tabular data effectively. Grid provides features like fixed headers or
footers, sticky columns, and easy control over cell alignment and sizing.
While Flexbox is excellent for creating one-dimensional layouts, such as navigation menus
or flexible content containers, CSS Grid excels at creating more complex, two-dimensional
layouts with advanced control over alignment, placement, and sizing. By using both Grid
and Flexbox together, you can leverage their respective strengths to create versatile and
robust layouts for different parts of your web page or application.

22
 Media Queries
Media queries in CSS are used to apply different styles and layouts based on the
characteristics of the device or viewport where the web page is being displayed. They
allow you to create responsive designs that adapt to different screen sizes, resolutions,
and devices.
Here are some key points about media queries:
1. Syntax: Media queries are written using the `@media` rule, followed by a media type
or media feature, and enclosed within curly braces `{}`. For example:
@media screen and (max-width: 600px) {

/* CSS styles for screens with a maximum width of 600px */

2. Media Types: Media types define the category of the device or output medium.
Common media types include `screen` (for computer screens), `print` (for printers), `all`
(default for all devices), `speech` (for speech synthesizers), and more.
3. Media Features: Media features describe specific characteristics of the device or
viewport, such as width, height, orientation, resolution, aspect ratio, and more. Media
features allow you to target specific device capabilities and adjust the styles accordingly.
For example:
@media (max-width: 600px) {

/* CSS styles for a maximum viewport width of 600px */

4. Logical Operators: Media queries can use logical operators like `and`, `or`, and `not` to
combine multiple conditions. For example:
@media (min-width: 768px) and (orientation: landscape) {

/* CSS styles for devices with a minimum width of 768px and landscape
orientation */

5. Breakpoints: Media queries are commonly used in responsive web design to define
breakpoints at specific screen sizes where the layout and styles should change to
accommodate different devices. By adjusting styles at different breakpoints, you can
create a fluid and adaptable design that looks and functions well across various devices.
6. Mobile-first Approach: It is recommended to start with styles for mobile devices and
then use media queries to progressively enhance the design for larger screens. This
approach ensures that the design is optimized for smaller screens by default and then
adjusts as the screen size increases.

23
By utilizing media queries effectively, you can create responsive designs that gracefully
adapt to different devices, ensuring a consistent and user-friendly experience across
various screen sizes and devices.
Here's an example of using media queries in HTML and CSS to create a responsive layout
that adapts to different screen sizes:
<!DOCTYPE html>

<html>

<head>

<title>Responsive Layout Example</title>

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

</head>

<body>

<header>

<h1>Responsive Layout Example</h1>

</header>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<main>

<section>

<h2>About Us</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit,
tellus eu rhoncus tincidunt, urna tellus sollicitudin libero.</p>

</section>

<section>

<h2>Our Services</h2>

<ul>

<li>Web Design</li>

<li>Graphic Design</li>

<li>SEO</li>

24
 <li>Social Media Marketing</li>

</ul>

</section>

</main>

<footer>

<p>&copy; 2023 Your Website. All rights reserved.</p>

</footer>

</body>

</html>

Style.css
/* Common styles for all screen sizes */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

header, nav, main, footer {

padding: 20px;

header {

background-color: #333;

color: #fff;

nav ul {

list-style-type: none;

padding: 0;

nav li {

display: inline-block;

margin-right: 10px;

nav a {

color: #333;

25
 text-decoration: none;

section {

margin-bottom: 20px;

h2 {

color: #333;

footer {

background-color: #333;

color: #fff;

text-align: center;

/* Media queries for different screen sizes */

@media screen and (max-width: 600px) {

/* Styles for screens with a maximum width of 600px */

nav li {

display: block;

margin-bottom: 10px;

In this example, the HTML structure consists of a header, navigation bar, main content,
and footer. The CSS file (styles.css) contains common styles for all screen sizes, and a
media query is used to apply specific styles for screens with a maximum width of 600px.
Inside the media query, the navigation list items (nav li) are modified to be displayed as
block elements and have a bottom margin, allowing them to stack vertically. This ensures
that the navigation menu is more accessible and readable on smaller screens.
By using media queries, the layout and styles of the webpage can adapt and change based
on the screen size, providing a better user experience across different device.

26
 Exercises:
Exercise.1: Implementing marquee tag using animation.
Solution: Yes, we can implement a marquee-like effect using CSS animations. CSS
animations allow you to animate properties of elements over a specified duration, which
can be used to create the scrolling effect similar to the `<marquee>` element.
Here's an example of implementing a marquee-like effect using CSS animations:
<!DOCTYPE html>

<html>

<head>

<title>Marquee-like Animation</title>

<style>

.marquee {

width: 300px;

overflow: hidden;

white-space: nowrap;

animation: marquee 10s linear infinite;

@keyframes marquee {

0% {

transform: translateX(100%);

100% {

transform: translateX(-100%);

</style>

</head>

<body>

<div class="marquee">

<span>This is a sample text that will scroll horizontally.</span>

</div>

</body>

</html>

27
In this example, we create a `<div>` element with a class of "marquee" that will contain
the content we want to scroll. We set the width of the `<div>` to define the visible area for
the scrolling text. The `overflow` property is set to "hidden" to hide any content that
overflows beyond the defined width. The `white-space` property is set to "nowrap" to
ensure the text stays on a single line without wrapping.
The animation is defined using the `@keyframes` rule. The animation is named "marquee"
and will last for 10 seconds (`10s`). The `linear` keyword specifies a linear timing function
for the animation. The `infinite` keyword indicates that the animation will repeat
indefinitely.
Inside the `@keyframes` rule, we define the animation's keyframes. At `0%`, the text is
initially positioned at `100%` of the container's width, which pushes it off the right side
of the visible area. At `100%`, the text is translated to `-100%` of the container's width,
causing it to scroll from right to left.
By adjusting the animation properties, such as the duration, timing function, and
keyframe positions, you can customize the marquee-like effect to meet your specific
needs.

28
Exercise:2

29