Scribd
Upload
8 views43 pages

Unit1 Part2 CSS

nn

Uploaded by

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

Unit1 Part2 CSS

nn

Uploaded by

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

UNIT:2

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

1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.
For example:
<p style="color:blue">Hello CSS</p>

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect
all the elements of the page. It is written inside the style tag within head
section of html.
For example:
<style>
p{color:blue}
</style>

3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we
write all the CSS code in a css file. Its extension must be .css for example
style.css.
For example:
p{color:blue}
You need to link this style.css file to your html pages like this:
<link rel="stylesheet" type="text/css" href="style.css">
<style>tag

Definition and Usage

The <style> tag is used to define style information (CSS) for a


document.
Inside the <style> element you specify how HTML elements should
render in a browser.

Attribute Value Description

media media_qu Specifies what media/device


ery the media resource is
optimized for

type text/css Specifies the media type of


the <style> tag

Type attribute
The type attribute specifies the Internet media type (formerly known as
MIME type) of the <style> tag.
The type attribute identifies the content between
the <style> and </style> tags.
The default value is "text/css", which indicates that the content is CSS.
Media Attribute

The media attribute specifies what media/device the CSS style is


optimized for.

This attribute is used to specify that the style is for special devices (like
iPhone), speech or print media.

<style type=”text/css” media=”print”>


H1{color :white; background-color: gray ; font-size: 45px}
</style>

Code

<html>
<head>
<style type="text/css">
h1{color : red; background-color: black; font-size:45px;}
</style>

</head>
<body>
<h1>hiiiiiiiiiiiiiiii</h1>
</body>

</html>

With this we get same style when we print but if we want another style while
printing so we have to change this.
<style type="text/css" media="print">
h1{color : white; background-color: black; font-size:45px;}
</style>
Now we get this style when we print.

Now we want when screen become smaller than 500.

<style type="text/css" media="screen and (max-width:500px)">


h1{color : white; background-color: black; font-size:45px;}
</style>

<Link>atribute
<link rel=”stylesheet” type=”text/css” href=”style.css”>
this will work when in same folder
for different folder give path at href.

CSS Colors
The color property in CSS is used to set the color of HTML elements. Typically, this property is
used to set the background color or the font color of an element.

color basically use in properties like Color background and border.

color=”value”

value= RGB format.

● RGBA format.

● Hexadecimal notation.

● HSL.

● HSLA.
● Built-in color.

RGB=Red GReen Blue(name of color)


also use in hexa decimal values. we get this value from photoshop or by internet.

example=rgb(000)=black

rgb(255,255,255)=white

Hexadecimal notation
Hexadecimal can be defined as a six-digit color representation. This notation starts with the #
symbol followed by six characters ranges from 0 to F. In hexadecimal notation, the first two
digits represent the red (RR) color value, the next two digits represent the green (GG) color
value, and the last two digits represent the blue (BB) color value.

The black color notation in hexadecimal is #000000, and the white color notation in
hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are #FF0000, #00FF00,
#0000FF, #FFFF00, and many more.

Syntax

1. color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

Also work in 3 digit

example=#000= black

+100=light red (0-f) full red

#fff=white

Background (part1)
● Can set individual background for different sections like div h1 etc.

Properties

● Border(part1)
● color
● image
● position
● repeat
● size
● origin
● clip
● attachment
● blend-mode

Some of the background properties with image attach with it.

body{

background-color: hwb(88 0% 0%);

background-image: url(m1.jpg),url(m2.jfif);

background-size:cover;

background-repeat: no-repeat;

background-position: top center,top left;

background-position-y: bottom;

In this example only few properties shown with image the rest we understand with border.

in this part only one property of border shown in which border size, its form and its color is
shown.
<style type="text/css" >
body{
background-color: green;
}
.box1{
width: 300px;
margin: 200px;
padding: 100px;
border:40px solid black;
}
</Style>
we may have property of border with together or with different property
also. example- border:40px solid black
this may have different border style instead solid,

Background(part2)
Background-repeat=”value”

value= no-repeat
repeat
repeat-x
repeat-y
round // this work in repeat means small image repeat itself and instead of half image at last it
will take a round aspect and at last of the container it will finish image instead of half image.
space // this also work in repeat and space between repeated images.
If want more than one image
background-image:url(path),url(path),url(path)

background-position=”value”
values=bottom
top
center
left
right
Apart from these values we can adjust position by percent and pixels also that will good for
responsive websites.

Background -image
Background -image :value;

Value = image()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
url()
background-image:url(“path of image”) //every image is repeating
background-image:linear-gradient(position of color in deg or direction, colors either with percent or
not )

in terms of direction (to right bottom)so image move from bottom to top in right direction.
background-image:linear-gradient( 45deg,red,green,blue 50%);

Example:
<style type="text/css" >
body{
background-image: url(m5.jpg);
}
.A{
width: 800px ;
height:100px;
margin: 10px;
padding: 10px;
}
.box1{ //multiple color linear line
background-color: blue;
background-image:linear-gradient(red,green,blue,yellow,violet,aqua);
border: 10px solid black;
}

.box2{ // transparecy between box and backgrond image


background-image:linear-gradient(rgba(255, 0, 0,1),rgba(255, 0, 0, 0.2));
border: 10px solid black;
}

.box3{ // only one color have percent can have more than one and alo direct
gradient direction
background-color: blue;
background-image:linear-gradient( to left bottom,red,green,blue 50%);
border: 10px solid black;
}

.box4{// direction by deg


color: white;
background-image:linear-gradient( 45deg,red,green,blue 50%);
border: 10px solid black;
}
</Style>
Repeating linear gradient
Example
<style type="text/css" >
body{
background-image: url(m4.webp);}
.A{
width: 800px ;
height:100px;
margin: 10px;
padding: 10px;
}

.box1{// this is same as linear gradient


background-image:repeating-linear-gradient(hsl(0, 100%, 50%),green,yellow);
border: 10px solid black;
}
.box2{// for checking repeating pattern we must give percent
background-image:repeating-linear-gradient(to right,red,green 10%,yellow
20%);
border: 10px solid black;
}
.box3{// direction by deg
background-color: blue;
background-image:repeating-linear-gradient(45deg,red,green 10%,yellow 20%);
border: 10px solid black;
}

</Style>

background-image:repeating-linear-gradient(45deg,red,green 10%,yellow 20%);

in this we must give percent to any two color so that image repeat pattern shown,

Radial gradient
In this elliptical image shown by default as per color given bt we can change there shape along with
there sides,

Example
<style type="text/css" >
body{
background-image: url(m8.webp);
background-size: cover;

}
.A{
width: 2000px ;
height:500px;
margin: 50px;
padding: 10px;
border: 10px solid black;
}
.box1{
background-image:radial-gradient(red,yellow,green);
}

.box2{
background-image:radial-gradient(red,yellow,green 50%);
}

.box3{
background-image:radial-gradient(closest-corner at 40%,red, yellow,green);
}
.box4{
background-image:radial-gradient( circle at bottom right,red, yellow,green);
}

</Style>
repeating-radial-gradient
Example
<style type="text/css" >
body{
background-image: url(m8.webp);
background-size: cover;

}
.A{
width: 2000px ;
height:500px;
margin: 50px;
padding: 10px;
border: 10px solid black;
}
.box1{
background-image:repeating-radial-gradient(red,yellow 10%,green 20%);
}

.box2{
background-image:repeating-radial-gradient(red,yellow,green 50%);
}
.box3{
background-image:repeating-radial-gradient(closest-corner at 40%,red,
yellow,green);
}
.box4{
background-image:repeating-radial-gradient(circle at bottom right, red,
yellow 10%,green 20%);
}

</Style>

Blendmode
this will merge two images along with image it blend gradient also with url we can give gradient whose
effect we can show in pictures which blend in screen

blend:”value”

value= multiply

darken

limuniosity//more light

overlay

difference//negetive

saturation

screen
lighten

Example
<style type="text/css" >

*{
margin:0;
padding:0;

}
.box1{
width:100vw;
height:100vh;
background-color: blue;
background-image: url(m2.jfif);
background-repeat: no-repeat;
background-size: contain;
background-blend-mode:multiply;
}
</Style>
Another Example:
.box1{
width:100vw;
height:100vh;

background-image: url(m4.webp),url(m3.jfif),linear-gradient(red,yellow);
background-repeat: no-repeat;
background-size: cover;
background-blend-mode:multiply;
}
Background-size=value;

value=auto // whatever is the size of image resize that only in BG and if image is small so it starts
repeating.
contain// use in articles, contain in full container as per the container means if large image and
small container so this value shrink image as per container size and no stretch and also repeat as
usual..
cover// this will cover whole page repeating as happen in small image.
and apart from this we can use size also as we want.// ex-500,500

Background origin/clip
Values= border box

Padding box

Content box

.box1{

background-clip:padding-box; }

.box2{

background-clip:border-box; }

.box3{

background-clip: content-box; }

Background attachment
Values=scroll // by default image move along with text.

Fixed //image fixed text move

Local//use in border when we want to scroll image along with text.

Border
we already know about border keyword, instead of this we can use border different
values.
for different style,width,color of different side.

Example
Border: 10px solid black

the same written as

border-width:10px

border-style:solid

border-color:black

but without border style thier will be no border.

border style= ;
dashed
dotted
double
grove//3d border
hidden
unset
transparent
thick
thin
ridge//opposite of grove in 3d
outset//outward
inset//inword
none
border width: thin//by default 1px

thick//4px

medium//2px

we can handle 4 sides differently by giving 4 different values

border color: by default gray

and we can handle 4 sides differently by giving 4 values,

border-color:top right bottom left

for the values we can give any values.

we can handle border for specefic headings also.

Example
<style type="text/css" >
.A{
margin:100px;
width: 1000px;
height:300px;
}
.B1{
border: thin solid;
}
.B2{
border-width: 10px;
border-style: dashed;
border-color: brown;
}
.B3{
border-bottom: 50px;
border-style: dashed;

}
.B4{
border-top: 10px solid;
border-left: 5px dotted;
border-bottom: 10px dashed;
border-right: double;
}
.B5{
border-style: dashed;
border-top-color: blue;
border-left-color: red;
border-bottom-color: yellow;
border-right-color: green;
}
</Style>

output
Border-Radius
<style type="text/css" >

.A{
margin:100px;
width: 1000px;
height:300px;

}
.B1{
padding: 2s0px;
border: 20px solid;
border-radius: 100%;
text-align: center;

}
.B2{
border-width: 10px;
border-style: dashed;
border-color: brown;
border-end-end-radius: 100px;
}
.B3{

border-style: solid;
border-start-end-radius: 100px;

}
.B4{

border-top: 10px solid;


border-left: 5px dotted;
border-bottom: 10px dashed;
border-right: double;
border-top-left-radius: 100px;
}

</Style>
Border-Image
Till now we have done with simple background color, now we apply images.

Background Image properties

border-image-source

border-image-repeat

border-image-slice

border-image-outset

1) border-image-source:value;

values= same as background Image values

2) border-image-repeat:value;

values=stretch, same a BG Images

3) border-image-slice:The border-image-slice property specifies how to slice the image specified by


border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle. The
"middle" part is treated as fully transparent, unless the fill keyword is set.

value is in percent

4) border-image-outset:value;
specifies the amount by which the border image area extends beyond the border box. value
in numbers.

Background Image
<style type="text/css" >
.C{

margin:100px;
width: 500px;
height:300px;
}

.A{
border: 30px solid;
border-image-source: url(border2.jpg);
border-image-slice: 64;
}
.B{

border: 50px solid;


border-image-source: url(border.jpg);
border-image-repeat:stretch;
border-image-slice: 40;
border-image-outset: 20px;
}
.A h1{
padding:0px 20px 0px 20px;
border-left: 100px solid black;
border-right: 250px solid black;
}
</Style>

Output
Margin
<style>
*{
margin: 0;
padding: 0;
}
.A{
width:600;
margin:100px;
border:solid;

}
article{
border:solid;
margin: 20px 5px 50px 100px;
}
</style>

output
Padding
<style>
*{
margin: 0;
padding: 0;
}

.A{
width:600;
margin:100px;
padding: 20px;
border:solid;
}
article{
border:solid;
margin: 20px 5px 50px 100px;
padding: 20px 5px 50px 100px;
}
</style>
Text Properties
color

letter-spacing

word-spacing

text-indent

text-align

text-decoration

text-tranform

text-shadow

Example:

<style>
*{
margin: 0;
padding: 0;
}
article{
width: 500px;
height:500px;
border:solid;
margin: 20px 5px 50px 100px;
padding: 20px;
}
h1{
color: blue;
letter-spacing: 10px;
text-decoration: underline;
text-transform:uppercase;
}
.B{
color: green;
word-spacing: 5px;
text-indent: 50px;
text-align: justify;
}
.c{
color:brown;
word-spacing: 5px;
text-align: center;
}
h2{
color: blueviolet;
text-transform: uppercase;
text-shadow:-5px -5px 7px rgb(247, 4, 45);
}
</style>
The color property is used to set the color of a text.

The direction property is used to set the text direction.

The letter-spacing property is used to add or subtract space between the letters that make up a

word.

The word-spacing property is used to add or subtract space between the words of a sentence.

The text-indent property is used to indent the text of a paragraph.

The text-align property is used to align the text of a document.

The text-decoration property is used to underline, overline, and strikethrough text.

The text-transform property is used to capitalize text or convert text to uppercase or lowercase

letters capatalize, .

The white-space property is used to control the flow and formatting of text.

The text-shadow property is used to set the text shadow around a text.

X, Y, blur, color
Font-family
<style>
*{
margin: 0;
padding: 0;
}
article{
width: 500px;
height:500px;
border:solid;
margin: 20px 5px 50px 100px;
padding: 20px;
}
h1{
color: blue;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;
}
.B{
color: green;
font-family: arial;
}
.c{
color:brown;
font-family:"helveticac neue";
}
</style>

Output
The font-family property specifies the font for an element.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the
first font, it tries the next font.
There are two types of font family names:
● family-name - The name of a font-family, like "times", "courier", "arial", etc.
● generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
Note: Separate each value with a comma.
Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style"
attribute in HTML.

font Size
The font-size property sets the size of a font.

medium Sets the font-size to a medium size. This is default

xx-small Sets the font-size to an xx-small size

x-small Sets the font-size to an extra small size

small Sets the font-size to a small size

large Sets the font-size to a large size

x-large Sets the font-size to an extra large size

xx-large Sets the font-size to an xx-large size

smaller Sets the font-size to a smaller size than the parent element

larger Sets the font-size to a larger size than the parent element

length Sets the font-size to a fixed size in px, cm, etc.

% Sets the font-size to a percent of the parent element's font size


font-Style

Value

normal The browser displays a normal font style. This is default

italic The browser displays an italic font style

oblique The browser displays an oblique font style

font-weight

Value Description

normal Defines normal characters. This is default

bold Defines thick characters

bolder Defines thicker characters

lighter Defines lighter characters


100 Defines from thin to thick characters. 400 is the same as
200 normal, and 700 is the same as bold
300
400
500
600
700
800
900

font-variety
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase
letters appear in a smaller font size than the original uppercase letters in the text.
The font-variant property specifies whether or not a text should be displayed in a small-caps font.

line-height

Value

normal A normal line height. This is default

number A number that will be multiplied with the current font-size to set the line height

length A fixed line height in px, pt, cm, etc.

% A line height in percent of the current font size

Font Shorthand
To shorten the code, it is also possible to specify all the individual font properties in one property.
The font property is a shorthand property for:
● font-style
● font-variant
● font-weight
● font-size/line-height
● font-family
Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font

List
We have the following five CSS properties, which can be used to control lists −

The list-style-type allows you to control the shape or appearance of the marker.

The list-style-position specifies whether a long point that wraps to a second line should align with the first
line or start underneath the start of the marker.

The list-style-image specifies an image for the marker rather than a bullet point or number.

The list-style serves as shorthand for the preceding properties.

The marker-offset specifies the distance between a marker and the text in the list.

The list-style-type Property


The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the
case of unordered lists and the style of numbering characters in ordered lists.

Here are the values which can be used for an unordered list −

Sr. Value & Description


No
.

1 none
NA

2 disc (default)
A filled-in circle
3 circle
An empty circle

4 square
A filled-in square

Here are the values, which can be used for an ordered list −

Value Description Example

decimal Number 1,2,3,4,5

decimal-leading-zero 0 before the number 01, 02, 03, 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

The list-style-position Property


The list-style-position property indicates whether the marker should appear inside or outside of the box
containing the bullet points. It can have one the two values −

Sr. Value & Description


No
.

1 none
NA

2 inside
If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented
to where the text would have started if the list had a value of outside.
3 outside
If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of
the bullet).

The list-style-image Property


The list-style-image allows you to specify an image so that you can use your own bullet style.

The syntax is similar to the background-image property with the letters url starting the value

of the property followed by the URL in brackets. If it does not find the given image then

default bullets are used

Example

<style>
*{
margin: 0;
padding: 0;
}

article{
width: 500px;
height:500px;
border:solid;
margin: 20px 5px 50px 100px;
padding: 20px;
padding-left: 50px;
}
h1{
color:whitesmoke;
background-color: blueviolet;
}

h2{
color:whitesmoke;
background-color: blueviolet;
}
ul{
list-style-type: circle;
list-style-image: url(arrow.png);

ol{
list-style-type: decimal-leading-zero;
}
.A{
list-style-type: lower-alpha;
list-style-position: inside;
}
</style>

output

Overflow
The CSS overflow property specifies how to handle the content when it overflows its block level
container.

CSS Overflow property values


Value Description

visible It specifies that overflow is not clipped. it renders outside the element's box.this is a default value.

hidden It specifies that the overflow is clipped, and rest of the content will be invisible.

scroll It specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.

auto It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
Example

style>
*{
margin: 0;
padding: 0;
}
div.c {
margin: 50px;
border:solid black;
width: 300px;
height: 500px;
overflow: visible;
overflow-y: hidden;
}
img{
opacity: .7;
}
.D{
margin: 50px;
border: 10px solid red;
width: 500px;
height: 800px;
overflow:scroll ;
}

</style>

output
Link
Set different properties of a hyper link using CSS. You can set following properties of a hyper link

The :link signifies unvisited hyperlinks.

The :visited signifies visited hyperlinks.

The :hover signifies an element that currently has the user's mouse pointer hovering

over it.

The :active signifies an element on which the user is currently clicking.

<style>
a{
text-decoration: none;
}

a:link{
color:rgb(36, 128, 0);
background-color: aqua;
text-decoration: underline;
}
a:visited{

color:rgb(255, 0, 8);
text-decoration: none;
background-color: white;
}
a:hover{
color: hotpink;
background-color: blue;
}
a:active{
color:yellow;
}

</style>

float
The CSS float property is a positioning property. It is used to push an element to the left or right,
allowing other element to wrap around it. It is generally used with images and layouts.

To understand its purpose and origin, let's take a look to its print display. In the print display,
image is set into the page such that text wraps around it as needed.

Elements are floated only horizontally. So it is possible only to float elements left or right, not up
or down.

1. A floated element may be moved as far to the left or the right as possible. Simply, it
means that a floated element can display at extreme left or extreme right.

2. The elements after the floating element will flow around it.

3. The elements before the floating element will not be affected.

4. If the image floated to the right, the texts flow around it, to the left and if the image
floated to the left, the text flows around it, to the right.

Value Description
none It specifies that the element is not floated, and will be displayed just where it occurs in the text. this
is a default value.

left It is used to float the element to the left.

right It is used to float the element to the right.

CSS Position
The CSS position property is used to set position for an element. it is also used to place an element behind
another and also useful for scripted animation effect.

You can position an element using the top, bottom, left and right properties. These properties can be used only
after position property is set first. A position element's computed position property is relative, absolute, fixed or
sticky.

Let's have a look at following CSS positioning:

1. CSS Static Positioning

2. CSS Fixed Positioning

3. CSS Relative Positioning

4. CSS Absolute Positioning

1) CSS Static Positioning


This is a by default position for HTML elements. It always positions an element according to the normal flow of
the page. It is not affected by the top, bottom, left and right properties.

2) CSS Fixed Positioning


The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to
the browser window, and doesn't move even you scroll the window.

3) CSS Absolute Positioning


The absolute positioning is used to position an element relative to the first parent element that has a position
other than static. If no such element is found, the containing block is HTML.

With the absolute positioning, you can place an element anywhere on a page.
Selectors
● Simple Selector
● Combinator Selector
● Attribute Selector
● Pseudo-Class Selector
● Pseudo-Element Selector

Combinator Selector
There are four different combinators in CSS:

● descendant selector (space)


● child selector (>)
● adjacent sibling selector (+)
● general sibling selector (~)

CSS [attribute] Selector


The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

table
We can apply style on HTML tables for better look and feel. There are some CSS properties that
are widely used in designing table using CSS:

○ border

○ border-collapse

○ padding

○ width

○ height

○ text-align

○ color

○ background-color

○ caption side

○ empty cell

○ table layout

CSS Table Border


We can set border for the table, th and td tags using the CSS border property.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>

CSS Table Border Collapse


By the help of border-collapse property, we can collapse all borders in one border only.

by default separate.

1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>

CSS table border spacing

first value space between col and second row

no effect in collapse

border-spacing: 10px 20px;

vertical align

by default middle

vertical-align: bottom;

when lots of text

table layout
by default auto

other value: fixed

table-layout: auto;

Example

<style>
table,td{
border: 1px solid black;
border-collapse: separate;
border-spacing: 10px 20px;
vertical-align: bottom;
empty-cells: show;
}
table{
width: 300px;
table-layout: auto;
}
td{
padding: 5px 10px;
}
caption{
caption-side: bottom;
}
tr:hover{
background-color: gray;
}
tr:nth-child(even)
{
background-color: green;
color:wheat;
}
</style>

Output
transition
To create a transition effect, you must specify two things:

● the CSS property you want to add an effect to


● the duration of the effect

the following properties are:

● transition
● transition-delay
● transition-duration
● transition-property
● transition-timing-function

Change Several Property Values


The following example adds a transition effect for both the width and height property, with a duration of 2
seconds for the width and 4 seconds for the height:

Example
div {

transition: width 2s, height 4s;}

Specify the Speed Curve of the Transition


The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

● ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)

● linear - specifies a transition effect with the same speed from start to end

● ease-in - specifies a transition effect with a slow start

● ease-out - specifies a transition effect with a slow end

● ease-in-out - specifies a transition effect with a slow start and end

● cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

Delay the Transition Effect


The transition-delay property specifies a delay (in seconds) for the transition effect.
The following example has a 1 second delay before starting:

Example
div {

transition-delay: 1s

You might also like