Commonly used basic CSS styles

To start your career as front-end developer or web designer, you need to have knowledge of CSS (Cascading Style Sheet). Mastering CSS is a long process but to make it easier, we have compiled a list of  basic CSS questions you must master to get started as front-end developer. This tutorial covers following basic CSS questions you might be asked during a job interview. So lets get started:

What is…

Margin

Margin in CSS is used to add space around an element. It adds space on the outer side of the element.

Syntax: margin: top | right | bottom | left| initial | inherit;

Example

/* Margin to one side */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

/* Setting margin with 2 values i.e margin: (top and bottom) (left and right);*/
margin: 10% 12px;

/* Setting margin with three values i.e margin: top (left and right) bottom; */
margin: 10px 15% 4em;

/* To apply DIFFERENT margin on all FOUR sides of an element in pixels i.e top, right, bottom, left*/
margin: 10px 15px 20px 25px;

/* To apply DIFFERENT margin on all FOUR sides of an element in different units*/
margin: 15% 8px 3em auto;
margin: 2rem 4cm 5% 2em;

/* other commonly used margins */
margin: auto;     /* commonly used for centering element */
margin: 2px;      /* same margin on all four sides */
margin: initial;  /* default browser margin value on all four sides */
margin: inherit;  /* inherits margin from parent html element */
margin: unset;    /* unset any margin - not commonly used */

Property values:

Padding

Padding in CSS is used to add space around an element. It adds space on the inner side of the element.

Syntax: padding: top | right | bottom | left| initial | inherit;

Example

/* Padding to one side */
padding-top: 10px;
padding-right: 40%;
padding-bottom: 30px;
padding-left: 15%;

/* Setting padding with 2 values i.e padding: (top and bottom) (left and right); */
padding: 10% 12px;

/* Setting padding with three values i.e padding: top (left and right) bottom; */
padding: 10px 15% 4em;

/* To apply DIFFERENT padding on all four sides of an element in pixels i.e top, right, bottom, left */
padding: 20px 10px 33px 15px;

/* To apply DIFFERENT padding on all four sides of an element in different units*/
padding: 2rem 4cm 5% 2em;
padding: 15% 8px 3em auto;

/* Other commenly used padding */
padding: 3px;      /* same padding on all four sides */
padding: initial;  /* default browser padding value on all four sides */
padding: inherit;  /* inherits padding from parent html element */
padding: unset;    /* unset any padding - not commenly used */

property value:

What is the difference between margin and padding?

There is a great difference between margin and padding. The margin is the space outside the border While padding  is the space inside the border, between the border and the actual view’s content. You can see the difference in the picture, that gray color space is margin and yellow is padding.

Display

Display is used to control the layout of elements (text, pic, url etc). And specifies that how an element is displayed on screen.

Syntax: display: none | inline | block | initial | inherit;

Example

/* Commenly used values */
display: none;                /* nothing will be displayed */
display: inline;              /* element will be displayed in inline */
display: block;               /* element will be displayed in block */
display: inline-block;        /* element will be displayed in inline-block */
display: table;               /* element will be displayed like table element */
display: table-cell;          /* element will be displayed like table data element */
display: initial;             /* default browser display value */
display: inherit;             /* inherits display from parent html element */

/* Other used values */
display: flex;                /* behaves like block element */
display: grid;                /* behaves like a block element */
display: ruby;                /* behaves like an inline element */
display: table-header-group;  /* behaves like set of rows defining the head of the columns of the table */
display: table-caption;       /* behaves like presenting the title of table */
display: table-column-group;  /* behaves like group of columns in table */
display: table-row-group;     /* behaves like group of rows in table */
display: table-row;           /* behaves like row of table */  
display: table-column;        /* behaves like column of table */
display: table-footer-group;  /* behaves like set of rows summarizing the columns of the table */
display: list-item;           /* behaves like list item */
display: inline-flex;         /* element will be displayed in inline block */
display: inline-table;        /* behaves like inline table */

Property values:

What display property does?

Display property display elements (text, pic, url etc) in different styles.

Float

Float defines where an element (text, pic, url etc) should move.

Syntax: float: none | left | right | initial | inherit;

Example

/* Setting common value */
float: right;      /* element moves to right side */
float: left;       /* element moves to left side */
float: none;       /* default value */
float: initial;    /* default browser float value */
float: inherit;    /* inherits float from parent html element */

Property values:

Why we use float property / How we can use float property?

Float property is used for moving element (text, pic, url etc) to left, center or right side.

Background

Background is used for setting the element’s (text, pic, url etc) background. Background can be used to set the values for one or more properties.

Syntax: background: background-color background-image background-position/background-size background-repeat background-origin background-clip background-attachment;

Example

/* Collective background properties i.e background-color background-image position background-repeat background-origin background-clip background-attachment */
background: blue abc.gif center center x-repeat padding-box content-box fixed;

/* Individual properties */
background-color: blue;         /* background color of element */
background-image: url;          /* used to set the background image */
background-position:left top;   /* position of background image */
background-repeat: no-repeat;   /* repeat image */
background-origin: padding-box; /* used to set the origin of background element */
background-clip: content-box;   /* sets the background clip */
background-attachment: fixed;   /* used to set the background attachment */

1-Background-attachment

Background attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Syntax: background-attachment: scroll | fixed | local | initial | inherit;

Example

/* Setting common background attachment values */
background-attachment: fixed;        /* fix the background element */
background-attachment: scroll;       /* scrolls background element */
background-attachment: local;        /* background scrolls with content of element */
background-attachment: initial;      /* default browser value */
background-attachment: inherit;      /* inherits background-attachment from parent html element */

Property value

2-Background-clip

Background clip specifies the painting area of the background.

Syntax: background-clip: border-box | padding-box | content-box | initial | inherit | unset;

Example

/* Setting common background-clip value */
background-clip: border-box;   
background-clip: padding-box;
background-clip: content-box;
background-clip: initial;      /* default browser background-clip value on all four sides */
background-clip: inherit;      /* inherits background-clip from parent html element */
background-clip: unset;        /* unset background-clip - not commonly used */

Property value

3-Background-color

Sets the background color of an element according to the given value. Values could be in hexadecimal, RGB or color name.

Syntax: background-color: color | transparent | initial | inherit | unset;

Example

/* Setting value with color name */
background-color: pink;

/* Setting special keyword value */
background-color: transparent;

/* Setting hexa-decimla value */
background-color: #bbff00;

/* Setting rgb value */ 
background-color: rgb(255, 255, 128);

/* Other commonly used values */
background-color: initial;     /* default browser background color value */
background-color: inherit;     /* inherits background color from parent html element */
background-color: unset;       /* unset background color - not commonly used */

Property value

4-Background-image

Sets one or several background images for an element.

Syntax: background-image: url | none | initial | inherit;

Example

/* Setting background image */
background-image: url("pic.gif");

/* Other commonly used value of background image */
background-image: initial;    /* default browser background image value */
background-image: inherit;    /* inherits background image from parent html element */
background-image: none;

Property value

5-Background-origin

Determines the background positioning area, that is the position of an image.

Syntax: background-origin: padding-box | border-box | content-box | initial | inherit;

Example

/* Setting background-origin */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Other commonly used values */
background-origin: inherit;    /* inherits background origin from parent html element */
background-origin: initial;    /* default browser background origin value */

Property value

6-Background-repeat

Background repeat property specifies that how an image will repeat itself.

Syntax: background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;

Example

/* Setting background repeat */
background-repeat: repeat-x;   /* repeats image horizontaly */
background-repeat: repeat-y;   /* repeats image verticaly */
background-repeat: no-repeat;  /* no repeat */
background-repeat: repeat;     /* repeat on both sides horizontaly and verticaly */

/* Other commonly used values */
background-repeat: initial;    /* default browser background repeat value */
background-repeat: inherit;    /* inherits background repeat from parent html element */

Property value

7-Background-size

Background size adjusts the size of the background.

Syntax: background-size: auto | length | cover | contain | initial | inherit | unset;

Example

/* Setting special keyword background size value */
background-size: cover;
background-size: contain;
background-size: auto;

/* Setting background size with single value on both-sides(x-axis, y-axis) */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* Setting background size with 2 values */
background-size: 6px 25%;
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;

/* Other commonly used values */
background-size: initial;    /* default browser background-size value on all sides */
background-size: inherit;    /* inherits background-size from parent html element */
background-size: unset;      /* unset background-size - not commonly used */

Property value

8-Background-position

Sets the position of the background image.

Syntax: background-position: value;

Example

/* Setting background position */
background-position: center;
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;

/* Setting value with different units on x-axis and y-axis */
background-position: 25% 75px;
background-position: 3px 43%;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Other commonly used values */
background-position: inherit;    /* inherits value from parent html element */
background-position: initial;    /* default browser value on all sides */
background-position: unset;      /* unset background-position - not commonly used */

Property value

List the properties of background and their purposes?

1. background-attachment: used for background’s image movement along with the page.
2. background-clip: used to specify an element’s background.
3. background-color: used for changing the background color.
4. background-image: used for adding an image in the background.
5. background-origin: used for setting the position of the background image.
6. background-position: used to set the initial position for each defined background image.
7. background-repeat: used for repeating the image.
8. background-size: used for setting the size of the background image.

Font

Font is a property for setting font-family, font-size, font-style and font-weight.

/* Collective properties of font i.e font: font-style font-weight font-size font-family; */
font: normal bold 50px Times New Roman;

/* Individual properties */
font-style: italic;   /* sets text style */
font-weight: normal;  /* sets text thickness */
font-size: 100%;      /* sets text size */
font-family: arial;   /* sets family */

/* Other used values */
font: initial;        /* default browser font value */
font: inherit;        /* inherits font from parent html element */

1-Font-family

Font-family defines the font for the text.

Syntax: font-family: family-name | initial | inherit | unset;

Example

/* Setting font-family name */
font-family: times new roman;

/* Other commenly used values */
font-family: initial;      /* default browser font-family value */
font-family: inherit;      /* inherits font-family from parent html element */
font-family: unset;        /* unset font-family - not commonly used */

Property value

2-Font-size

Font size sets the size of the text.

Syntax: font-size: medium | x-small | small | large | x-large | length | initial | inherit;

Example

/* Setting absolute font-size */
font-size: medium;
font-size: small;
font-size: x-small;
font-size: large;
font-size: x-large;

/* Setting numeric font-size value with different units */
font-size: 25px;
font-size: 5%;
font-size: 23em;
font-size: 44rem;

/* Other commenly used font-size values */
font-size: initial;   /* default browser font-size value */
font-size: inherit;   /* inherits font-size from parent html element */
font-size: unset;     /* unset font-size - not commonly used */

Property value

Font-style

Specifies the style of the text.

Syntax: font-style: normal | italic | oblique | initial | inherit | unset;

Example

/* Setting special keyword font style */
font-style: oblique; 
font-style: italic;
font-style: normal;

/* Setting other common font-style values */
font-style: initial;      /* default browser font-style value */
font-style: inherit;      /* inherits font-style from parent html element */
font-style: unset;        /* unset font-style - not commonly used */

Property value

Font-weight

Font-weight defines the thickness of the text.

Syntax: font-weight: normal | bold | bolder | number | initial | inherit | unset;

Example

/* Setting keyword font-weight value */
font-weight: normal;
font-weight: bold;
font-weight: bolder;

/* Setting other commonly used font-weight value */
font-weight: initial;      /* default browser font-weight value */
font-weight: inherit;      /* inherits font-weight from parent html element */
font-weight: unset;        /* unset font-weight - not commonly used */

Property value

Why font property of CSS is important for web development?

Font property is important for stylizing. You can set the size, style, family and weight of the text by using font-size:””;, font-style:” “;, font-family:” “;  and font-weight:” “; respectively.

Text-align

Text-align uses for horizontal alignment of the text.

Syntax: text-align: left | right | center | unset | initial | inherit;

Example

/* Setting keyword  value */
text-align: right;
text-align: center;
text-align: left;

/* Other commenly used values */
text-align: initial;      /* default browser text-align value */
text-align: inherit;      /* inherits text-align from parent html element */
text-align: unset;        /* unset text-align - not commonly used */

Property value

What is text-align?

Text-align is the alignment of text and used for arranging the text or graphics relative to the margin.

Position

Position specifies that which type of position is used in the element(text, pic, url etc).

Syntax: position: static | absolute | fixed | relative | initial | inherit;

Example

/* Setting keyword position value */
position: static;
position: fixed;
position: relative;
position: absolute;

/* Other commonly used values */
position: initial;         /* default browser position value */
position: inherit;         /* inherits position from parent html element */

Property value

List

Lists are used to display a set of consecutive items.
syntax: list-style: type position image | initial | inherit;

There are two types of list property.
1-Ordered list(ol)
2-Unordered list(ul)

1-Ordered-list

Ordered list can be alphabetical or numerical.

Syntax: list-style: list-style-type list-style-position list-style-image;

Example

/* Setting collective properties i.e list-style: list-style-type list-style-position list-style-image; */
list-style: A inside url;

/* Setting Individual properties */
list-style-type: 1;
list-style-position: outside;
list-style-image: pic.png;

• list-style-type

Specifies the different style markers in the list.

Syntax: list-style-type: value;

Example

/* Setting different list-style-type values */
list-style-type: a;
list-style-type: A;
list-style-type: 1;
list-style-type: I;

/* Other commonly used list-style-type value */
list-style-type: initial;        /* default browser list-style-type value */
list-style-type: inherit;        /* inherits list-style-type from parent html element */

Property value

• list-style-image

Specifies the list style marker as the image.

Syntax: list-style-image: url( ‘abc.png / gif / jpg’ );

Example

/* list-style-image */
list-style-image: url('pic.gif');

/* Other commonly used list-style-image value */
list-style-image: initial;      /* default browser list-style-image value */
list-style-image: inherit;      /* inherits list-style-image from parent html element */

Property value

• list-style-position

Position specifies that where the markers should place, inside or out side the content flow.

Syntax: list-style-position: inside | outside | initial | inherit

Example

/* Setting list-style-position */
list-style-position: inside;
list-style-position: outside;

/* Other commonly used values */
list-style-position: initial;      /* default browser list-style-position value */
list-style-position: inherit;      /* inherits list-style-position from parent html element */

Property value

2-Unordered list

In unordered list, list-style-image and list-style-position behaves like ordered list’s list-style-image and list-style-position.

• list-style-type

The list-style-type specifies the type of list-item marker in a list.

syntax: list-style-type: value;

Example

/* Setting list-style-type */
list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;

/* Other commonly used value */
list-style-type: initial;      /* default browser list-style-type value */
list-style-type: inherit;      /* inherits list-style-type from parent html element */

Property value

Difference between unordered and ordered list?

In unordered list, list items are not significant you can reverse list but it still means the same thing. While in the ordered list all list items are arranged in a sequence.

Opacity

Opacity specifies the transparency of an object or a group of objects.

Syntax: opacity: number | initial | inherit;

Example

/* Setting number opacity value */
opacity: 0;
opacity: 0.5;
opacity: 1;

/* Other commonly used values */
opacity: initial;      /* default browser opacity value */
opacity: inherit;      /* inherits opacity from parent html element */

Property value

Visibility

Visibility describes either an element (text, pic, url etc) is visible or not.

Syntax: visibility: visible | hidden | collapse | initial | inherit;

Example

/* Setting keyword visibility value */
visibility: hidden;
visibility: collapse;
visibility: visible;

/* Other commonly used values */
visibility: initial;     /* default browser visibility value */
visibility: inherit;     /* inherits visibility from parent html element */

Property value

Max-height / Max-width

Max-height / width defines the maximum height / width of an element(text, pic, url etc).

Syntax: max-height / width: length | initial | inherit;

Examlpe

/* Setting value of maximum height in different units*/
max-height: 10%;
max-height: 4px;
max-height: 23em;
max-height: 6rem;

/* Other commonly used values of maximum height */
max-height: initial;    /* default browser max-height value */
max-height: inherit;    /* inherits max-height from parent html element */

/* Setting value of maximum width in different units */
max-width: 20%;
max-width: 14px;
max-width: 3em;
max-width: 36rem;

/* Other commonly used values of maximum width */
max-width: initial;     /* default browser max-width value */
max-width: inherit;     /* inherits max-width from parent html element */

Property value

Min-height / Min-width

Min-height / width defines the minimum height / width of an element( text, pic, url etc ).

Syntax: min-height / width: length | initial | inherit;

Example

/* Setting value of minimum height in different units*/
min-height: 10%;
min-height: 4px;
min-height: 23em;
min-height: 6rem;

/* Other commonly used value of minimum height */
min-height: initial;   /* default browser min-height value */
min-height: inherit;   /* inherits min-height from parent html element */

/* Setting value of minimum width in different units*/
min-width: 20%;
min-width: 14px;
min-width: 3em;
min-width: 36rem;

/* Other commonly used value of minimum width */
min-width: initial;    /* default browser min-width value */
min-width: inherit;    /* inherits min-width from parent html element */

Property value

Border

Border property sets all the border properties in one declaration, that are border-color, border-collapse, border-radius, border-style and border-width.

Syntax: border: border-width border-style border-color;

/* Setting collective properties of border i.e border: border-width border-style border-color; */
border: 15px solid red;

/* Setting individual property values */
border-width: 10%;
border-style: dotted;
border-color: black;

1-Border-color

Defines the color of the border.

Syntax: border-color: color | transparent | initial | inherit;

Example

/* Setting border-color to one side */
border-top-color: blue;
border-right-color: grey;
border-bottom-color: blue;
border-left-color: red;

/* Setting hexa-decimla value */
border-color: #bbff00;

/* Setting rgb value */ 
border-color: rgb(255, 255, 128);

/* Setting border-color with 2 values i.e (top and boottom) (right and left) */
border-color: blue pink;

/*Setting border-color with 3 values i.e top (right and left) bottom */
border-color: blue pink red;

/* Setting border color to all four sides */
border-color: blue green pink red;

/* Other commonly used value */
border-color: initial;      /* default browser border-color value on all four sides */
border-color: inherit;      /* inherits border-color from parent html element */

Property value

2-Border-collapse

This property mostly used in tables or for those elements who behaves like a table, to specifies whether borders of the table are separated r collapsed.

Syntax: border-collapse: separate | collapse | initial | inherit;

Example

/* Setting keyword value of border-collapse */
border-collapse: collapse;
border-collapse: separate;

/* Other commonly used values */
border-collapse: initial;    /* default browser border-collapse value */
border-collapse: inherit;    /* inherits border-collapse from parent html element */

Property value

3-Border-radius

Border radius is used to add rounded corners to an element

Syntax: border-radius:  1-4 length | initial | inherit;

Example

/* Setting collective radius of border with different units i.e top right bottom left */
border-radius: 20% 25px 10cm 40%;

/* Setting border-radius with three values i.e top (right and left) bottom */
border-radius: 15px 50px 30px;

/* Setting border-radius with two values i.e (top and bottom) (right and left) */
border-radius: 15px 50px;

/* Setting individual radius of border */
border-top-left-radius: 4cm;
border-top-right-radius: 12%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 10%;

Property value

4-Border-style

Specifies the style of the border.

Syntax: border-style: none | dotted | dashed | solid | double | initial | inherit;

Example

/* Setting collective border-style in clock-wise direction i.e top right bottom left */
border-style: dotteded dashed double none;

/* Setting individual border-style value */
border-top-style: double;
border-right-style: dashed;
border-bottom-style:dotted;
border-left-style:dotted;

Property value

5-Border-width

Sets the width of the border.

Syntax: border-width: medium | thin | thick | length | initial |inherit;

Example

/* Setting collective border-width with different units in clock-wise direction i.e top right bottom left */
border-width: 10px 10cm 20em 25px;
border-width: 1px 2em 0 4rem;

/* Setting border-width with three values i.e top (right and left) bottom */
border-width: 1px 2em 1.5cm;

/* Setting border-width with two values i.e (top and bottom) (right and left) */
border-width: 2px 1.5em;

/* Setting individual border-width */
border-top-width: 10px;
border-right-width: 10%;
border-bottom-width: 25px;
border-left-width: 20px;

Property values:

Media:

The @media rule is used to define different style rules for different media types / devices.

syntax: @media not|only mediatype and (media feature) { CSS-Code; }

Example

/* Setting media property */
@media screen and (max-width:767){
body{
background-color:grey;
}}

/* Media features for different media types */
@media (min-width: 480px) and (max-height:767px)   /* for small mobile screen */
@media (min-width: 768px) and (max-height:992px)   /* for medium mobile screen */
@media(min-width: 992px and max-height:1024px)     /* for ipad screen */
@media(min-width: 480px and max-height:767px)      /* for desktop screens */

Property value

Box-shadow

Box shadow property add one or more shadows to an element(text / pic / url).

Syntax:  box-shadow: inset h-px v-px blur color;

Example

/* Setting collective property of box-shadow i.e inside/outside h-shadow v-shadow blur color */
box-shadow: inset 10px 10% 5% blue;

/* Setting box-shadow with 3 values i.e h-shadow v-shadow color */
box-shadow: 60px -16px teal;

/* Setting box-shadow with 2 values */
box-shadow: 5px 10px;

/* Other commonly used values */
box-shadow: inherit;     /* inherits box-shadow from parent html element */
box-shadow: initial;     /* default browser box-shadow value on all sides */
box-shadow: unset;       /* unset box-shadow - not commonly used */

Property value

Text-shadow

Text-shadow property adds shadow to text.

Syntax: text-shadow: inset h-px v-px blur color;

Example

/* Setting collective text-shadow */
text-shadow: outside 10% 15px 4% grey;

/* Setting text-shadow with 3 values i.e h-shadow v-shadow color */
text-shadow: 5px 5px #558ABB;

/* Setting text-shadow with 2 values i.e h-shadow v-shadow */
text-shadow: 5px 10px;

/* Other commonly used values */
text-shadow: inherit;   /* inherits text-shadow from parent html element */
text-shadow: initial;   /* default browser text-shadow value on all four sides */
text-shadow: unset;     /* unset text-shadow - not commonly used */

Property value

Text-transform

Text-transform CSS property specifies how to capitalize text.

Syntax: text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Example

/* Setting keyword text-transform value */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;
text-transform: full-width;

/* Other commonly used values */
text-transform: initial;    /* default browser text-transform value */
text-transform: inherit;    /* inherits text-transform from parent html element */
text-transform: unset;      /* unset text-transform - not commonly used */

Property value

Before/After

before/after uses for adding content before or after the element(text / pic / url) with a content property.

Syntax ::before{content: “text / pic / url”;}

::after{content: “text / pic / url”;}

Example

/* Setting before property */
<div class="test">
hello world
</div>
.test::before{
content:" say ";
}

/* Setting after property */
<div class="test">
hello world
</div>
.test::after{
content:" ! ";
}

Text-align-last

Text align last defines how to align the last line of the text.

Syntax: text-align-last: auto |left | right | center | justify | start | end | initial | inherit | unset;

Example

/* Setting keyword text-align-last values */
text-align-last: auto;
text-align-last: left;
text-align-last: center;
text-align-last: right;
text-align-last: start;
text-align-last: end;
text-align-last: justify;

/* Other commenly used values */
text-align-last: initial;   /* default browser text-align-last value */
text-align-last: inherit;   /* inherits text-align-last from parent html element */
text-align-last: unset;     /* unset text-align-last - not commonly used */

Property value

Transition

Transition CSS property is shorthand property for transition-property, transition-duration, transition-timing-function and transition-delay.
Syntax: transition: property duration timing-function delay | initial | inherit;

Example

/* Setting collective transition i.e property duration timing-function delay */
transition: width/height 2s linear 1s;

/* Setting 3 properties of transition */
transition: margin-left 4s 2s;     /* property duration delay */
transition: 3s ease-in-out 5s;     /* duration timing-function delay */

/* Setting 2 properties transition */
transition: width 2s;              /* property duration */
transition: height linear;         /* property timing-function */

1-Transition-property

Transition-property is used to specifies the name of the CSS property the transition effect is for.

Syntax: transition-property: none | all | property | initial | inherit;

Example

/* Setting transition-property */
transition-property: none;
transition-property: all;
transition-property: height;
transition-property: width;
transition-property: margin;
transition-property: padding;

/* Other commonly used transition-property values */
transition-property: initial;    /* default browser transition-property value */
transition-property: inherit;    /* inherits transirtion-property from parent html element */
transition-property: unset;      /* unset transition-property - not commonly used */

Property value

Transition properties values are:

2-Transition-duration

Transition duration is time period that how many seconds or milliseconds a transition takes to complete transition effect.

Syntax: transition-duration: time | initial | inherit;

Example

/* Setting transition-duration */
transition-duration: 2s;
transition-duration: 100ms;
transition-duration: 2s, 43ms;

/* Other commonly used values */
transition-duration: initial;   /* default browser transition-duration value */
transition-duration: inherit;   /* inherits transition-duration from parent html element */
transition-duration: unset;     /* unset transition-duration - not commonly used */

Property value

3-Transition-timing-function

Transition-timing CSS property specifies the speed of transition effect.

Syntax: transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | initial | inherit | unset;

Example

/* Setting transition-timing-function */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Other commonly used values */
transition-timing-function: initial;   /* default browser transition-timing-function value */
transition-timing-function: inherit;   /* inherits transition-timing-function from parent html element */
transition-timing-function: unset;     /* unset transition-timing-function - not commonly used */

Property value

4-Transition-delay

Transition-delay specifies the time an element takes to start the transition effect.

Syntax: transition-delay: time | initial | inherit;

Example

/* Setting transition delay numeric value */
transition-delay: 4s;
transition-delay: 30ms;

/* Other commonly used values */
transition-delay: initial;    /* default browser transition-delay value */
transition-delay: inherit;    /* inherits transition-delay from parent html element */
transition-delay: unset;      /* unset transition-delay - not commonly used */

Property value

Transform

Transform allows to change the size, shape and position of elements. For these purpose we uses rotate,skew and translate.

/* Setting keyword value */
transform: none;

/* Setting function values */
transform: rotate3d(20deg, 34deg, 9deg);
transform: translate(10px, 13%);
translate: skew(30deg, 20deg);

Transform Function

1-Rotate

Rotate CSS property uses to rotate an element clockwise or anti-clockwise.

Syntax: transform: rotate(x deg, y deg, z deg);

Example

/* Setting collective transform rotation i.e rotate(x,y,z) */
transform: rotate3d(4deg 10deg 12deg);

/* Setting individual transform rotation */
transform: rotateX(10deg);
transform: rotateY(50deg);
transform: rotateZ(20deg);

Property value

2-Translate

Translate uses to move an element from 1 /current  position to another.

Syntax: transform: translate(x, y);

Example

/* Setting collective translate i.e translate(x,y,z) */
transform: translateX, Y, Z (10px 12cm 2%);
transform: translateX, Y (2rem  40em);

/* Setting individual translate */
transform: translatex(10%);
transform: translatey(30px);
transform: translatez(50%);

Property value

3-skew

To change the shape of element.

Syntax: transform: skewx, y (30deg 50deg);

Example

/* Setting collective transform skew i.e skew(x, y, z) */
transform: skew(10deg 12dg 30deg);

/* Setting individual transform skew */
transform: skewx(5deg);
transform: skewy(30deg);
transform: skewz(15deg);

Property value

4-Transform-origin

Transform origin allows to change the position of transformed elements.

Syntax: transform-origin:(x-axis, y-axis);

Example

/* Setting collective transform origin i.e x-axis y-axis ;
transform-origin: right center;

/* Setting individual transform origin */
transform-origin-x: center;    /* transform origin on x-axis */
transform-origin-y: bottom;    /* transform-origin on y-axis */

/* Other commonly used values */
transform-origin: initial;     /* default browser transform-origin value */
transform-origin: inherit;     /* inherits transform-origin from parent html element */

Property value

Animation

Animation is the process of making the illusion of motion and change, by means of rapid succession.

1-Animation-name

Uses for binding the selected animation portion with @keyframe.

Syntax: animation-name: keyframe-name | none | initial | inherit;

Example

/* Setting keyword value */
animation-name: none;

/* Setting animation-name */
<div>
animation-name: myname;
</div>
@keyframe myname{
from{ left:0%;}
to{bottom:100%;}}

/* Other commonly used values */
animation-name: initial;    /* default browser animation-name value */
animation-name: inherit;    /* inherits animation-name from parent html element */
animation-name: unset;      /* unset animation-name - not commonly used */

Property value

2-Animation-play-state

Specifies whether an animation is running or paused.

Syntax: animation-play-state: paused | running | initial | inherit;

Example

/* Setting keyword value */
animation-play-state: running;
animation-play-state: paused;

/* Setting global value */
animation-play-state: initial;   /* default browser animation-play-state value */
animation-play-state: inherit;   /* inherits animation-play-state from parent html element */

Property value

3-Animation-delay

Specifies when an animation should start.

Syntax: animation-delay: time | initial | inherit;

Example

/* Setting animation-delay */
animation-delay: 2s;

/* Other commonly used animation-delay global value */
animation-delay: initial;     /* default browser animation-delay value */
animation-delay: inherit;     /* inherits animation-delay from parent html element */
animation-delay: unset;       /* unset animation-delay - not commonly used */

Property value

4-Animation-duration

Animation duration is the amount of time that an animation should take to complete one cycle.

Syntax: animation-duration: time | initial | inherit;

Example

/* Setting animation-duration */
animation-duration: 5s;

/* Other commonly used values */
animation-duration: initial;     /* default browser animation-duration value */
animation-duration: inherit;     /* inherits animation-duration from parent html element */

Property value

5-Animation-iteration-count

Specifies the number of times an animation cycle should be played before stopping.

Syntax: animation-iteration-count: number | infinite | initial | inherit;

Example

/* Setting animation-iteration-count */
animation-iteration-count: 2;

/* Setting keyword value */
animation-iteration-count: infinite;

/* Other commonly used values */
animation-iteration-count: initial;    /* default browser animation-iteration-count value */
animation-iteration-count: inherit;    /* inherits animation-iteration-count from parent html element */

Property value

6-Animation-direction

Specifies whether an animation should play forward, backward, or alternative.

Syntax: animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Example

/* Setting animation-direction */
animation-direction: alternate;
animation-direction: reverse;
animation-direction: alternate-reverse;
animation-direction:: normal;

/*  Setting global value */
animation-direction: initial;    /* default browser animation-direction value */
animation-direction: inherit;    /* inherits animation-direction from parent html element */
animation-direction: unset;      /* unset animation-direction - not commonly used */

Property value

7-Animation-timing-function

This property specifies how a CSS animation should progress over the duration of each cycle.

Syntax: animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | initial | inherit;

Example

/* Setting animation-direction */
animation-direction:alternate;

/* Other commonly used values */
animation-direction: initial;     /* default browser animation-direction value */
animation-direction: inherit;     /* inherits animation-direction from parent html element */
animation-direction: unset;       /* unset animation-direction - not commonly used */

Property value

!important

!important is used to give a value more preference than actually it has.
Syntax: font-weight: ” normal !important “;

 Initial

Initial is used for default values or 1st time given value.