.svg)
.svg)
If you’re interested in front-end engineering, you’ve definitely heard of Cascading Style Sheets. Cascading Style Sheets, or CSS, is a style sheet language used to develop a consistent look and feel for all the web pages of an application. CSS separates content from presentation, providing complete flexibility in designing a website. Engineers love working with CSS.
If you’re interested in, and plan to interview for, a CSS role, check out our technical interview checklist, interview questions page, and salary negotiation e-book to get interview-ready!
Having trained over 6,000 software engineers, we know what it takes to crack the toughest tech interviews. Since 2014, Interview Kickstart alums have been landing lucrative offers from FAANG and Tier-1 tech companies, with an average salary hike of 49%. The highest ever offer received by an IK alum is a whopping $933,000!
At IK, you get the unique opportunity to learn from expert instructors who are hiring managers and tech leads at Google, Facebook, Apple, and other top Silicon Valley tech companies.
Want to nail your next tech interview? Sign up for our FREE Webinar.
Here’s what we’ll cover in this article:
- Top 10 CSS Interview Questions With Answers
- 15 Commonly-Asked CSS Interview Questions
- How to Prepare for CSS Interviews
- How to Nail Your Next Tech Interview
- CSS Interview Questions FAQs
Top 10 CSS Interview Questions With Answers
1. What are the different ways to integrate CSS in an HTML page?
There are three ways to integrate CSS into an HTML page:
a. Inline CSS
Inline CSS contains the CSS property in the body section, attached with the element. This style is specified within the HTML tag using the ‘ style’ attribute.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009999; font-size:40px;
font-style:italic; text-align:center;">
Interview Kickstart
</p>
</body>
</html>
b. Internal or Embedded CSS
Internal CSS can be used to style a single HTML page uniquely. Here, the CSS file must be placed inside the HTML page in the ‘Head’ section.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.IK {
color:#009999;
font-size:50px;
font-weight:bold;
}
.interview {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="IK">Interview Kickstart</div>
<div class ="interview">
Interview Kickstart is like a fitness coach which guides you to achieve your dream job.
</div>
</div>
</body>
</html>
c. External CSS
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.
Example:
ik.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.IK {
color:#009900;
font-size:50px;
font-weight:bold;
}
#interview {
font-style:bold;
font-size:20px;
}
HTML File
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ik.css"/>
</head>
<body>
<div class = "main">
<div class ="IK">Interview Kickstart</div>
<div id ="interview">
Interview Kickstart is like a fitness coach which guides you to achieve your dream job.
</div>
</div>
</body>
</html>
2. What are the advantages of using CSS?
The advantages of using CSS are:
- You can control the style of several web pages using a single CSS file
- You can link multiple HTML elements to multiple CSS files, where classes can be created
3. What is the difference between an ‘ID’ and a ‘Class’?
ID: IDs are unique. Each ID can be assigned to only one single element. IDs are used for a specific styling of an element.
Syntax:
<div id=’submit’>
#submit {
Position: absolute;
}
Class: Classes are not unique. Multiple elements can have the same class. A class is a collective way of styling multiple elements together. Multiple classes can be added to a single element to achieve the desired style.
Syntax:
<div class=’button’>
.button {
font-color: yellow;
}
4. Name a few prominent CSS frameworks
Following are some important frameworks in the web development industry:
- Bootstrap: Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites.
- Foundation: Foundation is a responsive front-end framework that provides a responsive grid, HTML and CSS UI components, and code snippets like typography, forms, buttons, navigation, and other UI elements.
- Semantic UI: Semantic UI is a modern front-end development framework powered by LESS (CSS-preprocessor) and jQuery.
- UIkit: UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
5. What is the ‘float property’ used for in CSS?
The ‘float property’ places an element on the left or the right side of its container, allowing text and other inline elements to wrap around it.
Usage:
float: none;
float: left;
float: right;
6. What are the different types of media allowed by CSS?
There are four types of media properties:
- All for all media type devices
- Print for printers
- Search for screen readers that “read” pages out loud
- Screen for computer screens, tablets, mobile phones, etc.
7. How do you control image repetition using CSS?
You can use the ‘background-repeat’ property to control image repetition:
h1 {
background-repeat: none;
}
8. Which property would you use to control image scroll?
The background-attachment property sets a background image to scroll with the rest of the page or stay fixed.
Example of a background-image that is fixed:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
9. Explain ‘Tweening’
Tweening is a process that creates intermediate frames between two images to get the appearance of the first image, which develops into the second image. It is used, primarily, to create animations.
10. What are gradients in CSS?
The gradient is a property that allows for smooth transitioning between two or more specified colors. There are two types of gradients in CSS:
- Linear Gradient
- Radial Gradient
15 Commonly-Asked CSS Interview Questions
- Differentiate padding from margin.
- Differentiate logical tags from physical tags.
- Explain CSS position property.
- How do you center-align a div inside another div?
- What is CSS flexbox?
- What are CSS Sprites?
- What is the ‘z index’ in CSS?
- What is a ‘Box Model’ in CSS?
- What is ‘pseudo element’ and ‘pseudo-class’?
- What are the different types of selectors in CSS?
- What are the different ways to hide elements using CSS?
- What are the differences between ‘reset’ and ‘normalize’ in CSS?
- What are the advantages of using translate() instead of absolute position?
- What is the difference between {visibility: hidden} and {display: none}?
- What are the limitations of CSS?
How to Prepare for CSS Interviews
Here are 3 quick tips to for your CSS interview preparation:
- Stay Up-To-Date
Learn all about modern HTML tags and practices. You should be able to answer questions such as “What is the proper way to embed a video?” or“How do you handle non-standard fonts?”
- Understand Quirky CSS Selectors
The company you interview with might ask about weird or quirky CSS Selectors. You’ll have to understand these well.
- Understand the Interview Process
The most important thing is to understand the interview process of the company you’re interviewing at; prepare for all relevant topics and skills.
How to Nail Your Next Tech Interview
If you’re looking for guidance on how to crack your next tech interview, sign up for our FREE webinar.
As pioneers in the field of technical interview preparation, we have trained thousands of software engineers to crack the toughest coding and technical interviews and land jobs at their dream companies, such as Google, Facebook, Apple, Netflix, Amazon, and more!
CSS Interview Questions FAQs
Q. Will I be asked HTML questions at a CSS interview?
No, HTML questions are not usually asked at CSS interviews. However, you may be asked questions related to both HTML and CSS.
Q. What kind of questions are typically asked in CSS interviews?
The kind of questions asked usually depends on the interviewer. But, you can expect questions on topics such as modifying an existing button, modifying an existing web page, etc.
.png)
