Scribd
Upload
44 views

Css Stands For Cascading Style Sheets: Styling Can Be Added To HTML Elements in 3 Ways

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents. CSS describes how elements should be rendered on screen, paper, or other media. CSS allows you to control the color, font, size, spacing, and other properties of text and elements. Styling can be added to HTML elements using inline, internal, or external CSS. CSS selectors are used to select the HTML elements to style and there are different types of selectors like element, id, class, and universal selectors.

Uploaded by

richa52232
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

Css Stands For Cascading Style Sheets: Styling Can Be Added To HTML Elements in 3 Ways

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents. CSS describes how elements should be rendered on screen, paper, or other media. CSS allows you to control the color, font, size, spacing, and other properties of text and elements. Styling can be added to HTML elements using inline, internal, or external CSS. CSS selectors are used to select the HTML elements to style and there are different types of selectors like element, id, class, and universal selectors.

Uploaded by

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

CSS TUTORIAL

CSS STANDS FOR CASCADING STYLE SHEETS


Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation
of a document written in HTML or XML (including XML dialects such as SVG or XHTML).
CSS describes how elements should be rendered on screen, on paper, in speech, or on
other media .
What does CSS DO?
• You can add new looks to your old HTML documents.
• You can completely change the look of your website with only a few changes in
CSS code.
Styling can be added to HTML elements in 3 ways:
➢ Inline - using a style attribute in HTML elements.
➢ Internal - using a <style> element in the HTML <head> section.
➢ External - using one or more external CSS files.
CSS Syntax
CSS styling has the following syntax:
Element
{
Property: value;
Property: value;
}
CSS Example
CSS styling has the following syntax:
p
{
Back-ground: red;
Font size:30px;
}

TECHNICIA INSTITUTE OF TECHNOLOGY 1


CSS TUTORIAL

Inline Styling (Inline CSS)


Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Internal Styling (Internal CSS)
An internal style sheet can be used to define a common style for all HTML elements on a
page.
Internal styling is defined in the <head> section of an HTML page, using a <style>
element:
<html>
<head>
<title>internal css</title>
<style>
body {
Background-color: lightgrey;
}
h1{
color:blue;
}
p{
color:green;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

TECHNICIA INSTITUTE OF TECHNOLOGY 2


CSS TUTORIAL

External Styling (External CSS)


External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire web site by changing one
file.
External styles are defined in an external CSS file, and then linked to in the <head>
section of an HTML page:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2.<link rel="stylesheet" type="text/css" href="mystyle.css">

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute
etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

TECHNICIA INSTITUTE OF TECHNOLOGY 3


CSS TUTORIAL

CSS Class Selector


The class selector selects HTML elements with a specific class attribute. It is used with a
period character. (full stop symbol) followed by the class name.
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

TECHNICIA INSTITUTE OF TECHNOLOGY 4


CSS TUTORIAL

CSS Universal Selector


The universal selector is used as a wildcard character. It selects all the elements on the
pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.

h1,h2,p {
text-align: center;
color: blue;
}

TECHNICIA INSTITUTE OF TECHNOLOGY 5


CSS TUTORIAL

CSS Color
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
The CSS Background
The CSS background properties are used to define the background
effects for elements.
In these chapters, you will learn about the following CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

1. Background-image
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>

TECHNICIA INSTITUTE OF TECHNOLOGY 6


CSS TUTORIAL

2. background-repeat
the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>
3. Background-attachment
The background-attachment property is used to specify if the background image is fixed
or scroll with the rest of the page in browser window. If you set fixed the background
image then the image will not move during scrolling in the browser.
<html>
<head>
<style>
body {
background: white url('bbb.gif');
background-repeat: no-repeat;
background-attachment: fixed;
margin-left:200px;
}
</style>
</head>
<body>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>

TECHNICIA INSTITUTE OF TECHNOLOGY 7


CSS TUTORIAL

<p>This is a fixed background-image. Scroll down the page.</p>


<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>If you do not see any scrollbars, Resize the browser window.</p>
</body>
</html>
4. CSS background-position
The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.
You can set the following positions:
1. center
2. top
3. bottom
4. left
5. right

<html>
<head>
<style>
body {
background: white url('good-morning.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

TECHNICIA INSTITUTE OF TECHNOLOGY 8


CSS TUTORIAL

}
</style>
</head>
<body>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>If you do not see any scrollbars, Resize the browser window.</p>
</body>
</html>
CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an
element. The CSS border properties are given below
o border-style
o border-color
o border-width
o border-radius

Value Description

none It doesn't define any border.

dotted It is used to define a dotted border.

TECHNICIA INSTITUTE OF TECHNOLOGY 9


CSS TUTORIAL

dashed It is used to define a dashed border.

solid It is used to define a solid border.

double It defines two borders wIth the same border-width value.

groove It defines a 3d grooved border. effect is generated according to border-


color value.

ridge It defines a 3d ridged border. effect is generated according to border-


color value.

inset It defines a 3d inset border. effect is generated according to border-color


value.

outset It defines a 3d outset border. effect is generated according to border-


color value.

CSS Height and Width


The CSS height and width properties are used to set the height and width of an element.
The CSS max-width property is used to set the maximum width of an element.
CSS height and width Values
The height and width properties may have the following values:
• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
CSS Padding
Padding is used to create space around an element's content, inside of any defined
borders.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:

TECHNICIA INSTITUTE OF TECHNOLOGY 10


CSS TUTORIAL

• padding-top
• padding-right
• padding-bottom
• padding-left
Shorthand Property: padding: 25px 50px 75px 100px;
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px
CSS Margins
Margins are used to create space around elements, outside of any defined borders.
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values:


• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.
The CSS Box Model
Every HTML element has a box around it, even if you cannot see it.The CSS border
property defines a visible border around an HTML element:
Border: 5px solid black;
Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

TECHNICIA INSTITUTE OF TECHNOLOGY 11


CSS TUTORIAL

<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and
a 15px green border. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</div>
</body>
</html>

CSS Text
CSS has a lot of properties for formatting text.
1. Text Color
The color property is used to set the color of the text. The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
2. Text Color and Background Color
In this example, we define both the background-color property and the color property:
3. CSS Text Alignment
The text-align property is used to set the horizontal alignment of a text. A text can be left
or right aligned, centered, or justified.
4. Text Direction
The direction and Unicode-bidi properties can be used to change the text direction of an
element:

TECHNICIA INSTITUTE OF TECHNOLOGY 12


CSS TUTORIAL

direction: rtl;
unicode-bidi: bidi-override;
5. Vertical Alignment
The vertical-align property sets the vertical alignment of an element. like baseline, text-
top, text-bottom, sub, super.
vertical-align: baseline;
6. Text Decoration
The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links:
• Overline
• line-through
• underline
7. Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
• text-transform: uppercase;
• text-transform: lowercase;
• text-transform: capitalize;

8. Text Indentation or spacing


The text-indent property is used to specify the indentation of the first line of a text:
• text-indent: 50px;
• letter-spacing: 5px;
• line-height: 0.8;
• word-spacing: 10px;
9. Text Shadow
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow
(2px):
• text-shadow: 2px 2px;
• text-shadow: 2px 2px red;
• text-shadow: 2px 2px 5px red;
CSS Links
The four links states are:

TECHNICIA INSTITUTE OF TECHNOLOGY 13


CSS TUTORIAL

• a:link - a normal, unvisited link


• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
When setting the style for several link states, there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
• Text Decoration
• Background Color
CSS FONTS
CSS Font property is used to control the look of texts. By the use of CSS font property you
can change the text size, color, style and more.
• CSS Font color: This property is used to change the color of the text. (standalone
attribute)
• CSS Font family: This property is used to change the face of the font.
• CSS Font size: This property is used to increase or decrease the size of the font.
• CSS Font style: This property is used to make the font bold, italic or oblique.
• CSS Font variant: This property creates a small-caps effect.
• CSS Font weight: This property is used to increase or decrease the boldness and lightness
of the font
Box-Shadow Property
The box-shadow property attaches one or more shadows to an element.
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value
from 0.0 - 1.0. The lower value, the more transparent:
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}

TECHNICIA INSTITUTE OF TECHNOLOGY 14


CSS TUTORIAL

div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an
element, all of its child elements become transparent as well. This can make the text
inside a fully transparent element hard to read:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
</body>
</html>

TECHNICIA INSTITUTE OF TECHNOLOGY 15


CSS TUTORIAL

CSS filter
CSS filters are used to set visual effects to text, images, and other aspects of a webpage.
The CSS filter property allows us to access the effects such as color or blur, shifting on
the rendering of an element before the element gets displayed.
Syntax
filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-rotate() |
contrast() | opacity() | grayscale() | sepia() | url();
CSS Gradients
CSS gradients let you display smooth transitions between two or more specified colors
SS defines three types of gradients:
• Linear Gradients (direction, color-stop1, color-stop2, ...)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)
CSS list
The list-style-type property specifies the type of list item marker.
• list-style-type: circle;
• list-style-type: square;
• list-style-type: upper-roman;
• list-style-type: lower-alpha;
• list-style-type: none
Position The List Item Markers
• list-style-position: outside
• list-style-position: inside
CSS Tables
Table Borders
To specify table borders in CSS, use the border property. The example below specifies a
black border for <table>, <th>, and <td> elements:
Full-Width Table
The table above might seem small in some cases. If you need a table that should
span the entire screen (full-width), add width: 100% to the <table> element:
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into
a single border:eight
The width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the <th>
elements to 70px:

TECHNICIA INSTITUTE OF TECHNOLOGY 16


CSS TUTORIAL

CSS Table Alignment


The text-align property sets the horizontal alignment (like left, right, or center) of the
content in <th> or <td>.
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the
content in <th> or <td>.
Table Padding
To control the space between the border and the content in a table, use the padding
property on <td> and <th> elements:
Other style
border-bottom: 1px solid #ddd;
tr:hover {background-color: yellow;}
tr:nth-child(even) {background-color: #f2f2f2;}
CSS Layout - The display Property
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.
Block-level Elements- The CSS display block element takes as much as horizontal space
as they can. Means the block element takes the full available width. They make a line
break before and after them.
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
Inline Elements- The inline element takes the required width only.

• <span>
• <a>
• <img>

<html>

<head>

TECHNICIA INSTITUTE OF TECHNOLOGY 17


CSS TUTORIAL

<title>Display</title>

</head>

<body>

<p style="display: inline;">Technicia Institute Of technology</p>

<p style="display: inline;">Java Tutorial.</p>

<p>SQL Tutorial.</p>

<p style="display: inline;">HTML Tutorial.</p>

<p style="display: inline;">CSS Tutorial.</p>

</body>

</html>

TECHNICIA INSTITUTE OF TECHNOLOGY 18


CSS TUTORIAL

Inline-block

The CSS display inline-block element is very similar to inline element but the difference is

that you are able to set the width and height.

<html>

<head>

<style>

p{

display: inline-block;

width: 150px;

</style>

</head>

<body>

<p>Technicia Institute of technology</p>

<p>Java Tutorial.</p>

<p>SQL Tutorial.</p>

<p>HTML Tutorial.</p>

<p>CSS Tutorial.</p>

</body>

</html>

CSS display none


The "none" value totally removes the element from the page. It will not take any space.

<html>
<head>
<style>
h1.hidden {
display: none;
}

TECHNICIA INSTITUTE OF TECHNOLOGY 19


CSS TUTORIAL

</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>
The position Property
The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an element.
There are five different position values:
• Static-default position
• Relative-own position but not change own space
• Absolute-depend on parents position
• fixed
layer and z-index
The z-index property specifies the stack order of an element. When elements are
positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be
placed in front of, or behind, the others).
An element can have a positive or negative stack order:
CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.
overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's
box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Like scroll, but it adds scrollbars only when necessary
Note: The overflow property only works for block elements with a specified height.

TECHNICIA INSTITUTE OF TECHNOLOGY 20


CSS TUTORIAL

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow:properties;
}
</style>
</head>
<body>
<h2>Overflow: visible</h2>
<p>text</p>
<div>texyt.</div>
</body>
</html>
Float Property
The float property is used for positioning and formatting content e.g. let an image float
left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container.
right - The element floats to the right of its container.
none - The element does not float (will be displayed just where it occurs in the text).
inherit - The element inherits the float value of its parent.
Example: image text
Clear Property
The clear property specifies what elements can float beside the cleared element and on
which side.

none - Allows floating elements on both sides. This is default


left - No floating elements allowed on the left side
right- No floating elements allowed on the right side

TECHNICIA INSTITUTE OF TECHNOLOGY 21


CSS TUTORIAL

both - No floating elements allowed on either the left or the right side
inherit - The element inherits the clear value of its parent
CSS hover
The :hover selector is for selecting the elements when we move the mouse on them.
The hover feature includes the following effects:
• Change the color of the background and font.
• Modify the opacity of the image.
• Text embedding.
• Create image rollover effects.
• Swapping of images.
Syntax
:hover {
css declarations;
}
Example
<html>
<head>
<style>
body{
text-align:center;
}
p:hover, h1:hover, a:hover{
background-color: yellow;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to the TECHNICIA</p>
<a href="#">CSS Grid</a>
</body>
</html>

TECHNICIA INSTITUTE OF TECHNOLOGY 22


CSS TUTORIAL

CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.
Mouse over the element below to see a 2D transformation:
Transforms Methods
• translate()-moves an element from its current position (according to the
parameters given for the X-axis and the Y-axis.
transform: translate(50px, 100px);
• rotate()-method rotates an element clockwise or counter-clockwise according to a
given degree.
transform: rotate(20deg)
• scaleX()-The scaleX() method increases or decreases the width of an element.
transform: scaleX(2);
• scaleY()-The scaleY() method increases or decreases the height of an element.
transform: scaleY(2);
• scale()-Th
•
•
• e scale() method increases or decreases the size of an element (according to the
parameters given for the width and height).
transform: scale(2, 3);
• skewX()-The skewX() method skews an element along the X-axis by the given
angle.
transform: skewX(20deg);
• skewY()-The skewY() method skews an element along the Y-axis by the given angle.
transform: skewY(20deg);
• skew()-The skew() method skews an element along the X and Y-axis by the given
angles.
transform: skew(20deg, 10deg);
• matrix()-The matrix() method combines all the 2D transform methods into one.
The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
transform: matrix(1, -0.3, 0, 1, 0, 0);

TECHNICIA INSTITUTE OF TECHNOLOGY 23


CSS TUTORIAL

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

• Transition(p,du,ti,de)
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

How to Use CSS Transitions?

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

Note: If the duration part is not specified, the transition will have no effect, because the
default value is 0.

Specify the Speed Curve of the Transition(timing)


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

TECHNICIA INSTITUTE OF TECHNOLOGY 24

You might also like