Commonly used basic CSS styles

In Uncategorized by nishatLeave a Comment

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

Property values:

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

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

property value:

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

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

Property values:

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

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

Property values:

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

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

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

Property value

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

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

Property value

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

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

Property value

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

4-Background-image

Sets one or several background images for an element.

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

Example

Property value

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

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

Property value

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

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

Property value

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

7-Background-size

Background size adjusts the size of the background.

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

Example

Property value

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

8-Background-position

Sets the position of the background image.

Syntax: background-position: value;

Example

Property value

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

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.

1-Font-family

Font-family defines the font for the text.

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

Example

Property value

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

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

Property value

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

Font-style

Specifies the style of the text.

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

Example

Property value

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

Font-weight

Font-weight defines the thickness of the text.

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

Example

Property value

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

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

Property value

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

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

Property value

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

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

  • list-style-type

Specifies the different style markers in the list.

Syntax: list-style-type: value;

Example

Property value

Value Description Try it
A Capital letters marker Try it
a Small letters marker Try it
1 Counting marker Try it
I Roman counting markers Try it
initial Sets the initial value Try it
inherit Inherits from the parent Try it
  • list-style-image

Specifies the list style marker as the image.

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

Example

Property value

Value Description Try it
url Sets the image. Try it
initial Sets the default value Try it
inherit Inherits from parent Try it
  • 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

Property value

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

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

Property value

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

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

Property value

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

Visibility

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

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

Example

Property value

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

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

Property value

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

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

Property value

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

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;

1-Border-color

Defines the color of the border.

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

Example

Property value

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

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

Property value

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

3-Border-radius

Border radius is used to add rounded corners to an element

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

Example

Property value

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

4-Border-style

Specifies the style of the border.

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

Example

Property value

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

5-Border-width

Sets the width of the border.

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

Example

Property values:

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

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

Property value

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

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

Property value

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

Text-shadow

Text-shadow property adds shadow to text.

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

Example

Property value

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

Text-transform

Text-transform CSS property specifies how to capitalize text.

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

Example

Property value

Value Description Try it
none Default value Try it
capitalize Capitalize the 1st character of each word Try it
uppercase Capitalize all character of each word Try it
lowercase Transforms all characters to lower case Try it
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). Try it
initial Sets the value to default Try it
inherit Inherits from parent Try it
unset Sets the value to initial or inherit if inherited from parent Try it

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

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

Property value

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

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

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

Property value

Transition properties values are:

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

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

Property value

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

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

Property value

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

4-Transition-delay

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

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

Example

Property value

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

Transform

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

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

Property value

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

2-Translate

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

Syntax: transform: translate(x, y);

Example

Property value

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

3-skew

To change the shape of element.

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

Example

Property value

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

4-Transform-origin

Transform origin allows to change the position of transformed elements.

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

Example

Property value

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

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

Property value

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

2-Animation-play-state

Specifies whether an animation is running or paused.

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

Example

Property value

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

3-Animation-delay

Specifies when an animation should start.

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

Example

Property value

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

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

Property value

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

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

Property value

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

6-Animation-direction

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

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

Example

Property value

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

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

Property value

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

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