Commonly used basic CSS styles

In CSS by hfarazmLeave 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:

Table of Contents

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

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

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

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

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

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

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

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

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

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

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

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.

1-Font-family

Font-family defines the font for the text.

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

Example

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

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

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

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

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

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

  • list-style-type

Specifies the different style markers in the list.

Syntax: list-style-type: value;

Example

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

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

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

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

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

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

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

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;

1-Border-color

Defines the color of the border.

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

Example

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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.