CSS interview questions For Freshers & Experienced

  • Question 1) What is CSS? Why it is used?
  • Question 2) What are transitions in css?
  • Question 3) What are different ways to use css on a webpage?
  • Question 4) In Css what is the difference between "div p" and "div > p"?
  • Question 5) How do I create buttons of fixed width using CSS?
  • Question 6) What is the use of padding and margin in CSS?
  • Question 7) What is a CSS framework?
  • Question 8) What are different selectors available in css?
  • Question 9) What are the different types of units available in CSS?
  • Question 10) What is an Embedded Style Sheet?
  • Question 11) What are Pseudo-elements in CSS?
  • Question 12) Enlist few limitations of CSS?
  • Question 13) What are CSS counters?
  • Sharad Jaiswal
  • 30th Dec, 2019
  • 886 Followers

CSS interview questions
Updated ON

30th Dec, 2019

No. of Questions

15

Posted In

Front End

Author

Sharad Jaiswal

What is CSS?

CSS or Cascading style sheets is a style sheet language that is utilized to explain the portrayal of the documents that are written in the mark-up language such as HTML. It is developed to make the distinction of contents and presentation, comprising of fonts, colors, and layout. This distinction improves content accessibility, control, and flexibility in the condition of presentation features, allowing several web pages to part formatting by stating the pertinent CSS in a distinct .css file while reducing repetition and complexities in the framework's content. This distinction of content and formatting also ensure its workability of presenting a similar mark-up page in distinct styles for distinct pertinent methods like in print, on-screen, Braille-based touchable devices, by voice, and mobile devices.

Key Features of Css

Below are few major features of Css

Faster Page Load

Cleaner Code

Easy maintenance

Compatible with multiple devives

Global web standards

Styles our HTML

Plateform independent

Descendent selector

Specificity

CSS Interview Questions

Q1. What is CSS? Why it is used?

Cascading Style Sheets (CSS) is a programming language that is used to style or describe the HTML elements. Released in 1996, Cascading Style Sheets (CSS) allows the developers to separate individual components like layouts, fonts, paragraphs, etc to improve the flexibility and control in the specification of the presentation. The specifications for the CSS are maintained by the World Wide Web Consortium.

CSS improves the design language of a standard web document by describing how individual elements are to be displayed on the screen. CSS is used so the information document is separated from the document that describes the style. So, by doing this duplication is avoided, maintaining the documents is made easier, and reusability is improved.

Q2. What are transitions in css?

Transition is a CSS effect that is used to change the style of an element smoothly over some time. The duration is specified to the transition element. If it is not specified, the default value of 0 seconds is taken. The transition effect has the following sub-properties to control the element.

Transition-property- defines which element the transition is to be applied.

Transition-duration – defines the duration for the transition.

Transition-timing-function – defines a function to calculate intermediate values.

Transition-delay – defines the delay for the start of transition.

//syntax  
div { 
   transition:    ; 
} 
//example  
div { 
width: 100px; 
height: 100px; 
background: red; 
transition: width 2s; 
} 

Q3. What are different ways to use css on a webpage?

CSS can be applied to the HTML documents in three ways, internal, inline, and external.

Internal CSS

This is used if a HTML document needs to have unique style. The style language is defined within the style tag(<style>) inside the head of the HTML document.

//example
<!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px;} </style> </head> <body> <h1>This is a heading</h1> </body> </html>

Inline CSS

Here, the style can be applied to each element in the HTML document using the style attribute.

//example
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> </body> </html>

External CSS

Here, an external style sheet with all the CSS coding is created with .css extension and it can be linked to the HTML document using the link(<link>) element.

//example
body { background-color: lightblue; } It is a CSS file named ExternalCSS.css <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading <h1> </body> </html>

Note:- The css file is linked using the link element to the above document.

Q4. In Css what is the difference between "div p" and "div > p"?

Some basic difference between "div p" and "div > p" in CSS

div p{}

It is a general descendant selector. It applies the style as long as the paragraph(p) is present inside the <div>.

div > p{}

It is a direct descendant selector. It applies the style only if the paragraph(p) is the direct child of the <div>. That is ‘p’ should be first-level children, not sub children of <div>.

//example  
<div> 
<h1> A heading  
<p> A paragraph  
</div> 

Here p is not a direct child. So, div > p will not apply the effect to 'p', but div p will.

Q5. How do I create buttons of fixed width using CSS?

To create a button of fixed width. Create a button class of some width and apply that class to every button in the HTML document.

//example

.btn{ Width: 100px; }

It’s a class that has fixed width.

<button class=“btn”>okay</button>

We apply the class to a button. Like this, we can apply the class to every button to get a fixed width.

Q6. What is the use of padding and margin in CSS?

The margin property in CSS is used to create space around the element borders. You can control the margin space for each side using the property top, right, left, and bottom in the margin.

//example 
p { 
margin-top: 100px; 
margin-bottom: 100px; 
margin-right: 100px; 
margin-left: 100px; 
}

Here, 100px of space is created around each side of the paragraph element.

The padding property is used to create space around the element but inside its border. The same way as margin, you can set padding for each side with the padding property.

//example 
P { 
padding-top: 50px; 
padding-right: 50px; 
padding-bottom: 50px; 
padding-left: 50px; 
} 

Here, a space of 50px is created around the element but inside its border.

Q7. What is a CSS framework?

CSS framework can be defined as a collection of CSS files that allows for standard-compliant design.

Some of the frameworks may contain grid or Javascript functions, but most of the framework is used to improve the design of the webpage. The most popular CSS frameworks used now are bootstrap and foundation.

Q8. What are different selectors available in css?

Selectors in the CSS is used to find the HTML element. It can be divided into,

Element selector

It finds the element based on its name.

//example 
p{   
   text-align: center;   
} 
<p>name selector</p> 

Note:- It applies the style to the element that matches the name ‘p’ which is the paragraph.

ID selector

It selects the element based on its id.

//example 
#para1{
text-align: center;
}
<p id = “para1”>id selector</p>

Class selector

It selects the element with a specific class attribute.

//example
.center { text-align: center; } <p class="center">Class selector.</p>

Universal selector

It applies the style to every element on the page. It is defined with the asterisk symbol.

//example

* { color: green; }

Note:- The above style of defined is applied to every element on the page.

Group selector

It is used to select elements with the same style.

//example
h1,h2,p { text-align: center; }

Note:- Here the h1, h2, and p will get the same style.

Q9. What are the different types of units available in CSS?

CSS supports several measurement units. Such as,

  • % - defines measurement as a percentage relative to other value .
  • Cm – defines measurement in centimeters.
  • Em – a relative measurement for the height. One em is equal to the size of the given font.
  • Ex – defines measurement relative to the font ‘x’ alphabet height.
  • In – defines measurement in inches.
  • Mm – defines measurement in millimeters.
  • Pc – defines measurement in picas. One pica is 12 points.
  • Pt – defines measurement in points. One point is 1/72nd of an inch.
  • Px- defines measurement in screen pixels

Q10. What is an Embedded Style Sheet?

Embedded style sheet is a way of specifying the CSS style language in the HTML document. Here, you specify the CSS inside the tag within your HTML document. The style tag must be placed within the head tag of the document. This type is used for the document that should have a unique CSS style.

//example
<html> <head> <style type="text/css"> p { font-family: georgia, serif; font-size: x-large; } </style> </head> <body> <p>Example for Embedded Style Sheet </body> </html>

Q11. What are Pseudo-elements in CSS?

A pseudo-element is used to apply a CSS style to the specific parts of the HTML element. The specific part may be the first line, letter, before or after a line or letter of an element.

//syntax 
selector::pseudo-element { 
  property:value; 
} 
//example 
p::first-line { 
font-variant: small-caps; 
} 

Here, the above code will apply the style to the first line of the paragraph. By the same way you can do for the first letter(::first-letter), before content(::before), after content(::after), and selection(::selection).

Q12. Enlist few limitations of CSS?

CSS is a good language to design the webpage, but it has some limitation such as,

  • CSS has different versions from CSS1 to CSS3. This may result in confusion among developers.
  • CSS is fragmented. So, some functions in CSS may work in some browsers and some don’t.
  • CSS doesn’t have any built-in security system. Anyone can change the CSS file with read/write permission.
  • CSS is not a complete programming language. It is just a styling language. So, it cannot do certain things like logical operations, reading files, interacting with a database, request a webpage, etc

Q13. What are CSS counters?

In CSS, counters are simply a variable that is incremented by CSS to track count of how many times something is used. To set a counter, you must initialize it using the counter-reset property. A counter, for example can be used to display the number in the headings.

//example  
body { 
counter-reset: section;    //initializing a counter named section. 
} 
To use a counter, use counter-increment property. To display the counter value, use content property. 
h3::before { 
counter-increment: section;           //It increments the counter value  
content: counter(section) ;    	     //It displays the value of the counter 
} 

Q14. What are gradients in CSS?

The gradients in the CSS allow you to create a background with a smooth transition between two colors. CSS has two types of gradients, Linear and Radical.

For the Linear gradient, you must specify two color stops, that is the start and the stop color of transition and also the direction of the transition like goes down, top, right, left, or diagonal.

//example 
#grad { 
background-image: linear-gradient(to right, red , yellow); 
} 

Note:- It creates a background gradient that transitions from left to right from red to yellow color.

For Radical gradient,

the transition occurs as an ellipse from center for different colors.

//example 
#grad { 
background-image: radial-gradient(red, yellow); 
} 

Note:- It creates two elliptical shaped transition from the center of two colors (red and green).

Q15. What is CSS flexbox? Enlist properties of the flexbox?

Flexbox in CSS is a layout module to create responsive layout that is flexible to design.

//example 
<div class="flex-container"> 
<div>1</div> 
</div>

To use a flexbox layout, you need to first define a flex container. In the above example, a flex container is designed with one division.

.flex-container { 
display: flex;    //the display property makes the flex container flexible. 
} 

Flexbox has six properties. They are,

  • Flex-direction – defines in which direction the elements should be stacked in the flexbox.\
  • Flex-wrap – defines whether the elements in the flex should wrap or not.
  • Flex-flow – defines both direction and wrap property.
  • Align-items - defines the alignment of the items in the layout.
  • Align- content – defines the alignment of the flex lines.
  • Justify-content – aligns the flex items.

About Author :

  • Author of CSS interview questions

    Sharad Jaiswal

    Sharad Jaiswal is Sr. Web Developer from Noida area. He have rich experience in PHP, Angular Js, React, javascript and Node .If you any query or project on these programming you can drop your enquiry in comment section.

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.