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	Padding	Display
Float	Background	Font
Text-align	Position	List
Opacity	Visibility	Max-height/width
Min-height/width	Border	Media
Box-shadow	Text-shadow	Text-transform
Before/After	Text-align-last	Transition
Transform	Animation	!Important

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:

Value	Description
10% / 23px / 3em	Sets the size of margin as percentage / pixels / em value
12rem / 7cm	Sets the value as rem / centimeter relative to the width of element
auto	Browser sets suitable value
unset	Sets the margin to inherited value if it inherits from parent or to initial value if not inherited
initial	Sets the default value
inherit	Inherits from parent

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:

Value	Description
12px / 10% / 5cm	Sets the padding as pixels / percentage / centimeter value
12rem / 7em	Sets the value as rem / em
initial	Sets the default value
inherit	Inherits from parent
unset	Set the padding to inherited value if it inherits from parent or to initial if not inherited

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:

Value	Description
inline	Elements will be displayed in inline form
block	Elements will be displayed in block form element
flex	The element behaves like a block element and lays out its content according to flex mode
table-caption	Element behaves like presenting the title of table
table-column-group	Element behaves like table column group
table-row-group	Element behaves like table row group
table-cell	Element behaves like table data
table-row	Element behaves like table row
table-column	Element behaves like table column
table-footer-group	Element behaves like a set of rows summarizing the columns of the table
list-item	Element behaves like list item
inline-block	Elements will be displayed in inline block form
inline-flex	Elements will be displayed in inline block form
inline-table	Element behaves like inline table
initial	Sets the property value to its 1st time value/initial value
inherit	Inherits the value from its parent

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:

Value	Description
none	It’s a default value. Element must not float
left	Elements will move to the left side of the containing block
right	Elements will move to the right side of the containing block
initial	Sets the property value to its initial value
inherit	Inherits the value from its parent

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

Value	Description
fixed	Background is fixed but rest of the elements scroll
scroll	Background scroll along the element
local	Background scrolls with the element’s contents
initial	Sets the value to its initial state
inherit	Inherits the value from its parent

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

Value	Description
border-box	Default value.Background is clipped to the border box
padding-box	Background clipped to the padding box
content-box	Background clipped to the content box
initial	Sets the default value
inherit	Inherits from the parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
color	Color describes the color of the background
transparent	Sets the background color to transparent
#bbff00	Sets the background color in hexa decimal value
rgb( 255, 255, 128)	Sets the background color according to the rgb values
initial	Sets the background color to its initial state
inherit	Inherits the background color from parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
none	No image will be displayed in background
image	Sets the image in the background
initial	Sets the image to initial level
inherit	Inherits the value from parent

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

Value	Description
border-box	Default value.Background starts from upper left corner of the border
padding-box	Background starts from upper left corner of the padding
content-box	Background starts from upper left corner of the content
initial	Sets the value to initial state
inherit	Inherits value from the parent

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

Value	Description
repeat	Default value.Background will be repeated to both horizontal and vertical axis
no-repeat	Background will not be repeated
repeat-x	Background will be repeated on x-axis
repeat-y	Background will be repeated on y-axis
initial	Sets the initial value
inherit	Inherits value from the parent

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

Value	Description
auto	Default value.Automatically sets the size
cover	Covers the background
contain	Cover the background where the largest height and width fits into the page
10% / 10px / 10cm	Sets the value in percentage / pixels / cm
initial	Sets the value to its initial state
inherit	Inherits from the parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
left top / left center / left / bottom	Background sets to the left side
center top / center center / center bottom	Background sets to the center of the page
right top / right center / right bottom	Background sets to the right side of the page
50% 50%	Sets background position as the percentage value
23px 40em	Sets background position as the pixel and em value
initial	Sets the background value to its initial state
inherit	Inherits from the parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
Verdana / times new roman / arial / airis	Font sets according to the family/value you gives
initial	Sets to 1st/initial font family
inherit	Inherits from parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
medium	Default value.Sets the font size to the medium
small	Sets the value of the font small
x-small	Sets the font to the extra small size
larger	Sets the font to a large size
x-larger	Sets the font to the extra large size
initial	Sets to default / initial size
inherit	Inherits from parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
normal	Sets the text to normal style
italic	Sets the text to italic style
oblique	Sets the text to oblique
initial	Sets to initial font style
inherit	Inherits from parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
normal	Default value of the text
bold	Defines thick text
bolder	Defines thicker text
initial	Sets to default weight
inherit	Inherits from parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
left	Default value. Text aligns to the left side
center	Text aligns in the center of the page
right	Text aligns to the right side
initial	Sets to 1st aligned
inherit	Inherits from parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
static	Default position
relative	Element positioned relative to its normal position
absolute	Element positioned relative to its initial position
fixed	Fixed the position of the element
initial	Sets to 1st positioned
inherit	Inherits from parent

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

Value	Description
A	Capital letters marker
a	Small letters marker
1	Counting marker
I	Roman counting markers
initial	Sets the initial value
inherit	Inherits from the parent

• 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

Value	Description
url	Sets the image.
initial	Sets the default value
inherit	Inherits from parent

• 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

Value	Description
inside	specifies list markers inside the content
outside	specifies list markers outside the content
initial	Sets the initial value
inherit	Inherits from parent

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

Value	Description
disc	Default value
none	No marker will be displayed
circle	Changed the list marker to circle
square	Marker is a square
initial	Sets the marker to default/initial value
inherit	Inherits from parent

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

Value	Description
0	Means element is blur
0.5 or 50 %	Means transparent but hard to see
1	Means transparent
initial	Sets to its initial value
inherit	inherit from its parent

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

Value	Description
hidden	Hides element but take the space
visible	Visible the element
collapse	Mostly use in tables and remove the element but didn’t effect the layout of the page
initial	Sets the value to its initial state
inherit	Inherits from its parent

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

Value	Description
10px / 23% /  100cm	Value could be in pixels/percentage / centimeter
initial	Sets the value to its initial state
inherit	Inherits from parent class

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

Value	Description
10px / 2% / 10cm	Value could be in pixels / percentage / centimeter
initial	Sets the value to its initial state
inherit	Inherits from parent class

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

Value	Description
red / green / blue /..	Sets the color of the border
initial	Set to 1st colored
inherit	Inherits from parent

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

Value	Description
separate	Default value
collapse	Borders are collapsed to single border
initial	Sets to the default value
inherit	Inherits from the parent

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

Value	Description
none	No effect on the border redius
10% / 20px / 14cm	Border radius changes according to the given values
20% / 3px /	Border radius changes according to the given values
initial	Sets the initial value
inherit	Inherits from parent

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

Value	Description
none	Default value. No border
solid	Specifies solid border
dotted	Specifies dotted border
dashed	Specifies dashed border
double	Specifies doubled border
initial	Sets default value
inherits	Inherits from parent

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:

Value	Description
medium	Default value
thick	Sets the thick border
thin	Specifies the thin border
10% / 23px / 3em	Sets the width as percentage / pixels / em value
12rem / 7cm	Sets the value as rem / centimeter
initial	Sets the initial/default value
inherit	Inherits from the parent

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

Value	Description
all	Uses for all type of media
print	Uses only for print type media
screen	Uses only for screen type media
speech	Uses only for speech media type
handheld	Uses only for handheld media type
tv	Uses only for  television screen devices

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

Value	Description
none	Default value. No shadow will be displayed
inset	Shadow will be displayed in-side of the box
10px  / 10%	Defines the blurriness of the box shadow
red  / blue / black	Color of the shadow
initial	Sets to default value
inherit	Inherits from parent

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

Value	Description
none	Default value. No shadow will be displayed
inset	Shadow will be displayed inside of the text
10px / 10%	Defines the blurriness of the text shadow
red / blue / black	Color of the shadow
initial	Sets to default value
inherit	Inherits from parent
unset	Sets the property to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
none	Default value
capitalize	Capitalize the 1st character of each word
uppercase	Capitalize all character of each word
lowercase	Transforms all characters to lower case
full-width	Is a keyword forcing the writing of a character, mainly ideograms and latin scripts inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).
initial	Sets the value to default
inherit	Inherits from parent
unset	Sets the value to initial or inherit if inherited from parent

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

Value	Description
auto	The effect is the same as setting text-align-last to start
left	Aligns the last line text to to left side
center	Aligns the last line text to the center
right	Aligns the last line text to the right side
start	The effect is same as left if direction is left-to-right and right if direction is right-to-left
end	The effect is same as right if direction is left-to-right and left if direction is right-to-left
justify	Text should line up their left and right edges to the left and right content edges of the paragraph
initial	Sets to initial side
inherit	Inherits from parent
unset	Sets the value to inherit if inherited from parent or intial if not inherit

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:

Value	Description
none	No property will get a transition effect
all	Default value. Apply transition effect on all properties
width / height	Defines the width and height of transition element
margin / padding	Sets the margin / padding of transition element
initial	Sets to the initial/default value
inherit	Inherits from parent
unset	Sets value to inherit if inherited from parent or to initial if not inherit

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

Value	Description
1ms / 5s	Defines the time period of the property in millisecond and second
initial	Sets the initial value
inherit	Inherits the value from parent
unset	Sets the inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
ease	Default value.Transition effect starts with the slow speed then fast and ends with slow speed
ease-in	In start transition effect is slow and then faster till the end
ease-out	Transition effect ends with slow speed
ease-in-out	Transition starts and ends with slow speed, In the middle between the start and end speed is high
linear	Specifies transition with the same speed from start to end
initial	Sets the default value
inherit	Inherits from parent

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

Value	Description
0s	Default value
1s / 5ms	Defines the time period of the property as second and millisecond
initial	Sets the initial value
inherit	Inherits the value from parent
unset	Sets to inherited value if it inherits from parent or to initial value if not inherited

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

Value	Description
rotateX, Y, Z(20deg, 30deg, 10deg)	Defines a 3d rotation
rotateX(20deg)	Rotates an element 20 degree
rotateY(10deg)	Rotates an element 10 at degree x-axis
rotateZ(25 deg)	Rotates an element 25 at degree y-axis

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

Value	Description
translateX(10px)	Move an element along x-axis
translateY(5%)	Move an element along y-axis
translateX,Y(10%, 20%)	Move element along x and y axis

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

Value	Description
skewx(10 deg)	Change the shape along x-axis
skewy(20 deg)	Change the shape along y-axis
skewx,y(10px, 10px)	Change the shape along x and y-axis

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

Value	Description
x-axis	Change position of origin along x-axis
y-axis	Change position along y-axis
initial	Sets to its default value
inherit	Inherits from parent

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

Value	Description
none	Default value. No animation will be displayed
keyframe	Name of the keyframe
initial	Set to the default value
inherit	Inherits from parent

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

Value	Description
running	Specifies that animation is running
paused	Defines the stop state
initial	Sets to default value
inherits	Inherits from parent

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

Value	Description
0s	Default value
1s	Sets the start time delay 1s
initial	Sets to default value
inherit	Inherits from parent

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

Value	Description
0s	Default value
5s / 100ms	Completes the animation in 5 seconds or in 100 millisecond
initial	Sets to the default value
inherit	Inherits from the parent

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

Value	Description
1	Default value
infinite	Animation will never stop
initial	Sets to the default value
inherit	Inherits from the parent

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

Value	Description
alternate	Moves in forward direction
reverse	Animation moves in reverse direction
alternate-reverse	On even iteration, the animation will move to forward direction and odd time animation will move reverse direction
initial	Sets to default value
inherit	Inherits from parent

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

Value	Description
ease	Default value.Effect starts with the slow speed then fast and ends with slow speed
ease-in	In start animation effect will be slow and then faster till the end
ease-out	Animation effect ends with slow speed
ease-in-out	Animation starts and ends with slow speed, In the middle, between a start and end the speed is high
linear	Specifies animation with the same speed from start to end
initial	Sets the default value
inherit	Inherits from parent

!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.