Comprehensive Guide to Cascading Style Sheets (CSS)
AluminicompSRESCoeKo
8 views
25 slides
Oct 28, 2025
Slide 1 of 25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
About This Presentation
Cascading Style Sheets (CSS) – Complete Notes
This PDF provides a comprehensive introduction to CSS, the language used to style and enhance web pages. It explains how CSS works with HTML to create visually appealing, responsive, and well-structured websites.
The notes cover CSS syntax, selectors,...
Slide Content
Cascading Style Sheets
(CSS)
+ Introduction to CSS.
CSS stands for Cascading Style Sheets.
I is a stylesheet language used to describe the style (look and formatting) of a
document
[CSS is used 10 contro the layout of web pages, including elements such as colors,
Fonts, spacing, and the positioning of various components on the page.
Advantage of CSS is it allows developer to separate contents from design,
+ Basic format/style rule of CSS :
A CSS rule has two main pats: Selector and Declaration block.
> Selector:
‘The elector determines which HTML elements the style rule will apply 1. I
can target elements by ther type lass, ID, attribute, ete.
> Declaration Block +
‘The declaration block co
‘one or more declarations enclosed in eur
braces {}. Each declaration consists of a property and a value separated by a
colon
Example :
(CSS)
+ Introduction to CSS.
CSS stands for Cascading Style Sheets.
I is a stylesheet language used to describe the style (look and formatting) of a
document
[CSS is used 10 contro the layout of web pages, including elements such as colors,
Fonts, spacing, and the positioning of various components on the page.
Advantage of CSS is it allows developer to separate contents from design,
+ Basic format/style rule of CSS :
A CSS rule has two main pats: Selector and Declaration block.
> Selector:
‘The elector determines which HTML elements the style rule will apply 1. I
can target elements by ther type lass, ID, attribute, ete.
> Declaration Block +
‘The declaration block co
‘one or more declarations enclosed in eur
braces {}. Each declaration consists of a property and a value separated by a
colon
Example :
+ Trpes/wavs to insert
1. Inline CSS
Inline CSS involves applying styles directly within an HTML elements using “style
In inline CSS Styles cannot be reused across multiple clements ess efficient for larger
2. Internal CSS
Intemal CSS involves placing CSS rules within a <style> tag inside the <head>
section of an HTML document I is useful when you want to apply styles toa single
document
stg
pl
coor: lue
mal CSS is only applicable 10 the speciic HTML document, making it difficult 10
maintain and scale across multiple pages.
External CSS
External CSS involves linking an external es fl to the HTML document The styles
ar applied by including a <tink> tag
1. Inline CSS
Inline CSS involves applying styles directly within an HTML elements using “style
In inline CSS Styles cannot be reused across multiple clements ess efficient for larger
2. Internal CSS
Intemal CSS involves placing CSS rules within a <style> tag inside the <head>
section of an HTML document I is useful when you want to apply styles toa single
document
stg
pl
coor: lue
mal CSS is only applicable 10 the speciic HTML document, making it difficult 10
maintain and scale across multiple pages.
External CSS
External CSS involves linking an external es fl to the HTML document The styles
ar applied by including a <tink> tag
HTML Fi
IDOCTYPE hm
+ CSS text properties :
CSS text properties allow you to style the text content of HTML elements
Property Description Values ie
Teran Species the [EE Alms Text
the let
horizontal agnment textalign: center
Align text to
ofthe text 0
Center the
fy: Sriches the
dex so that each ine
has equal wiih
Tone Sas e hehe [Keywords (normal. PT
(eight ofthe A |” font-weight bold
Numeric values (100. | "
200,300, up 10 500),
Tontsize Sen the sas of | Absolute sizes (pr | PT
Keywords (small, | font-size: 20px;
medium. largo)
Percentages 100% |}
Text-decoration — | Adds desonaion to Pnone: Removes. any [a Y
the text such as | decoraton underine:
Underining, Adds an underine. | 1extlecoration
overline: Ads ine
hove the text
inc-hrouy
strikethrough,
underline
ds a |
ink: Makes the text
blink,
CS CE [Namen OS
between lines of | Length px, 2em) | incheig: 1.5
txt Percentage 150%) 1)
AAA BEE BESSERE |
IDOCTYPE hm
+ CSS text properties :
CSS text properties allow you to style the text content of HTML elements
Property Description Values ie
Teran Species the [EE Alms Text
the let
horizontal agnment textalign: center
Align text to
ofthe text 0
Center the
fy: Sriches the
dex so that each ine
has equal wiih
Tone Sas e hehe [Keywords (normal. PT
(eight ofthe A |” font-weight bold
Numeric values (100. | "
200,300, up 10 500),
Tontsize Sen the sas of | Absolute sizes (pr | PT
Keywords (small, | font-size: 20px;
medium. largo)
Percentages 100% |}
Text-decoration — | Adds desonaion to Pnone: Removes. any [a Y
the text such as | decoraton underine:
Underining, Adds an underine. | 1extlecoration
overline: Ads ine
hove the text
inc-hrouy
strikethrough,
underline
ds a |
ink: Makes the text
blink,
CS CE [Namen OS
between lines of | Length px, 2em) | incheig: 1.5
txt Percentage 150%) 1)
AAA BEE BESSERE |
Con the
Tontiamily
fer oor of | spam
Teng (mom
car
lower spacing
2px
Arial", “Times New | font-family
Roman, "Georgia", | Times New
Helvetica’. cte | Roman", Times,
Gener" Fansites: | serif
A CSS selector is used 1 target HTML element that you want 0 style
Tontiamily
fer oor of | spam
Teng (mom
car
lower spacing
2px
Arial", “Times New | font-family
Roman, "Georgia", | Times New
Helvetica’. cte | Roman", Times,
Gener" Fansites: | serif
A CSS selector is used 1 target HTML element that you want 0 style
1.. Element Selector:
The element selector targets ll elements of a specific type. It applies styles 10 all
instances ofthat element in the document
“tie Element Sletor Example <i>
This targets all <p> elements, making the tex color blue
2. ID Selector:
The ID selector tar
san element with a specifi i atributo. Since Ds must
be unique, his selector is used to syle a single, unique element
The element selector targets ll elements of a specific type. It applies styles 10 all
instances ofthat element in the document
“tie Element Sletor Example <i>
This targets all <p> elements, making the tex color blue
2. ID Selector:
The ID selector tar
san element with a specifi i atributo. Since Ds must
be unique, his selector is used to syle a single, unique element
This targets the element with id=header” giving ia
ght grey background.
3. Class Selector
The class selector target all elements with a specific class attribute, Classes
an be reused on multiple elements, making this selector versatile for applying
In CSS it referenced with (ot) followed by class name
<IDOCTYPE mimi
ead
<p ls" This text is old nd because ofthe
This targets al elements with class="highlight, making the ext bold
|. Attribute Selector
The attribute selector targets elements based specific atribute Or specific
atributo with value
ght grey background.
3. Class Selector
The class selector target all elements with a specific class attribute, Classes
an be reused on multiple elements, making this selector versatile for applying
In CSS it referenced with (ot) followed by class name
<IDOCTYPE mimi
ead
<p ls" This text is old nd because ofthe
This targets al elements with class="highlight, making the ext bold
|. Attribute Selector
The attribute selector targets elements based specific atribute Or specific
atributo with value
his targets all <input> elements with type="text, adding a black border.
5. Descendant Selector
The descendant selector targets elements that are nested within another
clement. It applies styles to elements that are descendants (children,
ete.) ofa specified parent element
in
This targeis all <p> elements that are inside a <div>, setting their tet color to
5. Descendant Selector
The descendant selector targets elements that are nested within another
clement. It applies styles to elements that are descendants (children,
ete.) ofa specified parent element
in
This targeis all <p> elements that are inside a <div>, setting their tet color to
6. Pseudo-class Selector
Pseudo-classselecors target elements based on their state or postion in the
document, such as when a user hovers over
> hover: Style an element when user hover over it
> sactives Style an element when user click iL(ypically used in radio baton,
checked box, options, ec).
ocustSiyles an element when it has focus (e: when an input Field is clicked,
> swisted: Styles links that have been visited
the button will change is background color to blue when hovered over and to dark
blue when clicked.
Pseudo-classselecors target elements based on their state or postion in the
document, such as when a user hovers over
> hover: Style an element when user hover over it
> sactives Style an element when user click iL(ypically used in radio baton,
checked box, options, ec).
ocustSiyles an element when it has focus (e: when an input Field is clicked,
> swisted: Styles links that have been visited
the button will change is background color to blue when hovered over and to dark
blue when clicked.
7. Pscudo-clement Selector
Pseudo-clement selector target specific parts of an element, such as the first ine,
first leer
This makes the frst letter of <hl element to red and first ine of <p> elements
bola,
8. Child Selector
The child selector targets an clement hat isa direc child of another element,
meaning it is nested immediately within the parent element without any other
Pseudo-clement selector target specific parts of an element, such as the first ine,
first leer
This makes the frst letter of <hl element to red and first ine of <p> elements
bola,
8. Child Selector
The child selector targets an clement hat isa direc child of another element,
meaning it is nested immediately within the parent element without any other
This targets all <i> elements that are direct children of a <ul>, removing
the bullet points
9. Universal Selector
The universal selector targets all elements on the page. Its typically used for
resetting styles or applying global sting
Ders
‚he background color ofthe webpage, including the MI header, wil be set o red.
the bullet points
9. Universal Selector
The universal selector targets all elements on the page. Its typically used for
resetting styles or applying global sting
Ders
‚he background color ofthe webpage, including the MI header, wil be set o red.
Cascading in CSS refers to the process by which the browser determines
Which CSS rules to apply when multiple rules target the same element.
The term “cascading” describes how styles are prioritized based on the follow
> Specificity
> Source Onder
> importance
> Inheritance
1. Specificity:
Specificity in CSS is a way to determine which CSS rule should be applied when
multiple rules could apply tothe same element, I is calculated based on the types of
selectors used inthe CSS rules, wth different selectors carrying diferen weights,
ne styles directly added 1 an element via the
style attribute have the highest specificity
1D Selectors (100 points): An ID selector is very specific and has a high
specificity
Class, Attribute, and Pseudo-Class Selecors (10 po
have a moderate level of specificity
): These selectors
lement Selectors (1 poin
Which CSS rules to apply when multiple rules target the same element.
The term “cascading” describes how styles are prioritized based on the follow
> Specificity
> Source Onder
> importance
> Inheritance
1. Specificity:
Specificity in CSS is a way to determine which CSS rule should be applied when
multiple rules could apply tothe same element, I is calculated based on the types of
selectors used inthe CSS rules, wth different selectors carrying diferen weights,
ne styles directly added 1 an element via the
style attribute have the highest specificity
1D Selectors (100 points): An ID selector is very specific and has a high
specificity
Class, Attribute, and Pseudo-Class Selecors (10 po
have a moderate level of specificity
): These selectors
lement Selectors (1 poin
Which Sige Applies?
+ "The p element inside the div with id="main’ and elass="intro” wil have red
+ This is because the rule main intro (color: red: ] has the highest specificity
(110)
2. Source Order
Source order in CSS refers to the order in which CSS rules are written in a stylesheet.
When multiple CSS rules have the same specificity, he browser will apply the rule
that appears las inthe stylesheet, effectively overiding any previous conflicting rules
> How Source Order Works:
Rules with the Same Specificity: IF wo or more CSS rales apply to the same
element and have the same specificity, the rule that comes last in the stylesheet will be
applied.
2. Importance of Rule Order: The order of the rales in your stylesheet can affect
‘which styles are ultimately applied. I you want to overide a style, you can place the
new rule later in the stylesheet
What Happens?
+ Specificity: Both rules p | color: blue; } and p | color rd; } have the same
specificity (001).
+ Source Order: Because the second rule p {color red} appears later in the
Syleshee, it will overide the first ule, and the paragraph (<p>) text will be
red
+ "The p element inside the div with id="main’ and elass="intro” wil have red
+ This is because the rule main intro (color: red: ] has the highest specificity
(110)
2. Source Order
Source order in CSS refers to the order in which CSS rules are written in a stylesheet.
When multiple CSS rules have the same specificity, he browser will apply the rule
that appears las inthe stylesheet, effectively overiding any previous conflicting rules
> How Source Order Works:
Rules with the Same Specificity: IF wo or more CSS rales apply to the same
element and have the same specificity, the rule that comes last in the stylesheet will be
applied.
2. Importance of Rule Order: The order of the rales in your stylesheet can affect
‘which styles are ultimately applied. I you want to overide a style, you can place the
new rule later in the stylesheet
What Happens?
+ Specificity: Both rules p | color: blue; } and p | color rd; } have the same
specificity (001).
+ Source Order: Because the second rule p {color red} appears later in the
Syleshee, it will overide the first ule, and the paragraph (<p>) text will be
red
3 Importance
In CSS, the important declaration is used to give a particular style rule the h
level of importance, overriding
specificity or source order.
I other conflicting rule, regardless of hei
+ Oversdes Specificity: Even if another rule has a higher specificity, «rule
with important wil override i
+ Overrides Source Order: Even if confiting rule appears later in the
siyleshet, a rule with important wil sil ake precedence.
+ p (color blues}: This rl
+ ‘highlight [ color: green; ]: This rule targets any <p> element with the
highlight class and ses is tex color to green This would override the previous
rule with the highlight class duet higher specificity (010 vs. 001).
+p (color red important; J: This rule targets all <p> elements and sets the text
¿olor to red, but with the
both the first rule
sets the text color of all <p> elements o blue,
importan declaration, Because of this, it overrides
In CSS, the important declaration is used to give a particular style rule the h
level of importance, overriding
specificity or source order.
I other conflicting rule, regardless of hei
+ Oversdes Specificity: Even if another rule has a higher specificity, «rule
with important wil override i
+ Overrides Source Order: Even if confiting rule appears later in the
siyleshet, a rule with important wil sil ake precedence.
+ p (color blues}: This rl
+ ‘highlight [ color: green; ]: This rule targets any <p> element with the
highlight class and ses is tex color to green This would override the previous
rule with the highlight class duet higher specificity (010 vs. 001).
+p (color red important; J: This rule targets all <p> elements and sets the text
¿olor to red, but with the
both the first rule
sets the text color of all <p> elements o blue,
importan declaration, Because of this, it overrides
% Inberitanee
Inheritance in CSS refers to the mechanism by which certain properties applied toa
parent element are automatically passed down to its child elements,
Inherited Properties: Some CSS properties ae naturally inherited from parent to
child elements, Examples include:
inherited Exampe ts
dal
Fon family Ans id elemen
Non-h
ited Properties: Many properies are not inherited by default. Examples
include:
+ margin
© padding
+ border
+ background
+ Width
The properties which are not inherited automatically the “inherit” keyword specifies
that a property should imei its value from its parent clement
Inheritance in CSS refers to the mechanism by which certain properties applied toa
parent element are automatically passed down to its child elements,
Inherited Properties: Some CSS properties ae naturally inherited from parent to
child elements, Examples include:
inherited Exampe ts
dal
Fon family Ans id elemen
Non-h
ited Properties: Many properies are not inherited by default. Examples
include:
+ margin
© padding
+ border
+ background
+ Width
The properties which are not inherited automatically the “inherit” keyword specifies
that a property should imei its value from its parent clement
CSS transitions allow you to change property values smoothly over a specified
duration. They enable you to animate the transition between two sites ofan element,
such as when it changes color, sie, or position
transition: property duration timing-funetion delay:
property: Specifies the CSS property to which the transition applies (,
color width, opacity).
duration: Defines how long the transition (e.g 2, 500ms).
‘timing function: Determines the speed curve of the transition (eg.
Tinea, easein, ease-out, cbic-bezier)
‘delay: Sets a delay before the transition starts es, 300m).
!DOCTYPE bw
duration. They enable you to animate the transition between two sites ofan element,
such as when it changes color, sie, or position
transition: property duration timing-funetion delay:
property: Specifies the CSS property to which the transition applies (,
color width, opacity).
duration: Defines how long the transition (e.g 2, 500ms).
‘timing function: Determines the speed curve of the transition (eg.
Tinea, easein, ease-out, cbic-bezier)
‘delay: Sets a delay before the transition starts es, 300m).
!DOCTYPE bw
Ea
‘Transforms
nsformations allow you to change the appearance ofan element by rotating,
‘or skewing it
transform: transform-funetion value)
> Common Transform Functions and Values
Funcion, Description Value.
translate Xa Moves the element |Lemrih (m. em)
UT Moves We element | Lengih dm em)
serially. perentage (%)
RE dead
untar
seal)
Tales Seales TS or 150%
| sericaty
Skews the element in bo
horizontal and vertical
GS Tas me Number ee. 15 or 10
serially scale).
Eon Scales the element Bol | Number (ee 13 Tor 150%
horizontal nd seca. | sale)
TEENY Stews he element] Ange (ep
room
DEL] Shows Ge Ge | Angle ee
ale ew)
‘Transforms
nsformations allow you to change the appearance ofan element by rotating,
‘or skewing it
transform: transform-funetion value)
> Common Transform Functions and Values
Funcion, Description Value.
translate Xa Moves the element |Lemrih (m. em)
UT Moves We element | Lengih dm em)
serially. perentage (%)
RE dead
untar
seal)
Tales Seales TS or 150%
| sericaty
Skews the element in bo
horizontal and vertical
GS Tas me Number ee. 15 or 10
serially scale).
Eon Scales the element Bol | Number (ee 13 Tor 150%
horizontal nd seca. | sale)
TEENY Stews he element] Ange (ep
room
DEL] Shows Ge Ge | Angle ee
ale ew)
!DOCTYPE hi
Each an every element in CSS consider as a box. The C
Box Model is a
Fundamental concept that describes how elements are rendered and how thei
dimensions are calculated on a web page. I consists of several layers that determine
ii
2. Padding
3. Margin
4 Border
[sueur |
Each an every element in CSS consider as a box. The C
Box Model is a
Fundamental concept that describes how elements are rendered and how thei
dimensions are calculated on a web page. I consists of several layers that determine
ii
2. Padding
3. Margin
4 Border
[sueur |
1. The innermost part of the box where the actual content ofthe element
(such as text or images) is displayed.
2. Properties: width height
1. The space between the content and the border. Is used to create space
inside the element, around the content.
2. Properties: padding, padding-top, padding-right, padding-bottom,
padding-left
1. Aline surounding the padding and content I defines the boundary of
the clement
2. Properties: border, border-width border style, border-color, border
border-right, border-bottom, border-left
1. The space outside the border, creating space between the element and
adjacent elements. Marins are used to Separate elements from each
other
2. Properties: margin, margin-top, margin-right, margin-bottom, margin
lett
Box Model Calculation:
The total width and height of an element ae calculated as follows:
+ Total Width = width + padding-ef + padding-right + border-left + border
sight + margin-left + margin-right
+ Total Height= height + padding-top + padding-bottom + border-top + border-
bottom + margin-top + margin-bottom
Example
‘The content area is 200px wide and 100px high
“The padding is 20px on all sides
“The border is Spx wide
“The margin is 30px on all sides
‘Total Dimensions:
200px (comen) + 20px (pang) + 20px (padding igh) +
: ef) + 30px(nrgin-
(such as text or images) is displayed.
2. Properties: width height
1. The space between the content and the border. Is used to create space
inside the element, around the content.
2. Properties: padding, padding-top, padding-right, padding-bottom,
padding-left
1. Aline surounding the padding and content I defines the boundary of
the clement
2. Properties: border, border-width border style, border-color, border
border-right, border-bottom, border-left
1. The space outside the border, creating space between the element and
adjacent elements. Marins are used to Separate elements from each
other
2. Properties: margin, margin-top, margin-right, margin-bottom, margin
lett
Box Model Calculation:
The total width and height of an element ae calculated as follows:
+ Total Width = width + padding-ef + padding-right + border-left + border
sight + margin-left + margin-right
+ Total Height= height + padding-top + padding-bottom + border-top + border-
bottom + margin-top + margin-bottom
Example
‘The content area is 200px wide and 100px high
“The padding is 20px on all sides
“The border is Spx wide
“The margin is 30px on all sides
‘Total Dimensions:
200px (comen) + 20px (pang) + 20px (padding igh) +
: ef) + 30px(nrgin-
= Toul Height = 100px (onen) + 20px (padding top) +
+ Spx (border-top) + Spx (border-bottom) + 30px (mar
(nargin-bottom) = 210px
0px (padding boton]
in-top) + 30px
> Boxsizing property in CSS:
The box sizing property in CSS controls how the total width and height of an element
are calculated. affects how padding and borders are included in the clement otal
dimensions
Values of box si
> contentbox (default value:
1. The widih and height properties apply only tothe content box. Padding
and border are added outside this box, increasing the total sizeof the
lement.
Calculation:
1. Total Width = width + padding-left + paddin
border-right
2. Total Height = bei
‘border-bottom
ht + border +
1 + padding-top + padding-bottom + border-op
> bonder-box
1. The width and height properties include padding and border, This
means that the specified width and height apply to the content, padding.
and border, The element will not grow beyond the specified width and
eight even if padding or border are added.
2. Calculation:
1. Total Width = width (including padding and border)
2. Total Height = height including padding and border)
+ Spx (border-top) + Spx (border-bottom) + 30px (mar
(nargin-bottom) = 210px
0px (padding boton]
in-top) + 30px
> Boxsizing property in CSS:
The box sizing property in CSS controls how the total width and height of an element
are calculated. affects how padding and borders are included in the clement otal
dimensions
Values of box si
> contentbox (default value:
1. The widih and height properties apply only tothe content box. Padding
and border are added outside this box, increasing the total sizeof the
lement.
Calculation:
1. Total Width = width + padding-left + paddin
border-right
2. Total Height = bei
‘border-bottom
ht + border +
1 + padding-top + padding-bottom + border-op
> bonder-box
1. The width and height properties include padding and border, This
means that the specified width and height apply to the content, padding.
and border, The element will not grow beyond the specified width and
eight even if padding or border are added.
2. Calculation:
1. Total Width = width (including padding and border)
2. Total Height = height including padding and border)
low property in CSS:
The box-shadow property in CSS is used to add shadow effets to elements
Basic syntax
box-shadow: offset offset blur-radius color inst
10px, 2em), positive values move the shadow right
ive values move it et.
move the shadow down,
> blur-radius: The blur radius of the shadow, er
ting a soft ede
Values: Length (
shadow.
18 Spx, Sem), a larger value creates more blared
> color: The color ofthe shadow
2 inset (optional: Changes the shadow from an outer shadow to an inner shadow
tic ramasse 2
The box-shadow property in CSS is used to add shadow effets to elements
Basic syntax
box-shadow: offset offset blur-radius color inst
10px, 2em), positive values move the shadow right
ive values move it et.
move the shadow down,
> blur-radius: The blur radius of the shadow, er
ting a soft ede
Values: Length (
shadow.
18 Spx, Sem), a larger value creates more blared
> color: The color ofthe shadow
2 inset (optional: Changes the shadow from an outer shadow to an inner shadow
tic ramasse 2
Values: Keyword (nse, without the shadow is outer
> Background-image property in CSS:
The background-image property in CSS is used to set an image as the background of
an element
Basic syntax
"To control how the background image is displayed, you can use additional properties
lauren a
> Background-image property in CSS:
The background-image property in CSS is used to set an image as the background of
an element
Basic syntax
"To control how the background image is displayed, you can use additional properties
lauren a
DT
‘Values repeat def, repeat, repeat, nep
2 bacerountsiz-Descripion: Specs sz ofthe backgroud image
Values cover, comi.
> Length values (1px Sp
Species the wid and height of the image.
> background: position: Defines he postion ofthe background image within the
element.
Values:Keywords (e. top left center center, bottom right), Length values
(eg. 10px 20px).
Flex-box, or the Flexible Box Layout, is a CSS layout module designed to make it
easier to align and distribute space among items in a container, even when their sizes,
are unknown or dynamic. It provides a more efficient way to create complex layouts
and align tems in one dimension (either horizontally or vertically).
«Flex Container: The parent element that holds flex items. Is defined with display:
flex or display: inline- e.
Flex Items: The children ofthe lex container, These items can be lid ou in a row
or column, depending on the flex direction.
Basic syntax:
i
displays Mex; or inline-flex %/
’
Flex Container Properties
> Mex-direction:
1, Defines the direct
container.
2. Values:
in which flex items are placed inthe flex
Sic web ecology sortie 22
‘Values repeat def, repeat, repeat, nep
2 bacerountsiz-Descripion: Specs sz ofthe backgroud image
Values cover, comi.
> Length values (1px Sp
Species the wid and height of the image.
> background: position: Defines he postion ofthe background image within the
element.
Values:Keywords (e. top left center center, bottom right), Length values
(eg. 10px 20px).
Flex-box, or the Flexible Box Layout, is a CSS layout module designed to make it
easier to align and distribute space among items in a container, even when their sizes,
are unknown or dynamic. It provides a more efficient way to create complex layouts
and align tems in one dimension (either horizontally or vertically).
«Flex Container: The parent element that holds flex items. Is defined with display:
flex or display: inline- e.
Flex Items: The children ofthe lex container, These items can be lid ou in a row
or column, depending on the flex direction.
Basic syntax:
i
displays Mex; or inline-flex %/
’
Flex Container Properties
> Mex-direction:
1, Defines the direct
container.
2. Values:
in which flex items are placed inthe flex
Sic web ecology sortie 22
row (defaulo Hems ae placed horizontally.
column: ems are placed vertically.
row-everse:Hems replaced horizon
column-reverse: ems are placed vert
in reverse order,
ly in reverse order.
> Mex:
1. Specifies whether flex items should wrap onto multiple lines.
2. Values
1. nowrap (default): Items are placed in a single in,
2. wrap: lems wrap onto multiple lines if necessary.
3. wrap-reverse: lems wrap onto multiple lines in reverse order.
> jstfy-conten:
1. Align flex items along the main axis (horizontal if ex
vertical if flex direction is column),
2. Values:
fex-start (default): Aligns items 10 the start ofthe container.
Mex-end: Aligns items tothe end ofthe container.
center Aligns items to the center of the container.
space-between: Distributes items with space between them.
space-around: Distributes items with space around them.
Space-evenly: Distributes items with equal space between then
compe
> alignitems
1. Align le items along th cross axis (pependicular to he main axis.
2. Values:
strech (default: Stretches items to fill he container
fex-start: Align items tothe start of the container.
flex-end: Align items tothe end ofthe container.
center: Align items tothe center of he container
baseline: Aligns items along ther baseline.
> align-content:
1. Aligns lex lines within the flex container
2. Values
stretch (default) Stretches lines o fill he container.
Alex start: Aligns lines tothe start of the container.
3. lex-end: Aligns lines to the end of the container.
center Aligns lines to the center ofthe container.
space between: Distributes lines with space been them,
6 space-around: Distributes lines with space around them.
tic we ecnaarı Satan 2
column: ems are placed vertically.
row-everse:Hems replaced horizon
column-reverse: ems are placed vert
in reverse order,
ly in reverse order.
> Mex:
1. Specifies whether flex items should wrap onto multiple lines.
2. Values
1. nowrap (default): Items are placed in a single in,
2. wrap: lems wrap onto multiple lines if necessary.
3. wrap-reverse: lems wrap onto multiple lines in reverse order.
> jstfy-conten:
1. Align flex items along the main axis (horizontal if ex
vertical if flex direction is column),
2. Values:
fex-start (default): Aligns items 10 the start ofthe container.
Mex-end: Aligns items tothe end ofthe container.
center Aligns items to the center of the container.
space-between: Distributes items with space between them.
space-around: Distributes items with space around them.
Space-evenly: Distributes items with equal space between then
compe
> alignitems
1. Align le items along th cross axis (pependicular to he main axis.
2. Values:
strech (default: Stretches items to fill he container
fex-start: Align items tothe start of the container.
flex-end: Align items tothe end ofthe container.
center: Align items tothe center of he container
baseline: Aligns items along ther baseline.
> align-content:
1. Aligns lex lines within the flex container
2. Values
stretch (default) Stretches lines o fill he container.
Alex start: Aligns lines tothe start of the container.
3. lex-end: Aligns lines to the end of the container.
center Aligns lines to the center ofthe container.
space between: Distributes lines with space been them,
6 space-around: Distributes lines with space around them.
tic we ecnaarı Satan 2
> align tems:
1. Align flex items along the cross axis (perpendicular tothe main axis).
2. Values:
1. stretch (default: Stretches items 1 fil the container.
2 flex start Alis items to the start ofthe container.
5. flex-end: Aligns items o the end of the container.
4. center: Aligns items tothe center of he container
5. baseline: Align items along their baseline.
Flex Item Properties
> fex-grow:
1. Defines he ability of flex item to grow relative tothe ret ofthe Mex items,
2 Values: Number (eg. 1,2), default is 0
> Aex-shrink:
Denes the ability ofa Mex
items.
2. Values: Number (eg.
sm to shrink relative to the rest ofthe flex
2) defaut is 1
> Aex-bass
1. Defines ie initial sie of a flex item before any growing or shrinking.
2. Values: Length (eg, 100px) percentage (50%), auto.
1. À shorthand for flex-grow, flex shrink, and flex basis.
2. Values lex-grow fex-shrink flex-bass (og. 11 20093).
> alignselt
1. Allows the defaut alignment (or the one specified by align-items) to
be overridden for individual Mex items.
2. Values: ato, fex-start, flex-end, center, baseline, stretch.
1. Align flex items along the cross axis (perpendicular tothe main axis).
2. Values:
1. stretch (default: Stretches items 1 fil the container.
2 flex start Alis items to the start ofthe container.
5. flex-end: Aligns items o the end of the container.
4. center: Aligns items tothe center of he container
5. baseline: Align items along their baseline.
Flex Item Properties
> fex-grow:
1. Defines he ability of flex item to grow relative tothe ret ofthe Mex items,
2 Values: Number (eg. 1,2), default is 0
> Aex-shrink:
Denes the ability ofa Mex
items.
2. Values: Number (eg.
sm to shrink relative to the rest ofthe flex
2) defaut is 1
> Aex-bass
1. Defines ie initial sie of a flex item before any growing or shrinking.
2. Values: Length (eg, 100px) percentage (50%), auto.
1. À shorthand for flex-grow, flex shrink, and flex basis.
2. Values lex-grow fex-shrink flex-bass (og. 11 20093).
> alignselt
1. Allows the defaut alignment (or the one specified by align-items) to
be overridden for individual Mex items.
2. Values: ato, fex-start, flex-end, center, baseline, stretch.
ex wap: wap
Night: 10px:
Night: 10px:
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 8
- Slides 25
- Age 34 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
45 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views