CSS Interview Questions

Here, We are listed top 30+ most popular CSS (Cascading Style Sheets) interview questions and answers for freshers candidates. Experienced candidates can also try to learn CSS Interview question for job interviews.

Basically, CSS code used to reduced some number of extra codes, for example, suppose we write a class in CSS and that class we called two or more times in HTML web page.

CSS interview question
Fig. CSS Interview Questions

Q1- What is CSS?

CSS is the combination of three alphabets, it means Cascading Style Sheets. It is some kind of technique by which we can define style for html elements, means how html elements looks in web page, what will be their color, size, location and much more things.

CSS is a web designing language simple for HTML elements.

Q2- How to attach css external file to html?

<head>
   <link rel="text/css" href="CSS_file_location" />
</head>

Q3- What is CSS flexbox?

CSS flexbox allows to design a flexible full responsive layout structure without using any float or positioning property of CSS.

Q4- What are the properties of flexbox?

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Q5- What is class selector in CSS?

Selector that are unique to a specific style, are called CLASS selectors (Class name should be uniqe). Declaration of style and association with HTML can be made through this.

.class_name {font-size: 20px ;} //class selector
<Body class= "class_name"> //this class is associated with element </Body>

Q6- What is ID in CSS?

The ID is unique, we can call only one time in a whole page of HTML.

Q7- What are the name of all modules in CSS?

List of several modules in CSS, mentained below:

  • Box Model
  • Selectors
  • Background and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animationas
  • User Interface
  • Multiple Column Layout

Q8- How can defined the dimension properties in CSS?

There are some way to define dimension properties in CSS:

  • Height
  • Min-height
  • Max-height
  • Width
  • Min-width
  • Max-width

Q9- What are the difference version of CSS?

Currently, five versions are available in CSS

  • CSS 1
  • CSS 2
  • CSS 2.1
  • CSS 3
  • CSS 4

Q10- What is CSS box elements?

CSS box elements are used to design layout. And the elements are mentained below:

  • Margin
  • Padding
  • Border
  • Content

Q11- What is CSS selector?

CSS Selectors are html elements identifier, CSS selector use to identify HTML element or group of html elements from html document.

  • CSS Element selector
  • CSS Id selector
  • CSS Class selector
  • CSS Universal selector
  • CSS Group Selector

Q12- What is the difference between CSS and CSS3?

  • CSS3 is divided into two various sections which are called as a module.
  • CSS3 is the latest version of CSS
  • Border-radius or box-shadow, flexbox graphics attribute can we use in CSS3.
  • CSS3 more advanced, comparison to CSS
  • CSS3 modules are supported almost on every browser and the modules of CSS are not supported in every browser.

Q13- What is the purpose of the z-index?

Z-index property helps in specifying the overlapping element. It is a number which can be positive or negative value, but the default value of z-index is zero.

  • Auto
  • Number
  • Initial
  • Inherit

Q14- What is the purpose of the important?

Important are defined as that declaration which is having more importance than the normal declaration, means the important property definitely shows the value of attributes.

Q15- How many position states used in CSS?

  • Static (default)
  • Relative
  • Fixed
  • Absolute

Q16- What are the margin properties in CSS?

The margin is the property by which we can create space around elements.

Properties of margin use in CSS:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Q17- Are quotes mandatory in URL's?

Quotes are optiobal in URL's, it can be single or double.

Q18- What benefits do external style sheets?

  • We can controlled one or more HTML page by using same CSS code
  • Multiple HTML elements can have many documents, where classes can be created.
  • To group styles in complex situations, selector and grouping methods are used.

Q19- What are various font's attributes?

  • Font-style
  • Font-size
  • Font-variant
  • Font-family
  • Line-height
  • Font-weight
  • Caption, Icon

Q20- What are the padding properties in CSS?

Padding is the property by which can generate space around an element’s content as well as inside any known border in CSS.

Some properties of padding use in CSS:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Q21- What are the limitations of CSS?

  • In CSS no column declaration possible
  • Ascending by selectors is not possible
  • Limitations of vertical control
  • Pseudo-class is not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible

Q22- How to give border in CSS class?

In border, three important things are required:

  1. Border Size
  2. Border Types - solid, dotted, non, etc.
  3. Border color
.class_name {
   border:2px, solid, #808080; //This border work for all directions.
 }

Q23- How many ways can a CSS be integrated as a web page?

Inline CSS Code:
<p style="colour:skyblue;"> hello inline css code!</p>

External CSS Code:

<head>
   <link rel="text/css" href="CSS_file_location" />
</head>

Internal CSS Code:

<head>
   <style>
     .p_class{
       Color: pink;
      }
   </style>
</head>

Q24- What is Pseudo-elements?

Pseudo-elements are used to add special effects to some selectors. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements.

Example of Pseudo-elements

.selector::pseudo-elements{
    property:value;
  }

Q25- How many types of CSS file use in HTML?

There are three types of CSS used in HTML web page, mentioned Below:

  • Inline - The CSS codes are written next to the text.
  • Internal - The CSS codes are written in the top of web page, means in head section.
  • External - The CSS codes are written in separate files.

Q26- What is float property of CSS?

Float property used to give direction of Text, Image, etc. There are five value of the property use in float - left, right, non, initial, and inherit.

The text can be moved to the right or the left along with the image to be wrapped around it, by the float property of CSS.

Q27- What are CSS counters?

CSS counters are variables which can be incremented by rules of CSS that inspector track how many times the variable has been used.

Q28- What is CSS opacity?

CSS opecity property used to elaborates the transparency of an element like - image, text, background-color, etc. We can take the values from 0.0-1.0 (if the value is lower then the image or text is more transparent).

Q29- What is the use of % Unit?

The % Unit is used for defining the percentage values.

Q30- What are the properties for controlling the image position?

By default, the image is placed on the top-left of the webpage. BUT we can set some following property of positions mentained below:

  • Right
  • Left
  • Center
  • Top
  • Bottem

GDATAMART

We are optimized for learning and job information. We try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content. Our Privacy & Policy →

© 2019 gdatamart.com | All Rights Reserved