25 CSS Interview Questions For Beginners in 2021: Part 1

25 CSS Interview Questions For Beginners in 2021 | Part 1
25 CSS Interview Questions For Beginners in 2021 | Part 1

Introduction 

CSS (Cascading Style Sheets) is widely used to design the webpage and make it attractive. A company will always prefer a frontend developer with solid skills in CSS as they make the webpage more presentable to the users. CSS concepts are asked in frontend interviews to test if the candidate is comfortable changing styles in the product. CSS interview questions can be tricky sometimes, and hence candidates need to have a firm grasp of CSS.

This blog contains a list of the important CSS interview questions which are generally asked in a frontend interview to a fresher. The whole blog consists of 50 interview questions and is divided into 2 parts. In this part of the blog we discuss some beginner level questions and in the next part of this blog, the advanced CSS Interview questions will be discussed. So, if you’re on your way to a frontend interview, this blog is going to be helpful. 

CSS

Cascading Style Sheets(CSS) is a style sheet language used to define the style of the web page, including the layout, design, and variations that can be viewed in any screen size. It is used along with markup languages like HTML(HyperText Markup Language) or an XML(Extensible Markup Language) document. 


CSS originated from SGML (Standard Generalized Markup Language), a standard for defining markup languages. The different variations of CSS include CSS1, CSS2, CSS2.1, CSS3, CSS4

To know more about the CSS variations, check out the blog “What Are The Major Differences Between CSS, CSS2, And CSS3”.

CSS can make the website more appealing by changing the font color, adding animations, changing the layout, etc. Most websites used HTML, CSS, and JavaScript to create a user interface for both desktop as well as mobile devices. Now, let’s go through the CSS Interview questions.

CSS Interview Questions

  1. What are the different ways by which a CSS stylesheet is included in the HTML?

Ans:-  CSS stylesheet is added to the HTML in the following manner:

  • Inline CSS: CSS properties are directly applied to the HTML element using a style tag.
<p style="color:red;">This paragraph is red in color.</p>
  • Internal CSS:  Inside the head section, the style is defined inside the style tag to style the whole page.
 <style>
   body {
    background-color: black;
   }
 </style>
  • External CSS: An external file is linked to the HTML document using the link tag in the head section. 
<link rel="stylesheet" href="path/to/style.css">
  • Importing a CSS file into another CSS file using the @import rule.
@import "path/to/style.css";
  1. What is the CSS ruleset?

Ans:- CSS is a set of rules that describes individual elements’ appearance on a web page. It consists of two parts: the selector and the declaration block.

CSS_ruleset

CSS Ruleset

Selectors are the patterns used to select the elements to be styled. 

blog banner 1

Declaration block is enclosed between the curly braces and specifies the CSS property and property’s value applied to the element. A semicolon separates each property.

  1. Explain the different types of selectors in CSS?

Ans:- A CSS selector is a string that identifies the elements to which a particular CSS property is applied.  The different types of selectors are:-

i) Universal Selector: The universal selector selects all the elements and applies the CSS properties to them.

ii) Element Type Selector: It matches one or more HTML elements of the same element type.

iii)  ID Selector: It matches the HTML element with an ID attribute the same as the selector value.

iv) Class Selector: It matches all page elements with their class attribute same as the selector value.

v) Descendant Combinator: The descendant combinator combines two or more selectors so that elements can be selected more specifically. It selects all HTML elements that are either children, grandchildren, great-grandchildren, and so on.

vi) Child Combinator: A child combinator is used to target immediate child elements of a parent element. 

vii) General Sibling Combinator: It matches elements based on sibling relationships. The selected elements stay beside each other in the HTML document.

viii) Adjacent Sibling Combinator: It targets an element that must be an immediate sibling.

ix) Attribute Selector: It targets elements based on HTML attributes’ presence and/or value. 

x) Pseudo-class: It uses a colon character to identify a pseudo-state that an element might be in, for example, the stage of being hovered.

Let’s see how these selectors work.

Style code:

<style>
    /* universal selector */
    * {
     color: blue;
    }
 
    /* element type selector */
    p {
     font-weight: 900;
    }
 
    /* id selector */
    #idElement {
     color: green;
    }
 
    /* class selector */
    .classElement {
     padding: 20px;
     width: 120px;
     height: 50px;
     background-color: green;
     text-align: center;
     border: 2px solid blue;
     margin: 10px;
     color: white;
     align-items: center;
     display: flex;
    }
 
    /* descendant combinator */
    #container > .classElement {
      background-color: yellow;
      color: black;
    }
 
    /* child combinator */
    div > p {
      font-size: 1.2rem;
    }
 
    /* general sibling combinator */
    h1 ~ p {
     text-align: center;
    }
 
    /* adjacent sibling combinator */
    p + p {
     text-indent: 2.4em;
     margin-bottom: 0;
    }
 
    /* attribute selector */
    input[type="text"] {
     background-color: black;
     color: white;
     font-weight: bold;
     font-size: 1.4rem;
     width: 200px;
    }
 
    /* Pseudo-class */
    h1:hover {
     background-color: red;
    }
  </style>

Body Code:

<body>
  <h1>CSS Selector</h1>
  <p>Element type Selector</p>
  <p id = "idElement">ID Selector</p>
  <div class="classElement">Class Element 1</div>
  <div class="classElement"><p>Class Element 2</p></div>
  <div class="classElement">Class Element 3</div>
  <div id = "container">
   <div class="classElement">Class Element 4</div>
   <div class="classElement"><p>Class Element 5</p></div> 
  </div>
  <p>Adjacent sibling combinator</p>
  <p>Adjacent sibling combinator</p>
  <input type="text" placeholder = "Attribute Selector"/>
</body>
css_selector
WORKING
  1. What are the advantages of using CSS?

Ans:- The advantages of CSS are:-

  • CSS provides a method to present the same content in multiple ways for different screen sizes.
  • CSS changes the complete look of the page with a small code change. 
  • The style sheets are stored in the browser cache and used on multiple pages without downloading again.
  1. Mention a few prominent CSS frameworks.

Ans:- A CSS framework is a library that helps developers build standards-compliant web design easily. The commonly used CSS frameworks are: –

  1. Bootstrap: Bootstrap harnesses the power of flexbox and grid systems to make websites look pretty and responsive. It is one of the oldest and frequently used CSS frameworks.
  2. Foundation: Foundation is one of the most advanced responsive CSS frameworks.  It was built to support rails and is primarily inspired by its principles.
  3. Semantic UI: Semantic UI  is a modern CSS framework powered by LESS(Leaner Style Sheets) and jQuery. It has a sleek and subtle design look that provides a lightweight user experience.
  4. UIkit: UIkit is a lightweight and modular CSS framework for developing fast and powerful web pages.

Check out the blog 10 Best CSS Frameworks for Frontend Developers to know more about the frameworks.

  1. Explain the difference between inline, inline-block, and block.

Ans:- The difference between inline, inline-block, and block are:- 

inline: 

  • Elements displayed as an inline element
  • Do not start on a new line. 
  • The element only takes up the required width 
  • Not affected by height and width properties
  • Default property of <a>, <span>, <img> 

inline-block:

  • Element displayed as an inline-level block container
  • Height and width can be applied

block:

  • Element displayed as a block element
  • Starts on a new line
  • Takes up the whole width
  • Default property of <div>,<h1>…<h6>,<form>, <footer>, <header>, <section>, <p> 

Check out the detailed blog, Explained: CSS Display Inline, and observe how each one of them works.

  1. Mention some of the limitations of CSS.

Ans:- Some of the limitations of CSS are:-

  • Some style selectors are not supported in some browsers, and @supports CSS at-rule has to be used to determine if support is present.
  • Some selectors behave differently in some browsers.
  • No selector is present to select the parent element.
  1.  What does the cascading portion in CSS mean, and how do style sheets cascade?

Ans:- Before CSS was introduced, the styles were implemented in the head section of an HTML page. This was changed after the arrival of CSS. Cascading in CSS means that the styling rules “cascade” down from several sources. CSS has an inherent hierarchy, and styles of higher precedence will overwrite rules of lower precedence. The three ways CSS cascades are:-

  1. The same CSS style is applied to multiple elements to achieve the same style.
  2. Various styles can be applied to a particular HTML element to achieve a unique style.
  3. The same stylesheet is applied to different HTML pages altogether to achieve template styling very quickly.
  1. Explain browser style sheets, user style sheets, and author style sheets in brief.

Ans:- 

Browser style sheets: The browsers, by default, apply style sheets to all web pages. This style sheet varies from browser to browser. Common characteristics in all browser style sheets include black text, blue links, purple visited links, etc. The author style sheet overrides the browser’s style sheet.

User style sheets: Most browsers allow users to set their style sheets within their browser. These style sheets will override the browser’s default style sheets – for that user only.

Author style sheets: The style sheet created by the developer is called the author style sheets. Choosing fonts, colors, etc., in CSS is done using author style sheets.

  1.  What is VH/VW in CSS?

Ans:- VW(viewport width) and VH(viewport height) measure CSS units.It is used to improve the responsiveness of the design. The measure VW is equal to 1/100 of the width of the viewport. Similarly, VH is equal to 1/100 of the height of the viewport. 

  1. Does margin-top or margin-bottom affect inline elements?

Ans:- No, they don’t have any effect on the inline elements. Inline elements flow with the contents of the page.

  1.  Mention the advantages and disadvantages of using External Style Sheets?

Ans:- The advantages and disadvantages are as follows:-

Advantages:

  • Elements with the same class name are used on several pages and can be styled using a single stylesheet.
  • Styles of multiple pages can be controlled from a single stylesheet
  • Clean code, which makes debugging easier.

Disadvantages:

  • The additional download is expected to import documents having style information.
  • Not useful for small style definitions.
  1.  What is the difference between display: none and visibility: none?

Ans:- 

display: none – removes the element as if the element never existed.

          visibility: none – hides the element, but the element will still take up the same space as before.

Check out the blog, Explained: CSS Display Inline, for a more detailed explanation with implementation.

  1.  What is the difference between class selectors and id selectors?

Ans:- The primary difference between an ID and a class is that an ID is used to identify only one element, whereas a class is used to identify one or more than one element.

  1. Mention the difference between the nth-child() and nth-of-type() selectors?

Ans:- The nth-child() pseudo-class matches an element based on a number, where the number represents the number of siblings that exist before the element in the document tree.

The nth-of-type() pseudo-class matches an element based on a number, where the number represents the element’s position within only those of its siblings of the same element type.

Style Code:

p {
     font-size: 2rem;
     font-weight: bold;
    }
 
    /* works if the second child element is of type p */
    p:nth-child(2) {
     color: red;
    }
 
    /* does not work as the fourth child element is not of type p */
    p:nth-child(4) {
     color: blue;
    }
 
    /* applied to second p element */
    p:nth-of-type(2) {
     color: green;
   }

Body Code:

<h1>A</h1>  
 <p>B</p> 
 <p>C</p> 
 <h1>D</h1>
 <p>E</p>
illustrative_diagram
OUTPUT
  1.  What are CSS preprocessors?

Ans:- A CSS preprocessor is a program that generates CSS from the preprocessor’s unique syntax. Preprocessors extend CSS with variables, interpolations, operators, functions, mixins, etc. After development, these specific files are compiled into regular CSS, which is understood by the browser. They help developers write reusable, maintainable, and extensible codes in CSS. 

Some CSS preprocessors are- SASS (Syntactically Awesome Style Sheets), LESS (Leaner Style Sheets), Stylus, etc.

  1.  What is Responsive Web Design (RWD)?

Ans:- Responsive Web Design is used to display the designed page perfectly on every screen size. Different pages need not be created for each device. 

Check out the blog Building a Responsive Website using Pure CSS.

  1.  What is the clear property in CSS?

Ans:- The clear property specifies which elements can float beside the cleared element and on which side.

Property ValueDescription
noneDefault property which allows elements to float on both sides.
leftFloating elements are not allowed on the left side.
rightFloating elements are not allowed on the right side.
bothFloating elements are not allowed on the left as well as the right side.
inheritThe clear value of the parent element is inherited.
  1.  What are the advantages of CSS preprocessors?

Ans:- The advantages of CSS preprocessors are:-

  • CSS code is made more maintainable.
  • Nested selectors can be easily written.
  • Variables are used for consistent theming by sharing theme files across different projects.
  • Mixins are used to generate repeated CSS code.
  1.  What is the difference between reset and normalize CSS?

Ans:- Reset CSS: It aims to remove all built-in browser styling. For example, margins, paddings, font sizes of all elements are reset to be the same. 

           Normalize CSS: It aims to make built-in browser styling consistent across 

           browsers and correct bugs for common browser dependencies.

  1.  How does !important work in CSS?

Ans:- !important overrides the cascade and gives the highest priority to the style rule.

Style Code:

p {
     font-size: 2rem;
     font-weight: bold;
     color: red;
}
 
.important {
color: blue !important;
}

Body Code:

<p>Coding</p>
/* color is blue instead of red */
<p class="important">Ninjas</p>
illustrative_diagram
OUTPUT
  1.  Why is @import kept at the top?

Ans:Keeping @import at the top avoids any overriding rules. This is similar to the ranking order followed by programming languages like C++, Java, etc. 

  1.  Explain the difference between margin and padding?

Ans:- Margin is applicable outside the element and hence affects the distance with the nearby elements.

Padding is applicable inside elements and hence affects how far the element’s content is away from the border.

illustrative_diagram2
  1.  Define CSS image sprites.

Ans:- A group of images placed into a single image is called a CSS image sprite. This helps to reduce the load time and the HTTP request to the server while projecting multiple images into a single web page.

  1. Is CSS case sensitive?

Ans:- CSS is not case-sensitive; however, font families, image URLs, etc., are. When XML declarations and XHTML DOCTYPE are used on the page, CSS is case-sensitive.

Key Takeaways

This blog covered the top 25 CSS interview questions that can be asked to a fresher in 2021, along with a detailed explanation. In the next part of this blog, we will cover the advanced CSS interview questions in the blog 25 CSS Interview Questions for Experienced in 2021 | Part – 2. 

Don’t stop here. Check out our Full-stack development course to learn web development from scratch. You can also check out the blog on the Best CSS properties for a frontend developer

By: Hari Sapna Nair