Top 10 css interview questions

css interview questions

Full form of the CSS if Cascading Style Sheets

1) Types of CSS

a. Inline
b. Internal or Embedded
c. External

a. Inline

This style is specified within the HTML tag using the style attribute.

<p style="color:red">Hello</p>
b. Internal or Embedded

The CSS placed inside the HTML page.

c. External

External CSS contains a separate CSS file having a .css extension. This file contains only styling properties with the help of tag attributes. It should be linked to the HTML file using the ‘link’ tag. This CSS file can be used on multiple web pages.

<link  rel="stylesheet" type="text/css"  media="all" href="/css/my.css" />
// my.css is css file.

2) Difference between ‘Class’ and ‘ID’

ID is unquie and its indicated in CSS using “#” tag.

<p id="myid">hello</p>
#myid { color:red; }

Class is attribute tag of the element,indicated in CSS using “.”(dots), Class may be one or more than one.

<p class="myclass">hello</p>
.myclass { color:red; }

3) What is Bootstrap

Bootstrap is CSS framework, Its the most popular CSS framework responsive websites.
Other frameworks like Foundation, Gumby, Ukit, Semantic UI, etc.

4) 3D transformations in css

  1. rotateX()
  2. rotateY()
  3. rotateZ()

5) Is CSS case-sensitive ?


6) What does margin: 4px 10px 12px 8px signify?

Its add margin below on the element.
Top = 4px
Right = 10px
Bottom = 12px
Left = 8px

7) What is the Z-index ?

The Z-index specifies the stack order of elements that overlap each other. It has a default value of zero and can take negative or positive values.

8) How many position used in CSS

Four position state in CSS

  1. Static(default)
  2. Relative
  3. Fixed
  4. Absolute.

9) What are Pseudo-Elements?

Pseudo-element is used to style specified parts of an element in CSS.
Pseudo element like first-letter, first-line, before ,after, marker etc.
Example :

p::first-letter {
  color: #ff0000;

10) What is the difference between ‘display: inline-block’ and ‘display: block’?

display: inline-block : Create side by side boxes.
display: block : It break the boxes after the element, so a block element doesn’t sit next to other elements

Related Post – Top 5 Image Optimizer Tools

Like us on Facebook and Linkedin for more updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top