Scribd
Upload
3 views

CSS notes

CSS (Cascading Style Sheets) is a styling language for webpages that controls layout, colors, and fonts. It has evolved from its inception in 1994 to various versions, with CSS3 being released in 2011. CSS can be applied in three ways: inline, internal, and external, and includes various selectors and properties for styling elements.

Uploaded by

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

CSS notes

CSS (Cascading Style Sheets) is a styling language for webpages that controls layout, colors, and fonts. It has evolved from its inception in 1994 to various versions, with CSS3 being released in 2011. CSS can be applied in three ways: inline, internal, and external, and includes various selectors and properties for styling elements.

Uploaded by

maste005kar2005
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 106

What is Css

CSS (Cascading Style Sheets) is a language used to style and design the look of a
webpage. It controls things like colors, fonts, layout, and spacing, making a webpage look good
and organized.

Haykon Wium Lie proposed the idea of


CSS 1994- .
The first version of CSS 1 was invented
1996.
CSS 2 was released and work on CSS 3
began1998.
CSS 3 was released in the year 2011 .

HÃ¥kon
Wium Lie
What is CSS

CSS stands for Cascading style sheet.

Stylesheet means a sheet for providing styling.

Cascading means one on top of other. We can design one element only with different ways
and all those styling will be applied on that element.
All that styling will be applied in the form of layers one after other, and if we provide same
property through different ways, all will be applied and the one with the highest priority will
be visible to the user.

This is what we mean by cascading stylesheet.


CSS Rule :

Selector {
propertyName1 :value;
propertyName1 :value;
.
.
.

propertyName1 :value;

Each property consist of key & value pair seprated by colon .

Each property is seprated by Semicolon .


Ways to apply css

We can achieve css in 3 ways .


They are:

1. Inline CSS
2. Internal CSS
3. External CSS

1. Inline CSS :

It is a way of applying the CSS in the same line. By using style attribute .

<h1 style="color: white ; background-color: blue;">Let’s dive into css </h1>


Types of CSS

<html>
<head>
<title>Document</title>
2. Internal CSS: <style>
h1 {
It is a way of adding the CSS in the same color: white;
html file itself. By using Style Tag. We can background-color: blue;
use style tag anywhere in the html file. }
</style>
</head>
It’s recommended to use in a head tag. <body>
<h1>Let's dive into CSS</h1>
</body>
</html>
Types of CSS

<!-- index.html -->


<html>
3. External CSS: <head>
<title>Document</title>
It is a way of writing all the css code in one <link rel="stylesheet"
href="./style.css">
file which is saved with . css extension.
</head>
That css file we have to link to the html file <body>
by using the link tag. <h1>Let's dive into CSS</h1>
</body>
Note: </html>
1. The first will always be taken by inline CSS. because of
/* style.css */
the most recent update.
h1 {
2. Internal vs External depends on code flow which is written
color: white;
at last.
background-color: blue;
}
Import rule

@import:

Instead of just creating a single css file, we can create multiple files for
css for different different component and like those css files together
using @import rule.

The @import rule also supports media queries, so you can allow the import to
be media-dependent. The @import rule must be at the top of the document

@import "navigation.css"; /* Using a string */


or
@import url("navigation.css"); /* Using a url */
CSS Selectors

To apply the css Properties, we can target the html elements in many ways.
They are:

1. Simple Selector
2. Combinator Selector
3. Pseudo Class Selector
4. Pseudo Element Selector
5. Attribute Selector
Simple selectors

1. Simple Selectors:
To target the element based on classes / id’s / tagname we have basic selectors.
They are:

1. TagName
2. Grouping
3. Universal
4. Id Name
5. Class Name

● TagName:
○ To target the element based on tagname itself we have to use tagName
selector.
○ The symbol was the tagname itself.

● Grouping:
○ To target multiple elements at a time we have to use a grouping selector.
○ Whenever we need to pass similar properties for multiple elements we can use a grouping selector.
○ The symbol used to combine all elements is comma (,)
Simple selector

● Universal:
○ It will target all the elements in the document including body tag too.
○ The symbol used is asterisk (*).

● Id Name:
○ To target the elements uniquely we have to use an id name.
○ In CSS id name can be duplicated also there is no problem,
○ But once we moved to js it will cause problem.
○ Repetition of id name will not work. So it is highly recommended not to use it from now on.
○ The Symbol used is hash (#).

● Class Name:
○ To target the specific elements on the basis of class name we have to use class name.
○ Class attribute allows multiple identifier names in the same attribute.
○ Class names can be repetitive also.
○ The symbol used is dot (.).
Selector specificity

We can provide css to that same element, through multiple ways like inline css, or in
external/internal using id, class, tagname or universal. So which one will be visible to the
user, if provide css to an element using all the possible ways.

If we provide different properties all will be applied and will be visible, but if we provide
same css properties.
The highest preference is given to the inline css, as it applied direct in the element, after
that id is given the highest preference as it is used to uniquely identify an element, then
we have class which is used to group multiple elements together than we have tagname
and at the last we have universal which applies to all.

Inline  Id  Class  Tagname  Universal


Combinator selector

2. Combinator Selectors:
It is a combination of 2 simple selectors. Based on the relation b/w 2 elements the css will target the
elements.
They are:
1.Descendent Selector
2. Direct Child Selector
3. Adjacent Sibling Selector
4. General Sibling Selector

● Descendent Selector :
○ It will target all the children, grandchildren , great grandchildren and so on.
○ The symbol used is space ( ).

● Direct Child Selector :


○ It will target only the children but not grandchildren , great grandchildren and so on.
○ The symbol used is greater than ( > ).
Combinator selector

● Adjacent Sibling Selector :


○ It will target only the first right sibling of the element.
○ The symbol used is plus ( + ).

● General Sibling Selector:


○ It will target all the siblings to the right of the element.
○ The symbol used is tilde ( ~ ).
Pseudo Class Selectors
3. Pseudo Class Selectors
These are the special selectors , the symbol used is single colon (:).
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user moves the mouse over it
Style visited and unvisited links differently
Style an element when it gets focus
Style valid/invalid/required/optional form elements
● :hover → It will apply the properties whenever we move the cursor on the element.
● :link → It will apply the properties whenever the link is not visited.
● :visited → It will apply the properties whenever the link is visited.
● :active → It will apply the properties whenever hyper link is in active state.
● :first-child → It will target only the first child.
● :last-child → It will target only the last child.
● :nth-child (even / odd / 2n / 2n+1 ) → It will target the specific child based on the parameter.
:placeholder-shown

Pseudo Class Selectors

● :first-of-type → It will target the first element of the type.


● :last-of-type → It will target the last child of each type
● :nth-of-type(even / odd / 2n / 2n+1 ) → It will target the specific element of the type based on
parameter
● :focus → Used with input tags, when we focus on that field.
● :checked → Used with input type radio and checkbox in input field. We use accent color to
provide background color.
● :placeholder-shown → Matches an input element that is displaying placeholder text.
● :enabled → Represents an input element that is in an enabled state.
● :disabled → Represents an input element that is in an disabled state.
Pseudo Element Selectors
4. Pseudo Element Selectors
These are the special selectors. The symbol used is double colon (::). Pseudo-element is
used to style specific parts of an element.

For example, it can be used to:


Style the first letter or line, of an element
Insert content before or after an element
Style the markers of list items
● ::first-letter → It will target only the first letter of content.
● ::first-line → It will target only the first line of content. Can only be applied to block elements
● ::before → It will add the content before the element.
● ::after → It will add the content after the element.
● ::selection → while selecting the content by default it will show color: “white” & background-
color: “blue”. To change the default behaviour we can use this.
● ::marker → It will target the type attribute of lists.
● ::placeholder → Represents the placeholder text in input and textarea.
Attribute Selectors
5. Attribute Selectors
It will target the elements based on attribute name. Instead of creating new id names and class
names we can use existing attributes.

1. TagName [attribute] → selector is used to select elements with a specified attribute .


2. TagName [attribute=”Value”] → selector is used to select elements with a specified
attribute and value.
3. TagName [attribute~=”Value”] → selector is used to select elements with an attribute
value containing a specified word.
4. TagName [attribute|=”Value”] → selector is used to select elements with the specified
attribute, whose value can be exactly the specified value, or the specified value followed by
a hyphen (-).
5. TagName [attribute^=”Value”] → selector is used to select elements with the specified
attribute, whose value starts with the specified value.
6. TagName [attribute$=”Value”] → selector is used to select elements whose attribute
value ends with a specified value.
7. TagName [attribute*=”Value”] → selector is used to select elements whose attribute
value contains a specified value.
CSS Units
CSS Units :
● In CSS, Units will specify the length of an element / size of
content.
● Units were categorized into 2 Ways
● They are:
1. Absolute Units
2. Relative Units

Absolute Units:
These units are static, It will not depend on any other values.
Absolute Units are:
1. mm
2. cm
3. in 1in  16px
4. px
CSS Units
Relative Units:

These units are dynamic, It will depend on some other values.


Relative Units are:

1. vw → depends on viewport width


2. vh → depends on viewport height
3. % → depends on parent element
4. rem → depends on root element
5. em → depends on parent element
Text Properties

Text Properties are basically used to apply CSS effects


on text content. Text properties are:

1. color
2. text-align
3. text-transform
4. text-decoration
5. text-indent
6. text-wrap
7. letter-spacing
8. word-spacing
9. line-height
10. text-shadow
Text Properties
color: It will change the color of the text.
Syntax:
color : value;
Values = Any Color.

text-align: It is used to align the content based on the value.


Syntax:
text-align : value;
Values = left / start , center , right / end , justify

text-transform: It will convert the text into other formats.


Syntax:
text-transform : value;
Values = lowercase , uppercase , capitalize.
Text Properties
text-decoration: It will decorate the text by providing underline or
overline with special styles.
It is a shorthand property of text-decoration-line , text-decoration-style &
text-decoration-color.

Syntax:
text-decoration: text-decoration-line text-decoration-style text-decoration-color
Values=
text-decoration-line ⇒ underline , overline , line-through
text-decoration-style ⇒ solid , dashed , dotted , double , wavy.
text-decoration-color ⇒ any color.
Note: out of 3 properties text-decoration-line is mandatory.
Text Properties
text-indent: It will provide the space at the initial position of the content.
Syntax:
text-indent : value; Values = any number.

text-wrap: It will indicate whether to wrap the content into the next
line or not.
Syntax: text-wrap : value;
Values = wrap , nowrap.

letter-spacing: It will specify the space between the letters.


Syntax: text-spacing : value;
Values = any number
Text Properties
word-spacing: It will specify the space between the words.
Syntax: word-spacing : value;
Values = any number.

line-height: It will specify the height of the line.


Syntax: line-height : value;
Values = any number

text-shadow: It will specify the shadow for text content.


Syntax:
text-shadow : x-axis y-axis blur color;
Default values: text-shadow : 0px 0px 0px black;
Ex: text-shadow : 2px 2px 3px blue;
Font Properties
Font properties are used to apply CSS effects of size , boldness ,
styles , etc.

Font properties are:


1.font-size
2.font-weight
3.font-style
4.font-family
5.font-variant
6.font-face
Font Properties
font-size: It will specify the size of text content.
Syntax: font-size: value;
Values = xx-small , x-small , small , medium , large , x-
large , xx-large , any number.

font-weight: It will specify the boldness of the content.


Syntax: font-weight: value;
Values = 100 - 900 , lighter , normal , bold / bolder.

font-style: It will specify the style of text like it should be italic or normal.
Syntax: font-style : value;
Values = normal , italic / oblique
Font Properties

font-family: It will specify the font family of text content.


Syntax: font-family : value;

font-variant: It will be displayed in upper camel case formats.


Syntax: font-variant : value;
Values = normal , small-caps

font-face: To add downloaded fonts from google fonts


Syntax: @font-face {
font-family:name
src:url(address)
}
Color
In CSS, we can apply colors in many ways, All colors are
extracted from the combination of Red,Green,Blue (RGB)

The ways are:


1.color-name
2.rgb
3.rgba
4.hex
5.hsl
6.hsla
7.hwl
Color
Color-name: We apply color based on color name itslef.
Syntax: property: color name;
Values = any color.

RGB: Color from combination of red,green,blue.Each color range from 0 to 255.

0 means no intensity (complete absence of that color).


255 means full intensity (the maximum amount of that color).

Syntax: property: rgb(red,green,blue);


Values = any number (0-255).

RGBA: Similar to rgb, the fourth values indicates alpha which is nothing but opacity of color.
Alpha ranges from 0.0-1.0

Syntax: property: rgb(red,green,blue,alpha);


Values = any number (0-255, 0.0-1.0).
Color
HEX: Hexadecimal color, combination of red,green,blue. Each value range
between 0-9 and a-f .
Syntax: property:#rrggbb;
We can apply in other format also if all three values are getting repeated
Syntax: property:#rgb;

HSL(Hue,Saturation,Light): Hue is a color wheel of 0-360 deg. 0 deg represents


red, 120 deg represents blue, 240 deg green

Saturation specifies % of greyness, ranges from 0-100% , 0% is a


shade of gray, with no color, while 100% is the full, pure color.

Lightness specify intensity of color, ranges from 0-100%


0%-black, 50%-neither black nor white, 100%-white
Syntax: property: hsl(hue,saturation,light);
Color
HSLA ( Hue, Saturation, Lightness, Alpha): It is exactly similar to HSL color
having a 4th value indicating alpha which represents opacity
Syntax: property : hsla ( hue, saturation, lightness, alpha);

HWB ( Hue, Whiteness, Blackness):


Syntax: property : hwb ( hue, whiteness%, blackness%);

HWBA ( Hue, Whiteness, Blackness, Alpha):


Syntax: property : hwb ( hue, whiteness%, blackness%, alpha);
Background Properties
Background properties are used to apply the background effects
to an element’s background.
Background is a shorthand property of background-color ,
background-image , background-repeat , background-position ,
background-attachment.

background: It is a shorthand property of multiple background


properties. Instead of writing all properties we can pass all values
over here.
background-color: It will specify the background color of an
element.
Syntax: background-color : value;
Values = Any color.
Background Properties
background-image: It will specify the background image of an
element.
Syntax: background-image : value;
Values = url(“pathaddress”).

background-repeat: By default the background image will repeat.


To prevent repetition of images we can use this property.
Syntax: background-repeat: value;
Values = repeat , no-repeat , repeat-x , repeat-y
Background Properties

background-position: It will specify the position of the


background image.
It is a shorthand property of background-position-x and
background-position-y.
Syntax:
background-position : background-position-x background-
position-y
Values = background-position-x ⇒ left , center , right
Background-position-y ⇒ top , center , bottom
Background Properties

background-size: It will specify how to fit the image into a


container.
Syntax: background-size : value;
Values = auto , contain , cover.

background-attachment: It will decide the behavior of the


background image. That has to scroll or fixed.
Syntax: background-attachment : values;
Values = scroll , fixed.
Border Properties
Border properties are used to apply border to the element along with that it provides
css effects to the border of an element.

1. border:
It is a shorthand property of border-width , border-style and border-color.
Syntax: border: border-width border-style border-color .

2. border-width:
It will specify the width of the border.
Syntax: border-width: any number;

3. border-style:
It will specify the style of the border.
Syntax: border-style: Values;
Values: solid , dashed , dotted , double , groove , ridge , none.
Border Properties
4. border-color:
It will specify the color of the border.
Syntax: border-style: any color;
5. border-top/bottom/left/right:
If we need to specify the border only at one side we can use border - top / border -
bottom / border - left / border-right.

6. border-collapse:
This is a property to apply effects on tables. It will decide whether the table cells have to separate
or not. Syntax: border-collapse:
values; Values: separate , collapse.

7. border-spacing:
It is an alternative to the cellspacing attribute of a table tag.
It will specify the space b/w cells in a table.
Syntax: border-spacing : any number;
Border radius

The border-radius property defines the radius of the element's corners , this
property allows you to add rounded corners to elements!

border-top-left-radius: “value”;
border-top-right-radius: “value”;
border-bottom-right-radius: “value”;
border-bottom-left-radius: “value” ;

Shorthand property to define all the values in same property


border-radius: top-Left top-right bottom-right bottom-left;
Box shadow
A box shadow is the shadow effect that appears around the edges of a box or element on a web
page. It makes the box look like it's lifted off the page

box-shadow: x-Axis Y-axis blur spread color inset;

Blur - Determines how blurred the shadow will be.


Spread - Expands or shrinks the size of the shadow.
Inset - Makes the shadow appear inside the element instead of outside
Gradient
A gradient is a gradual blend between two or more colors, often used in design to create a
smooth transition from one color to another.
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)

1. Linear Gradient
A linear gradient transitions between colors along a straight line (horizontal, vertical, or diagonal)

Syntax - background-image: linear-gradient(direction, color-stop1, color-


stop2, ...);
Values –
Direction: You can specify the direction of the gradient like :
to right (left to right) , to bottom (top to bottom) – default , to top right (bottom left to top right)
diagonal  to bottom right ,
angles  0 deg – to top , 90 deg – to right , 180 deg – to bottom
Gradient
Rainbow effect :
background: linear-gradient(to right, red, orange, yellow, green, blue);

The repeating-linear-gradient() function is used to repeat linear gradients:


#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
We can pass percentage to colors, to specify the percentage of color in the container

2. Radial Gradient
A radial gradient transitions between colors radiating out from a central point.

background-image: radial-gradient(shape size at position, start-color, ..., last-


color);
Values –
Shape: You can specify the shape of the gradient:
By default, shape is ellipse, size is farthest-corner, and position is center.
circle (circular shape)
ellipse (elliptical shape)
Gradient

The repeating-radial-gradient() function is used to repeat radial gradients:


#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

3. Conic Gradient
A conic gradient is a gradient with color transitions rotated around a center point.
A conic gradient is a type of gradient where colors are blended in a circular or pie-like pattern
around a central point, rather than in a straight line or radiating out from the center.

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

By default, angle is 0deg and position is center.


If no degree is specified, the colors will be spread equally around the center point.

Just add border-radius: 50% to make the conic gradient look like a pie:

The repeating-conic-gradient() function is used to repeat conic gradients:


Box Model
The CSS box model is a concept that describes how elements on a webpage are
structured and how their dimensions are calculated. It consists of four key
components:

It contains – Content, Padding, Border, Margin


Box Model
1. content:
The main area where the text, images, or other content of the element is displayed. The size of this
area is defined by the width and height properties.

2. padding:
It specifies the space between border and content of an element

3. border:
A line that surrounds the padding and content. Borders can have different thicknesses, styles, and
colors.
4. margin:
It specifies the space around the element. Helps to change position of element
margin is a shorthand property of margin-top , margin-bottom , margin-left , margin-right

Margin : 10px (T) 20px (R) 30px (B) 40px (L)


Margin : 10px (T) 20px (L/R) 30px (B)
Margin : 10px (T/B) 20px (L/R)
Margin : 10px (T/B/L/R)
Same as for padding also, but we cant not pass negative values in padding but we can pass in margin
Box Model
Height Calcualtion:
Total height of element = margin-top + border-top + padding-top + content-height + padding-
bottom + border-bottom + margin-bottom

Width Calculation:
Total width of element = margin-left + border-left + padding-left + content-width +
padding-right + border-right + margin-right
Box Model
Box-Sizing:
It will specify the size of an element. It will accept values like cotent-box, border-box
The default value is content-box
Border-box will fix the height and width, so padding will not affect the size of an element

Note - To remove the default margin and padding of each element we have to use
margin:0; padding:0;
So we have to use

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Visibility
The visibility property specifies whether or not an element
is visible.

Syntax: visibility : value;


Values = visible, hidden.
Positions
Positions
Positions are used to arrange the elements in a web page. It will change the
position based on position behavior.

They are:
1.Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

To deal with positions we have to use helping properties.


They are:
1. top
2. bottom
3. Left
4.right
Positions
1. Static:
a. It is the default value.
b. It will not perform any changes to the element.
c. Helping properties was not required.

2. Relative:
a. It will change the position of an element with respect to the original position.
b. It will leave an empty space. It doesn’t allow other elements to occupy its place.

3. Absolute:
It will change the position of an element with respect to the parent.
b. By default the parent is a viewport, if we need to change we have to pass position:relative
for parent element.
c. It will not leave any empty space. It allows other elements to occupy its place.
d. If we provide position:absolute for all the elements , all elements will float on each other.
e. To specify which element has to float top or bottom , we have to use the z-index property..
Positions
4. Fixed:
a. It will fix the position of an element.
b. To fix the position we have to mention the helping properties.

5. Sticky:
A .Initially these elements will scroll until it reaches to some point.
b. Then it will stick at that position.

Note: If we specify the position as relative / absolute / fixed /


sticky elements will float on the z-axis. All of the above need the
help properties. We should not use top and bottom / left and right
at a time.
Z-Index

Z-index
The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with


a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position:


relative, position: fixed, or position: sticky)
What is !important?
The !important rule in CSS is used to add more importance to a
property/value than normal.

#myid {
background-color: blue;
}

.myclass {
background-color: gray;
}

p {
background-color: red !
important;
}
Display property
Display
Display property allows to change the behavior of an element.
It accepts the values like

● None
● Inline
● Block
● Inline-block
● Flex
● Grid
Display property
None:
● This will not display anything in the browser.
● As well as it will not occupy any space for the element.

Inline:
● It will convert the element into inline-level.
● So then the element will occupy only content height and width.
● We cannot assign height & width properties.

Inline-Block:
● It will convert the elements into inline-block level.
● So then it will have features of both inline & block level.
● Because of inline → It will display in the same line.
● Because of block → we can assign height & width properties.
Display property
Flex:
● It will layouts the webpages in one dimensional
format.
Grid:
● It will layouts the webpages in two dimensional
format
FLEX
Flex:
• It will layouts the webpages in one dimensional
format.
• To work with flex boxes, We need a flex container
and all the direct children will become the flex-
items. (ONLY DIRECT CHILDREN).
FLEX
Flex Container Properties:
1. Display : flex
2. justify-content
3. align-items
4. flex-direction
5. flex-wrap
6. align-content
7. column-gap
8. row-gap
9. gap
FLEX
1. display: flex;
This is the main property we must use to work with
flex boxes. By assigning this property we are able to
use all flex properties.
2. Justify-content
It will align the flex-items on the main axis.
Syntax:
justify-content: values;
Values = start , center , end , space-between ,
space-evenly , space-around.
The default value is start.
FLEX
2. justify-content: values;
FLEX
3. align-Items: It will align the flex-items on the cross
axis.
Syntax:
align-items: values;
Values = start , center , end , stretch ,
baseline.
The default value is start.
FLEX
3. align-items: values;
FLEX
4. flex-direction: It will specify the direction of flex-
items. Whether to display in row format or column
format. It will decide the main axis.

Syntax:
flex-direction: values;
Values = row , column , row-reverse ,
column-reverse.
The default value is row.
FLEX
4. flex-direction: values;
FLEX
5. flex-wrap: It will specify whether to wrap the flex-
items into the next line or not.
Syntax:
flex-wrap: values;
Values = nowrap , wrap , wrap-reverse.
The default value is nowrap.
FLEX
5. flex-wrap: values;
FLEX
6. align-content: It will specify the position of
wrapped flex items.
Syntax:
align-content: values;
Values = start , center , end , space-between ,
space-around , stretch
FLEX
6. align-content: values;
FLEX
7. gap:
It is a shorthand property of row-gap & column-gap. It
will specify the space between the flex items.
Ex: row-gap:20px & column-gap:20px;
FLEX
gap : 20px;
FLEX
Flex items Properties:
1. order
2. align-self
3. flex-grow
4. flex-basis
5. flex-shrink
6. flex
FLEX
1. Order : It will arrange the flex-items in an order.
Ex:
FLEX
2. align-self:
By using this property, we can align the flex-items
individually.
It will override the default alignment which is specified
by align-items.
It will accept all the values which can be acceptable
by align-items property.
The only difference is
i. align-items for container for all flex-items.
ii. align-self for items for individual flex-item.
FLEX
2. align-self: value;
Values :
FLEX
3. Flex-grow:

It will make sure the flex-items have to fit to the flex-


container.
It will increase the size of the flex–items based on
remaining space.
The remaining space in a container will be divided
into units and it will be added to each flex-item based
on flex-grow values
FLEX
3. Flex-grow:
FLEX
4. flex-basis It is equivalent to the width property.
This overrides any previously defined width for that
element.
Ex:
FLEX
5. flex-shrink: It will shrink the size of the flex-items.
Based on the extra space required in a container to fit
all the flex-items.
If there is no enough space in a container to fit all the
flex-items then all flex-items will shrink(decreases)
equally and fit’s in a container.
FLEX
5. flex-shrink
FLEX
6. Flex
It is a shorthand property of flex-grow , flex-shrink and
flex-basis.
Ex: flex: 1
flex : flex-grow flex-shrink flex-basis;
flex : 1 1 400px;
If we specify flex 1 , it will increase , decrease , and
width equally.
GRID
GRID:
• It will layouts the webpages in two dimensional format.
• To work with grid, We need a grid container and all the direct
children will become the grid-items. (ONLY DIRECT
CHILDREN).
GRID Container Properties:
1. Display : grid
2. grid-template-columns
3. grid-template-rows
4. column-gap
5. row-gap
6. gap
GRID
1. display: grid;
It specifies the container as a grid container.
So that we can use all the grid properties.

2. grid-template-columns
It will specify no.of columns along with the width of each column.
As the width of the cell is defined here, It is not required to
mention again for the grid item.

3. grid-template-rows
It will specify no.of rows along with the height of each row.
As the height of the cell is defined here, It is not required to
mention again for the grid item.
GRID
/* CSS Code */
section {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
/* It will consider as 4 columns each with 200px width */
grid-template-rows: 150px 50px 150px 30px 100px;
/* It will consider as 5 rows with widths => 1st - 150px , 2nd - 50px , 3rd - 150px , 4th -
30px , 5th - 100px*/
}
GRID
We can pass the values for grid-template-rows and grid-
template-columns in multiple ways.
grid-template-columns: 200px 100px 150px 100px 80px 20px;

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


grid-template-columns: 150px 150px 150px 150px;
grid-template-columns: repeat(4, 180px);
grid-template-columns: repeat(4, auto);
grid-template-columns: 1fr 3fr 1fr;
grid-template-columns: repeat(4,1fr);

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


grid-template-rows: 1fr 1fr 1fr;
grid-template-rows: 1fr 5fr 1fr;

grid-template-rows: 0.5fr 0.2fr 1fr 0.2fr;


GRID
4. gap:
It will specify the space between the grid items.
It is the shorthand property of row-gap & column-gap.
section {
row-gap: 5px; column-gap: 20px;
===== or ======
gap: 5px 20px;
}
GRID

GRID items Properties:


1. grid-row-start
2. grid-row-end
3. grid-row
4. grid-column-start
5. grid-column-end
6. grid-column
7. grid-area
GRID
1. grid-row :
It is a shorthand property of grid-row-start and grid-row-end.
Grid-row-start will specify where to start the row.
Grid-row-end will specify where to end the row.
Syntax: grid-row: grid-row-start/grid-row-end
Ex: grid-row: 1/5;
.item1 {
grid-row-start: 1;
grid-row-end: 5;
======= or =======
grid-row: 1/5;
}
GRID
2. grid-column :
It is a shorthand property of grid-column-start and grid-column-end.
Grid-column-start will specify where to start the column.
Grid-column-end will specify where to end the column.
Syntax: grid-column: grid-column-start/grid-column-end
Ex: grid-column: 1/5;

.item1 {
grid-column-start: 1;
grid-column-end: 5;
======= or =======
grid-column: 1/5;
}
GRID
3. grid-area :
It is the shorthand property of grid-row-start , grid-column-start , grid-
row-end and grid-column-end.
Syntax: grid-row-start/grid-column-start/grid-row-end/grid-column-end.
Ex: grid-column: 1/1/3/5;

.item1 {
grid-area: 1/1/3/5;
}
Transform
Transform
Transform will change the state of an element like changing position ,
applying rotations , altering sizes, etc…
======== or ===========
It will transform the elements original behaviour with new behaviours like
changing positions , applying rotations , altering sizes , etc..
Syntax: transform: value;
Values:
translateX() translateY() translate()
scaleX() scaleY() scale()
skewX() skexY() skew()
rotateX() rotateY() rotate()
Transform
Translate():
It will change the position of an element according to x-axis and y-axis.
It is a shorthand property of

translateX() → which will according to x-axis


And
translateY() → which will according to y-axis

Ex: transform: translateX(200px);


transform: translateY(400px);
transform: translate(200px , 400px);
Transform
Scale():
It will alter the sizes of an element based on the scale value provided
either to increase or decrease.
By default, the scale is 1.

Ex:
transform: scaleX(2); // It will increase the width into double.
transform: scaleY(0.5); // It will decrease the height into half.
transform: scale(2,0.5); // It will increase the width & decrease the
height.
Transform
Skew():
It will slant the elements in x and y axises.
Ex: transform: skewX(40deg);
transform: skewY(20deg);
transform: skew(40deg , 20deg);

Rotate(): It will rotate the element in clockwise and anticlockwise


directions.
Ex:
transform: rotateX(90deg);
transform: rotateY(180deg);
transform: rotate(90deg); // clockwise
transform: rotate(-90deg); // anticlockwise
Transition
Transition :
Transition will apply the hover effects smoothly.
Without hover this property will not work.
It is a shorthand property of

Transition-property
Transition-duration
Transition-delay
Transition-timing-function
Transition
Transition-property:
It will specify which properties have to be targeted. (In hover
we will have many properties , for which property transition have to
apply).
If we are not targeted specifically, It will target all.

Transition-duration:
It specifies how long the transition has to occur.
The default is 0 secs

Transition-delay:
It specifies when the transition has to apply.
Basically, it provides a delay time. So transition will start after
that time.
The default is 0 secs.
Transition
Transition-timing-function:
It specifies the speed format of transition.
We can assign the values like

ease-in → slow start


ease-out → slow end
ease-in-out → slow start and slow end
ease → slow start , fast , slow end
linear → same speed
Animation
Animation
Animations will change the style of an element from one style
to another style to another style and so on.
Animation is a shorthand property of

Animation-name
Animation-duration
Animation-delay
Animation-timing-function
Animation-direction
Animation-iteration-count
Animation
As we said, animation will change from one style to another and so on.
To store all these styles we have to use @keyframes rule.
Syntax:
Animation
Animation-name:
It specifies the animation-name which is nothing the @keyframes rule
identifier name.
We can create @keyframes rules with different styles.
Which animation you want to use, you can specify that identifier name.

Animation-duration:
It specifies how the animation has to apply

Animation-delay:
It specifies when the animation has to start.
Animation
Animation-timing-function:
It specifies the speed format of animation.
We can assign the values like

ease-in → slow start


ease-out → slow end
ease-in-out → slow start and slow end
ease → slow start , fast , slow end
linear → same speed
Animation
Animation-direction:
It specifies the direction of animation.
We can assign the values normal , reverse , alternate and
alternate-reverse.

Animation-iteration-count: It specifies how many times the animation


has to apply.
We can assign any number or infinite.
CSS Responsiveness
CSS Responsiveness
To achieve responsiveness, mainly we have to use @media
rule.
@media:
Basically, this @media rule will provide some features.
Features like mediaType, mediaOperator and mediaFeatures
which will work as conditions. If these conditions are satisfied then a
particular block of code will be executed.
CSS Responsiveness
MediaType:
It will specify the type of view mode.
It will accept the values like all, screen , print.
The default value is all.

MediaOperator:
This will combine multiple media features.
It will accept the values like and , or , not.
And → it will check if all the conditions are true or not.
Or → it will check if any of the conditions are true or not
CSS Responsiveness
MediaFeatures:
It will provide some breakpoints based on screen sizes.
It will accept the values like:
1. min-width
2. max-width
3. width
4. min-height
5. max-height
6. height
7. orientation: landscape / portrait
CSS Responsiveness
Thank you

You might also like