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…

MarginPaddingDisplay
FloatBackgroundFont
Text-alignPositionList
OpacityVisibilityMax-height/width
Min-height/widthBorderMedia
Box-shadowText-shadowText-transform
Before/AfterText-align-lastTransition
TransformAnimation!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:

ValueDescription
10% / 23px / 3emSets the size of margin as percentage / pixels / em value
12rem / 7cmSets the value as rem / centimeter relative to the width of element
autoBrowser sets suitable value
unsetSets the margin to inherited value if it inherits from parent or to initial value if not inherited
initialSets the default value
inheritInherits 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:

ValueDescription
12px / 10% / 5cmSets the padding as pixels / percentage / centimeter value
12rem / 7emSets the value as rem / em
initialSets the default value
inheritInherits from parent
unsetSet 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:

ValueDescription
inlineElements will be displayed in inline form
blockElements will be displayed in block form element
flexThe element behaves like a block element and lays out its content according to flex mode
table-captionElement behaves like presenting the title of table
table-column-groupElement behaves like table column group
table-row-groupElement behaves like table row group
table-cellElement behaves like table data
table-rowElement behaves like table row
table-columnElement behaves like table column
table-footer-groupElement behaves like a set of rows summarizing the columns of the table
list-itemElement behaves like list item
inline-blockElements will be displayed in inline block form
inline-flexElements will be displayed in inline block form
inline-tableElement behaves like inline table
initialSets the property value to its 1st time value/initial value
inheritInherits 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:

ValueDescription
noneIt’s a default value. Element must not float
leftElements will move to the left side of the containing block
rightElements will move to the right side of the containing block
initialSets the property value to its initial value
inheritInherits 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

ValueDescription
fixedBackground is fixed but rest of the elements scroll
scrollBackground scroll along the element
localBackground scrolls with the element’s contents
initialSets the value to its initial state
inheritInherits 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

ValueDescription
border-boxDefault value.Background is clipped to the border box
padding-boxBackground clipped to the padding box
content-boxBackground clipped to the content box
initialSets the default value
inheritInherits from the parent
unsetSets 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

ValueDescription
colorColor describes the color of the background
transparentSets the background color to transparent
#bbff00Sets the background color in hexa decimal value
rgb( 255, 255, 128)Sets the background color according to the rgb values
initialSets the background color to its initial state
inheritInherits the background color from parent
unsetSets 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

ValueDescription
noneNo image will be displayed in background
imageSets the image in the background
initialSets the image to initial level
inheritInherits 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

ValueDescription
border-boxDefault value.Background starts from upper left corner of the border
padding-boxBackground starts from upper left corner of the padding
content-boxBackground starts from upper left corner of the content
initialSets the value to initial state
inheritInherits 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

ValueDescription
repeatDefault value.Background will be repeated to both horizontal and vertical axis
no-repeatBackground will not be repeated
repeat-xBackground will be repeated on x-axis
repeat-yBackground will be repeated on y-axis
initialSets the initial value
inheritInherits 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

ValueDescription
autoDefault value.Automatically sets the size
coverCovers the background
containCover the background where the largest height and width fits into the page
10% / 10px / 10cmSets the value in percentage / pixels / cm
initialSets the value to its initial state
inheritInherits from the parent
unsetSets 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

ValueDescription
left top / left center / left / bottomBackground sets to the left side
center top / center center / center bottomBackground sets to the center of the page
right top / right center / right bottomBackground sets to the right side of the page
50% 50%Sets background position as the percentage value
23px 40emSets background position as the pixel and em value
initialSets the background value to its initial state
inheritInherits from the parent
unsetSets 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

ValueDescription
Verdana / times new roman / arial / airisFont sets according to the family/value you gives
initialSets to 1st/initial font family
inheritInherits from parent
unsetSets 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

ValueDescription
mediumDefault value.Sets the font size to the medium
smallSets the value of the font small
x-smallSets the font to the extra small size
largerSets the font to a large size
x-largerSets the font to the extra large size
initialSets to default / initial size
inheritInherits from parent
unsetSets 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

ValueDescription
normalSets the text to normal style
italicSets the text to italic style
obliqueSets the text to oblique
initialSets to initial font style
inheritInherits from parent
unsetSets 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

ValueDescription
normalDefault value of the text
boldDefines thick text
bolderDefines thicker text
initialSets to default weight
inheritInherits from parent
unsetSets 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

ValueDescription
leftDefault value. Text aligns to the left side
centerText aligns in the center of the page
rightText aligns to the right side
initialSets to 1st aligned
inheritInherits from parent
unsetSets 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

ValueDescription
staticDefault position
relativeElement positioned relative to its normal position
absoluteElement positioned relative to its initial position
fixedFixed the position of the element
initialSets to 1st positioned
inheritInherits 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

ValueDescription
ACapital letters marker
aSmall letters marker
1Counting marker
IRoman counting markers
initialSets the initial value
inheritInherits 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

ValueDescription
urlSets the image.
initialSets the default value
inheritInherits 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

ValueDescription
insidespecifies list markers inside the content
outsidespecifies list markers outside the content
initialSets the initial value
inheritInherits 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

ValueDescription
discDefault value
noneNo marker will be displayed
circleChanged the list marker to circle
squareMarker is a square
initialSets the marker to default/initial value
inheritInherits 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

ValueDescription
0Means element is blur
0.5 or 50 %Means transparent but hard to see
1Means transparent
initialSets to its initial value
inheritinherit 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

ValueDescription
hiddenHides element but take the space
visibleVisible the element
collapseMostly use in tables and remove the element but didn’t effect the layout of the page
initialSets the value to its initial state
inheritInherits 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

ValueDescription
10px / 23% /  100cmValue could be in pixels/percentage / centimeter
initialSets the value to its initial state
inheritInherits 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

ValueDescription
10px / 2% / 10cmValue could be in pixels / percentage / centimeter
initialSets the value to its initial state
inheritInherits 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

ValueDescription
red / green / blue /..Sets the color of the border
initialSet to 1st colored
inheritInherits 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

ValueDescription
separateDefault value
collapseBorders are collapsed to single border
initialSets to the default value
inheritInherits 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

ValueDescription
noneNo effect on the border redius
10% / 20px / 14cmBorder radius changes according to the given values
20% / 3px /Border radius changes according to the given values
initialSets the initial value
inheritInherits from parent

4-Border-style

Specifies the style of the border.

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

Example

Property value

ValueDescription
noneDefault value. No border
solidSpecifies solid border
dottedSpecifies dotted border
dashedSpecifies dashed border
doubleSpecifies doubled border
initialSets default value
inheritsInherits from parent

5-Border-width

Sets the width of the border.

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

Example

Property values:

ValueDescription
mediumDefault value
thickSets the thick border
thinSpecifies the thin border
10% / 23px / 3emSets the width as percentage / pixels / em value
12rem / 7cmSets the value as rem / centimeter
initialSets the initial/default value
inheritInherits 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

ValueDescription
allUses for all type of media
printUses only for print type media
screenUses only for screen type media
speechUses only for speech media type
handheldUses only for handheld media type
tvUses 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

ValueDescription
noneDefault value. No shadow will be displayed
insetShadow will be displayed in-side of the box
10px  / 10%Defines the blurriness of the box shadow
red  / blue / blackColor of the shadow
initialSets to default value
inheritInherits from parent

Text-shadow

Text-shadow property adds shadow to text.

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

Example

Property value

ValueDescription
noneDefault value. No shadow will be displayed
insetShadow will be displayed inside of the text
10px / 10%Defines the blurriness of the text shadow
red / blue / blackColor of the shadow
initialSets to default value
inheritInherits from parent
unsetSets 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

ValueDescription
noneDefault value
capitalizeCapitalize the 1st character of each word
uppercaseCapitalize all character of each word
lowercaseTransforms all characters to lower case
full-widthIs 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).
initialSets the value to default
inheritInherits from parent
unsetSets 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

ValueDescription
autoThe effect is the same as setting text-align-last to start
leftAligns the last line text to to left side
centerAligns the last line text to the center
rightAligns the last line text to the right side
startThe effect is same as left if direction is left-to-right and right if direction is right-to-left
endThe effect is same as right if direction is left-to-right and left if direction is right-to-left
justifyText should line up their left and right edges to the left and right content edges of the paragraph
initialSets to initial side
inheritInherits from parent
unsetSets 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:

ValueDescription
noneNo property will get a transition effect
allDefault value. Apply transition effect on all properties
width / heightDefines the width and height of transition element
margin / paddingSets the margin / padding of transition element
initialSets to the initial/default value
inheritInherits from parent
unsetSets 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

ValueDescription
1ms / 5sDefines the time period of the property in millisecond and second
initialSets the initial value
inheritInherits the value from parent
unsetSets 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

ValueDescription
easeDefault value.Transition effect starts with the slow speed then fast and ends with slow speed
ease-inIn start transition effect is slow and then faster till the end
ease-outTransition effect ends with slow speed
ease-in-outTransition starts and ends with slow speed, In the middle between the start and end speed is high
linearSpecifies transition with the same speed from start to end
initialSets the default value
inheritInherits 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

ValueDescription
0sDefault value
1s / 5msDefines the time period of the property as second and millisecond
initialSets the initial value
inheritInherits the value from parent
unsetSets 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

ValueDescription
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

ValueDescription
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

ValueDescription
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

ValueDescription
x-axisChange position of origin along x-axis
y-axisChange position along y-axis
initialSets to its default value
inheritInherits 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

ValueDescription
noneDefault value. No animation will be displayed
keyframeName of the keyframe
initialSet to the default value
inheritInherits 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

ValueDescription
runningSpecifies that animation is running
pausedDefines the stop state
initialSets to default value
inheritsInherits from parent

3-Animation-delay

Specifies when an animation should start.

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

Example

Property value

ValueDescription
0sDefault value
1sSets the start time delay 1s
initialSets to default value
inheritInherits 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

ValueDescription
0sDefault value
5s / 100msCompletes the animation in 5 seconds or in 100 millisecond
initialSets to the default value
inheritInherits 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

ValueDescription
1Default value
infiniteAnimation will never stop
initialSets to the default value
inheritInherits 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

ValueDescription
alternateMoves in forward direction
reverseAnimation moves in reverse direction
alternate-reverseOn even iteration, the animation will move to forward direction and odd time animation will move reverse direction
initialSets to default value
inheritInherits 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

ValueDescription
easeDefault value.Effect starts with the slow speed then fast and ends with slow speed
ease-inIn start animation effect will be slow and then faster till the end
ease-outAnimation effect ends with slow speed
ease-in-outAnimation starts and ends with slow speed, In the middle, between a start and end the speed is high
linearSpecifies animation with the same speed from start to end
initialSets the default value
inheritInherits 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.