Scribd
Upload
47 views138 pages

CSS Notes

Uploaded by

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

CSS Notes

Uploaded by

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

What is IDE

1. IDE stands for Integrated


Development
Environment.
2. Software suite that
consolidates basic
tools
required for
software
development.
3. Central hub for
coding,
finding problems,
@featurecod +91 9548457683
and testing.
Need of IDE
1. Streamlines
development.
2. Increases productivity.
3. Simplifies complex
tasks.
4. Offers a unified
workspace.
5. IDE Features
1. Code
Autocomple
te
@featurecod +91 9548457683
2. Syntax
Installation & Setup

1. Search VS
Code

@featurecod +91 9548457683


VsCode Extensions

1. Live
Server
2. Prettier

@featurecod +91 9548457683


FrontEnd / BackEnd /
FullStack

Client Side / Server


Front- End Side Back-
Web End
Development

@featurecod Full
Role of Browser

1. Displays Web Page: Turns HTML code into


what you see on screen.
2. User Clicks: Helps you interact with the web
page.
3. Updates Content: Allows changes to the page
using JavaScript.
4. Loads Files: Gets HTML, images, etc., from
@featurecod +91 9548457683
the server.
HTML
(Hypertext Markup
Language)

1. Structure: Sets up
the layout.
2. Content: Adds
text, images,
links.
3. Tags: Uses
elements like
<p>, <a>.
4. Hierarchy:
@featurecod +91 9548457683
CSS
(Cascading Style
Sheets)

1. Style: Sets the look and


feel.
2. Colors & Fonts:
Customizes text and
background.
3. Layout: Controls position
and size.
4. Selectors: Targets
specific
@featurecod HTML +91 9548457683
JS
(Java Script)

1. JavaScript has nothing to


do with Java
2. Actions: Enables
interactivity.
3. Updates: Alters page
without reloading.
4. Events: Responds to user
actions.
5. Data: Fetches and sends info
to server.
@featurecod +91 9548457683
Importance of CSS

Premium Premium Premium


Website Brand Customer

@featurecod High Salary +91 9548457683


Course
Levels
Level 1 CSS Basics
Level 2 Color System and
Background Level 3 Text
Properties
Level 4 Box Model CSS
Level 5 Display &
Position
Level 6 Flexbox, Grid &
@featurecod +91 9548457683
Level 1
CSS Basics
1. Basic Syntax
2. Color Property
3. Including Styles
4. HTML Refresher
5. Comments
6. MDN
Documentation
7. Browser Tools
8. Selectors
@featurecod +91 9548457683
1. Basic Syntax

• Selector: The HTML element that you want to style.


• Property: The attribute you want to change (like font,
color,
etc.).
• @featurecod
Value: The specific style you want
+91to9548457683
apply to the property
2. Color Property

• Definition: The CSS color property defines the


text color or foreground color in an HTML
element.
• @featurecod +91 9548457683
Enhancement: Use it to emphasize
3. Including Styles (Inline
Styling)

• Direct Application: Apply styles directly to HTML elements using


the style attribute.
• One-off Changes: Ideal for single, unique style alterations.
• Can Be Cluttered: May lead to cluttered HTML if used
extensively.
• Limited Reusability: Reduces the reusability of CSS rules in larger
@featurecod
projects. +91 9548457683
3. Including Styles (Internal
Styling)

• Embedded CSS: Styles are placed within <style> tags in the


HTML head section.
• Cleaner than Inline: More organized compared to inline
styles.
• Reusable Styles: Allows for some reuse of styles across the
@featurecod +91 9548457683
page.
3. Including Styles (External
Styling)

• Separate CSS File: Stores styles in a separate .css file, linked to HTML.
• Reusable: Enables style reuse across multiple webpages.
• Link in HTML: Use the <link> tag within the <head> section to link the CSS.
• Relative or Absolute Path: The href attribute can contain a relative or
absolute path to the CSS file.
@featurecod +91 9548457683
4. HTML Refresher (Tags &
Attributes)

1. Elements that are used 1. Provides additional


to create a website are information about
called HTML Tags. elements
2. Tags can contain 2. Use name=value format
content or other HTML
tags.
3. Define elements like
text,
@featurecod +91 9548457683
4. HTML Refresher
1.Structure Understanding: Helps in
(DOM) understanding the hierarchical structure of a
webpage, crucial for applying targeted CSS styles.
2.Dynamic Styling: Enables learning about
dynamic styling, allowing for real-time changes
and interactivity through CSS.

@featurecod +91 9548457683


5 Comments
1. Used to add notes in
HTML or CSS code
2. Not displayed on the web
page
3. Syntax: <!-- Comment
here -->
4. Helpful for code
organization
5. Can be multi-line or
single-line
@featurecod +91 9548457683
6.MDN
Documentation

1. For Official resource for CSS,


visit
https://developer.mozilla.org/
2. Includes examples for real-
world use
@featurecod +91 9548457683
7.Browser Tools (Inspect
element)
1. Allows real-time editing of
HTML/CSS
2. Useful for debugging and testing
3. Shows element hierarchy and
layout
4. Highlights selected elements on
page

@featurecod +91 9548457683


7.Browser Tools (Changes happening at
Client)
1. Changes made are
temporary
2. Affect only the current
session
3. Not saved to the server
4. Reset upon page reload
5. Useful for testing, not
permanent fixes

Like: If you change the


@featurecod +91 9548457683
7.Browser Tools (CSS Specific
element)
• Styles Panel
• Box Model
• Changes happening only at
client

@featurecod +91 9548457683


7.Browser Tools (Source tab)

@featurecod +91 9548457683


7.Browser Tools (Network tab)

@featurecod +91 9548457683


7.Browser Tools (Performance
tab)

@featurecod +91 9548457683


8. Selectors (Element selector)

• Targets Elements: Selects HTML elements based on their tag name.


• Syntax: Simply use the element's name
• Uniform Styling: Helps in applying consistent styles to all instances.
• Ease of Use: Straightforward and easy to implement for basic styling.
@featurecod +91 9548457683
8. Selectors (Universal selector)

• Matches All: Targets and styles all elements on a webpage.


• Syntax: Utilized as an asterisk (*).
• Resets Styles: Commonly used to reset margins and paddings globally.
• Broad Styling: Useful for setting universal attributes like font or color.
• Usage Caution: Can cause style conflicts+91
@featurecod due to its wide-reaching effects.
9548457683
8. Selectors (id & class
property)

• ID Property: Assigns a unique identifier to a single HTML element.


• Class Property: Allows grouping of multiple HTML elements to style
them collectively.
• Reusable Classes: Class properties can be reused across different
elements for consistent styling.
• Specificity and Targeting: Both properties assist in targeting
specific elements or groups of elements for+91
@featurecod precise styling.
9548457683
8. Selectors (Id selector)

• Unique Identifier: Targets a specific element with a unique ID


attribute.
• Syntax: Uses the hash (#) symbol
• Single Use: Each ID should be used once per page for
uniqueness.
@featurecod +91 9548457683
• Specific Targeting: Ideal for styling individual, distinct
8. Selectors (Class selector)

• Group Styling: Allows styling of multiple elements grouped under a


class.
• Syntax: Utilizes the dot (.) symbol.
• Reusable: Can be used on multiple elements for consistent styling.
• @featurecod
Versatility: Ideal for applying styles to+91
a category
9548457683of elements.
8. Selectors (Group selector)

• Multiple Elements: Styles multiple elements simultaneously.


• Syntax: Separates selectors with commas.
• Efficiency: Reduces code redundancy and saves time.
@featurecod +91 9548457683
8. Selectors (Descendant
selector)

• Nested Targeting: Styles elements nested within a specified element.


• Syntax: Separate selectors with spaces.
• Hierarchy-Based: Allows styling based on the hierarchical structure of HTML.
• Specific Styling: Facilitates more targeted and specific styling of elements.
@featurecod +91 9548457683
Level 1
Revision
1. Basic Syntax CSS Basics

2. Color Property
3. Including Styles
4. HTML Refresher
5. Comments
6. MDN
Documentation
7. Browser Tools
8. Selectors
@featurecod +91 9548457683
Practice Set Level 1
CSS Basics

• Create a heading and set the text color


red.
• Create a div with id #heading, include
CSS using all 3 ways line, style tag and
external, and observe priority.
• Add comments to your CSS class
• Create a div, paragraph and heading and
use id Selector, element selector and class
selector for them.
• Create two divs with id first and second
and define color for both using group
selector.
@featurecod +91 9548457683
Level 2
Color System & Background

9. Background-Color
Property
10. Color System

11. Absolute Units

12. Height & Width Property

13. Background-Image

Property
@featurecod +91 9548457683
9. Background Color

• Definition: Sets the background color of an element.


• Syntax: Utilized as background-color: color;
• Visual Appeal: Enhances the visual appeal and contrast
of webpage elements.
@featurecod +91 9548457683
10. Color System (Color
Theory) • RGB Model: Creates colors by mixing Red (R),
Green (G), and Blue (B) light sources.
• Additive Model: More light means increased
brightness.
• Primary Colors: R, G, and B are the
foundational colors.
• White & Black: All combined yield white;
absence equals black.
• Color Depth: Allows for millions of color
variations.

@featurecod +91 9548457683


10. Color System (color picker)

@featurecod +91 9548457683


10. Color System (RGB Color
Model)

• Three Channels: Consists of Red (R), Green (G), and Blue (B)
channels to create a variety of colors.
• Syntax: Utilized as rgb(r, g, b) where r, g, and b are values
between 0 and 255.
@featurecod +91 9548457683
10. Color System (RGB Color
Model)

@featurecod +91 9548457683


10. Color System (HEX Color
• HexadecimalModel)
Codes: Represents colors using
hexadecimal values, consisting of 6 digits
combined from numbers and letters (A-F).
• Syntax: Written as #RRGGBB
• Easy Color Matching: Facilitates easy color
matching with graphic design tools and
branding colors.
• Web Standards: Widely supported and a
common standard for defining colors in web
design

@featurecod +91 9548457683


10. Color System (HEX Color
Model)

@featurecod +91 9548457683


10. Color System (Alpha
• RGBA: RGB's extension,
Channel)includes alpha for opacity control (0-1 range).
• Transparency Control: Facilitates the adjustment of transparency levels in
colors.
• Visual Effects: Enables the creation of visual effects like shadows and
overlays.
• Layering: Assists in layering elements with varying degrees of visibility.

@featurecod +91 9548457683


10. Color System (Alpha
Channel)

@featurecod +91 9548457683


11. Absolute Units
• Definition: Pixels (px) are fixed-size units,
representing a dot on a computer screen.
• Precision: Allows for precise control over
element dimensions.
• Graphics & Web Design: Commonly used in
graphics and web design for setting font sizes,
margins, and more.
• Cross-Browser Consistency: Provides
consistency across different browsers.
• High-DPI Displays: Can vary in appearance on
high-DPI (dots per inch) displays.

@featurecod +91 9548457683


12. Height & Width
Property

• Dimensions Control: Used to specify the height and width of elements.


• Unit Variability: Can use units like pixels (px)
• Box Model Component: Influences padding, border, and margin.
• Min and Max Values: Can utilize min-height, max-height, min-width,
and max-width to set restrictions on dimensions.
@featurecod +91 9548457683
13. Background image
Property
• Usage: Adds an image as a background to elements.
• Syntax: Defined using background-image:
url('path/to/image’);.
• Repetition: Control image repetition using
background-repeat.
• Positioning: Adjust image position using background-
position.
• Size Control: Manipulate image size using
background-size.
• Background-Attachment: Sets whether the
background image scrolls with the element or
remains fixed.
• Shorthand (color, image, repeat, attachment,
position)
@featurecod +91 9548457683
14. Visibility Property

• Usage: Controls the visibility of elements without changing the layout.


• Values: Can take visible, hidden, or collapse as values.
• Space Occupancy: Even when hidden, the element occupies space.
• Interactivity: Hidden elements are not accessible to user interactions.
@featurecod +91 9548457683
Level 2
Revision
Color System & Background
9. Background-Color
Property
10. Color System

11. Absolute Units

12. Height & Width Property

13. Background-Image

Property
@featurecod +91 9548457683
Practice Set Level 2
Color System & Background

• Create a div bar with text and


background color with opacity
• Change the color of the main
content
• Add background image to one
div
• Use background shorthand
property

@featurecod +91 9548457683


Level 3
Text Properties

15. Text-Align Property


16. Text-Decoration

Property
17. Text-Transform

Property
18. Line-Height Property

19. Font Properties


@featurecod +91 9548457683
15.Text-Align Property

• Usage: Controls the horizontal alignment of text within an


element.
• Values: Can take values like left, right, center, and justify.
• Visual Appeal: Enhances readability and visual appeal by
organizing text neatly.
@featurecod +91 9548457683
16. Text-Decoration
Property

• Usage: Modifies the appearance of inline text.


• Values: Options include none, underline, overline, and line-through.
• Hyperlinks: Commonly used to remove underlines from hyperlinks for
aesthetic purposes.
@featurecod +91 9548457683
16. Text-Decoration Property
(style)

@featurecod +91 9548457683


16. Text-Decoration Property
(color)

@featurecod +91 9548457683


17. Text-Transform Property

• Usage: Controls the capitalization of text.


• Common Values: Can be uppercase, lowercase, or capitalize.
• None Value: none value disables text transformations.
• Typography: Useful for setting text style and improving typography in web design.
@featurecod +91 9548457683
18. Line Height

• Usage: Adjusts the amount of space above and below inline elements.
• Readability: Enhances text readability by preventing overcrowding.
• Vertical Spacing: Useful for controlling vertical spacing between lines
of text.
@featurecod +91 9548457683
19. Font Property (font-size)

• Usage: Sets the size of the font in web content.


• Responsiveness: Helps in creating responsive designs adaptable to various screen
sizes.
• Readability: Crucial for ensuring the readability of text on websites.
@featurecod +91 9548457683
19. Font Property (font-weight)

• Usage: Defines the thickness of characters in a font.


• Values: Can take values like normal, bold, bolder, or numeric values (100 to 900).
• Text Emphasis: Utilized to emphasize text or create contrast between text elements.
@featurecod +91 9548457683
19. Font Property (font-style)

• Usage: Controls the style of the font, mainly affecting its inclination.
• Values: Common values are normal, italic, and oblique.
• Text Formatting: Useful for highlighting or distinguishing certain text
segments.
@featurecod +91 9548457683
20. Font
Family
• Usage: Defines which font should be used for
text within an element.
• Specific Fonts: Common choices include Arial,
Segoe UI, Times New Roman, and others.
• Fallback Mechanism: Incorporate a fallback
font family in case the primary font is
unavailable; helps in maintaining the site
aesthetics.
• Web Safe Fonts: Employ web-safe fonts to
ensure consistency across different browsers
and operating systems.
• Generic Family: Always end the font family
list
with a generic family like serif or sans-serif as a
last resort option.
@featurecod +91 9548457683
20. Font Family

@featurecod +91 9548457683


21. Icons using Fonts

Using
https://fontawesome.com
@featurecod +91 9548457683
Level 3 Revision
Text Properties

15. Text-Align Property


16. Text-Decoration

Property
17. Text-Transform

Property
18. Line-Height Property

19. Font Properties

20. Font Family


@featurecod +91 9548457683
Practice Set Level 3
Text Properties

• Create an Heading at the centre and


make capitalized
• Use Font family for the whole page
to TimeNewRoman
• Create one div inside another div.
Set id and text outer to outer div,
set id and text inner to inner div.
Set outer div text size to 25px.
Set inner to 10px.
• Use icons from fontawesome.com and
use icons of LinkedIn and GitHub

@featurecod +91 9548457683


Level 4
Box Model

22. What is Box


Model
23. Padding

Property
24. Margin Property

25. Border Property

@featurecod +91 9548457683


22. What is Box
fमठाई भ'डार पे चलो
• Model
Core Concept: Central concept in CSS that
outlines the design and layout of elements on
the web page.
• Components: Consists of four main
components - margin, border, padding, and
content.
• Margin: The space outside the border,
separating the element from others.
• Border: The outline that encapsulates the
padding and content.
• Padding: The space between the border and
the actual content, providing a buffer.
• Content: The innermost layer where text,
images, or other media are housed.
@featurecod +91 9548457683
23. Padding Property

• Usage: Defines the space between the content of an element and its
border.
• Individual Sides: Allows setting padding for individual sides using
padding-top, padding-right, padding-bottom, and padding-left.
• Shorthand: Can use shorthand property padding to set all sides at
@featurecod
once, e.g., padding: 10px 20px 10px 20px.+91 9548457683
24. Margin Property

• Functionality: Sets the space around elements, separating them from others.
• Individual Sides: Customizable for top, right, bottom, and left sides.
• Shorthand: Allows quick setup, e.g., margin: 10px 20px. (clockwise)
• Auto Value: Can be used for central alignment with auto value.
@featurecod +91 9548457683
24. Border Property

• Usage: Creates an outline around HTML elements.


• Components: Defined by width, style, and color attributes.
• Styles: Includes options like solid, dashed, and dotted.
• Shorthand: Can set attributes at once, e.g.,+91
@featurecod border: 2px solid black.
9548457683
24. Border Property (border
radius)

• Usage: Used to create rounded corners for elements.


• Individual Corners: Allows setting different radii for each corner.
• Shorthand: e.g., border-radius: 10px 20px.
@featurecod +91 9548457683
24. Border Property (box
sizing)

@featurecod +91 9548457683


Level 4 Revision
Box Model

22. What is Box


Model
23. Padding

Property
24. Margin Property

25. Border Property

@featurecod +91 9548457683


Practice Set Level 4
Box Model

-Create a div with height and width 200px


and observe different values in the box model
by inspecting.
-Create a button and give 10px padding to
top and bottom and 15px on the sides.
- Add 100px margin to the button on all sides.
-Add dotter border with color red and so
much that the button becomes a circle.
-Create two boxes with different box-
sizing values and observe changes in box
model.

@featurecod +91 9548457683


Level 5
Display and Position

26. Display Property


27. Responsive

Websites
28. Relative Units

29. Position Property

30. Semantic Tags

@featurecod +91 9548457683


26. Display Property (Block / Inline
Elements)

Block Inline
● New Line: Start on a new line. ● Flow: Stay in line with text.
Elements
●
Elements
●
Full Width: Take up all horizontal Width: Just as wide as the content.
space. ● No Break: No new line between
● Styling: Can have margins and elements.
padding. ● Limited Styling: Can't set size easily.
●@featurecod
Size: Width and height can be set. +91 9548457683
● Examples: <span>, <a>, <strong>,
26. Display Property
(Block)

@featurecod +91 9548457683


26. Display Property
(Inline)

@featurecod +91 9548457683


26. Display Property (Inline-
Block)

@featurecod +91 9548457683


26. Display Property
(None)

@featurecod +91 9548457683


27. Responsive
Website

@featurecod +91 9548457683


27. Responsive
Website
1. Adapts layout for different screen
sizes
2. Flexible layouts
3. Optimizes images and assets
4. Enhances user experience on
mobile and desktop

@featurecod +91 9548457683


28. Relative Units

@featurecod +91 9548457683


28. Relative Units
(Percentage)

• Relative Sizing: Facilitates dynamic sizing relative to parents.


• Adaptability: Ensures responsiveness across various screens.
• @featurecod
Dimensions: Quickly set width and height as a percentage.
+91 9548457683
28. Relative Units (EM)

• Relative Unit: Sized relative to the parent element's font size.


• Scalability: Facilitates easy scaling of elements for responsive design.
• Font Sizing: Commonly used for setting font sizes adaptively.
@featurecod +91 9548457683
28. Relative Units (REM)

• Relative Sizing: Facilitates dynamic sizing relative to root element.


• Adaptability: Ensures responsiveness across various screens.
• @featurecod
Dimensions: Quickly set width and height as a percentage.
+91 9548457683
28. Relative Units (VW/VH)

• Viewport Relative Units: Units based on viewport's width (vw) or height (vh) for
responsive design.
• Responsive Layouts: Essential for creating adaptive layouts; e.g., height: 100vh for
full-screen sections.
• Element Sizing: Useful for defining heights and widths that scale with the
viewport.
@featurecod +91 9548457683
29. Position Property

• Static (default) : Elements follow the normal document flow. (top, right,
bottom, left, z-index would not work)
• Relative: Element's position adjusted from its normal position.
• Absolute: Positions element relative to the nearest positioned ancestor.
• @featurecod
Fixed: Element positioned relative to the viewport, does not move on
+91 9548457683
scroll.
29. Position Property

@featurecod +91 9548457683


29. Position Property (z
index) • Stacking Order: Determines the stacking order of elements along
the Z-axis.
• Position Context: Only applies to elements with position set to
relative, absolute, fixed, or sticky.
• Integer Values: Accepts integer values, including negative
numbers.
• Higher Values: An element with a higher z-index value appears
above others.

@featurecod +91 9548457683


30. Semantic Tags

@featurecod +91 9548457683


30. Semantic Tags

Semantic Non-Semantic
Tags
● Meaningful: Describe
Tags
● Generic: No specific
content. meaning.
● SEO: Good for search ● For Styling: Used for
engines. layout.
● Accessibility: Useful for ● No SEO: Not SEO-friendly.
screen readers. ● Examples: <div>,
● Examples: <header>,
<span>, <i>,
<footer>,
<b>.
<article>, <section>,
<nav>.
@featurecod +91 9548457683
Level 5 Revision
Display and Position

26. Display Property


27. Responsive

Websites
28. Relative Units

29. Position Property

30. Semantic Tags

@featurecod +91 9548457683


Practice Set Level
5 Display and
Position
-Create a webpage with header, footer, and
a content area.
- Header
- Create a nav bar with links.
- Main
-Create a div with width and
height, Background green and border
radius 50%
-Create Three divs with container
height and width 100px. Display inline block.
-Set the correct position property for
the single div element to ensure it remains at
the right side of the page and does not shift
when
scrolling.
-Use z-index to place the div on top
of@featurecod
another div. +91 9548457683
- Footer
Level 6
Flex Box, Grid and Media Queries

31. Float Property


32. What is Flexbox?
33. Flex Model
34. Flexbox Direction
35. Properties: Flexbox
container
36. Properties: Flex Items
37. Grid Layout
38. Media Queries
@featurecod +91 9548457683
31. Float
Property
• Element Alignment: Allows elements to be aligned to the left or right
within their containing element.
• Values: Can take values like "left", "right", or "none" to determine the
floating direction.
• Old Layout Technique: Less commonly used with the advent of
Flexbox.

@featurecod +91 9548457683


32. What is Flexbox?
Flexbox is a one-dimensional layout method for arranging items in rows or columns.
Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

@featurecod +91 9548457683


33. Flex Model
display:
flex

@featurecod +91 9548457683


34. Flexbox
•
• Direction
Property Name: flex-direction is the property used to define the direction in a flex container.
Row Layout: row value aligns the flex items horizontally, in a left-to-right fashion.
• Column Layout: column value stacks the flex items vertically, from top to bottom.
• Reverse Direction: Adding -reverse to row or column (as in row-reverse or column-reverse) reverses
the order of the items.

@featurecod +91 9548457683


34. Flexbox Direction

@featurecod +91 9548457683


34. Flexbox Direction

@featurecod +91 9548457683


35. Properties: Flexbox container (Justify
• Alignment: Aligns flex items along the main axis.
Content) • flex-start: Items align to the start of the flex
container.
• flex-end: Items align to the end of the flex container.
• Center: Items are cantered within the flex container.
• space-between/space-around/space-evenly:
Distributes space between items evenly.

@featurecod +91 9548457683


35. Properties: Flexbox container (Justify
Content)

@featurecod +91 9548457683


35. Properties: Flexbox container (Flex
Wrap)

@featurecod +91 9548457683


35. Properties: Flexbox container (Flex
Wrap)

@featurecod +91 9548457683


35. Properties: Flexbox container (Align
Items)
This property is used to align
the flex container's items
along the cross-axis, which is
perpendicular to the main
axis.

@featurecod +91 9548457683


35. Properties: Flexbox container (Align
Content)
It is utilized to adjust the
spacing between flex lines
within a flex container,
particularly when there is
extra space along the cross-
axis.

@featurecod +91 9548457683


36. Properties: Flex Items (Align
Allows individual flex items to override the
Self)
container's align-items property, aligning
them differently along the cross-axis.

@featurecod +91 9548457683


36. Properties: Flex Items (Flex
Shrink)

The "flex-shrink" property in CSS


determines how much a flex item
will shrink relative to other items in
the flex container if there is
insufficient space.

@featurecod +91 9548457683


36. Properties: Flex Items (Flex
Grow)

The "flex-grow" property in CSS specifies how much a flex item


will grow relative to other items in the flex container when
additional space is available.

@featurecod +91 9548457683


36. Properties: Flex Items
(Order) The "order" property in CSS allows you to define the
sequence in which flex items appear within the flex
container, overriding their original order in the HTML.

@featurecod +91 9548457683


37. Grid

@featurecod +91 9548457683


37. Grid

• 2D layout system for rows & columns.


• Activate with display: grid;.
• Children become grid items.
• Define structure with grid-template properties.
• Individual units called grid cells.
@featurecod +91 9548457683
38. Media Queries
• Tailor styles for specific device
characteristics.
• Use to create responsive web
designs.
• Apply styles based on conditions like
screen size.
• Syntax: @media (condition) { CSS
rules
}.
• Can combine multiple conditions using
and, or.

@featurecod +91 9548457683


38. Media Queries (width)

@featurecod +91 9548457683


38. Media Queries (min-
width)

@featurecod +91 9548457683


38. Media Queries (max-
width)

@featurecod +91 9548457683


38. Media Queries
(combination)

@featurecod +91 9548457683


Level 6 Revision
Flex Box, Grid and Media Queries

31. Float Property


32. What is Flexbox?
33. Flex Model
34. Flexbox Direction
35. Properties: Flexbox
container
36. Properties: Flex Items
37. Grid Layout
38. Media Queries
@featurecod +91 9548457683
Practice Set Level 6
Flex Box, Grid and Media Queries

-Create the same nav bar created in the


last Practice Set but do the spacing using
flexbox.
-Use flexbox to centre an image inside
a div.
- Create a div with three boxes where two
boxes have fixed size, but the third box
grows and shrinks with container size.
- Create a div of 50px by 50px with
color
green. It should respond to following
conditions:
- Keep color green under 300px of view
port size
- Change color to red from 300px to
@featurecod
400px +91 9548457683
Level 7
Animation, Transition & Transform

39. Pseudo
Classes
40. Transitions
41. CSS Transform
42. Animation

@featurecod +91 9548457683


39. Pseudo
Classes•• Used to define special states of HTML elements.
Syntax: selector:pseudo-class { styles }.
• Common examples: :hover, :active, :first-child.
• Target elements based on their position or user
action.

@featurecod +91 9548457683


40. Transitions

CSS transition is a property that enables smooth animation between


changes in CSS property values
• transition-property: Defines which CSS properties will transition.
• transition-duration: Sets how long the transition lasts.
• transition-timing-function: Controls the speed curve of the
transition.
• @featurecod +91 9548457683
transition-delay: Specifies a delay before the transition
40. Transitions

@featurecod +91 9548457683


41. CSS Transform
• Allows modification of an element's shape
and position.
• Can perform operations like rotate, scale,
and translate.
• Does not affect the layout of surrounding
elements.
• Used to create visual effects like 3D space
transformations.
• Implemented with functions like rotate(),
scale(), and translate().

@featurecod +91 9548457683


41. CSS Transform
• Rotates an element around a
(Rotate)
fixed point.
• Defined using the rotate()
function within the
transform property.
• Default rotation point is the
element's center.

@featurecod +91 9548457683


41. CSS Transform (Scale)

@featurecod +91 9548457683


41. CSS Transform
(Translate)

@featurecod +91 9548457683


41. CSS Transform (Skew)

@featurecod +91 9548457683


42. Animation

@featurecod +91 9548457683


42. Animation Properties
• animation-name: Specifies the name of the
@keyframes defined animation.
• animation-duration: Defines the total time the
animation takes to complete one cycle.
• animation-timing-function: Controls the pacing of the
animation (e.g., linear, ease-in).
• animation-delay: Sets a delay before the animation
starts, allowing for a pause before initiation.
• animation-iteration-count: Indicates the number of
times the animation should repeat.
• animation-direction: Specifies the direction of the
animation, allowing for reverse or alternate cycles.
@featurecod +91 9548457683
42. Animation

@featurecod +91 9548457683


42. Animation

@featurecod +91 9548457683


Level 7 Revision
Animation, Transition & Transform

39. Pseudo
Classes
40. Transitions
41. CSS Transform
42. Animation

@featurecod +91 9548457683


Practice Set Level 7
Revision
Animation, Transition & Transform

- Create a webpage with a progress


bar that showcases a smooth loading
animation. The progress bar should
fill up from 0 to 100% with a smooth
transition effect and a slight
bounce when it reaches 100%.

@featurecod +91 9548457683


Project
Myntra
Clone
@featurecod +91 9548457683

You might also like