Top CSS Interview Questions And Answers

CTA

CSS stands for cascading style sheets. They allow you to add style to your web pages. CSS is among the most essential features in the field of web development. This blog comprises all the significant interview questions that you may encounter during your job interview. Excel in your career by preparing yourself for job interviews through these CSS interview questions:

Q1. What is CSS?
Q2. What is an external style sheet? How would you link to it?
Q3. What are the advantages and disadvantages of using external style sheets?
Q4. What are the advantages and disadvantages of embedded style sheets?
Q5. What is a CSS selector?
Q6. What is tweening?
Q7. What is the box model in CSS? Which CSS properties are a part of it?
Q8. How can you include CSS in a web page?
Q9. What are the different types of selectors in CSS?
Q10. What is a CSS preprocessor? What is SASS, LESS, and Stylus? Why do people use them?

The main categories of these CSS interview questions are as follows:
1. Basic

2. Intermediate

Watch this Video on Web Developer Interview Questions and Answer:

Basic CSS Interview Questions

1. What is CSS?

Cascading Style Sheet (CSS) is a style sheet language that is used to determine how the elements or content in a page will look or be displayed. It helps build a consistent look and feel for all web pages.

CSS allows the separation of the content from the presentation, thus providing more flexibility and control over the look of the website.

CSS3, the third version of the CSS standard, incorporates CSS2 standard with some improvements such as the inclusion of divisions of standards into different modules. It makes CSS3 easier to learn and understand.

2. What is an external style sheet? How would you link to it?

The external style sheet is the sheet that comprises style information and can be connected with one or more HTML documents. With the help of an external style sheet, the entire website can be formatted and styled just by editing one single file. The file is connected with HTML documents with the help of the LINK element, which resides inside the HEAD element.

3. What are the advantages and disadvantages of using external style sheets?

The advantages of using external style sheets are as follows:

• Styles of numerous documents can be organized from one single file.
• Classes can be made for use on numerous HTML element types in many forms of the site.
• In complex contexts, methods such as selector and grouping can be implemented to apply styles.

The disadvantages of using external style sheets are as follows:

• An extra download is necessary to import style information for each file.
• The execution of the file may be deferred till the external style sheet is loaded.
• While implementing style sheets, we need to test web pages with multiple browsers in order to check compatibility issues.

Click here to learn more about CSS, in this Web development master’s program.

4. What are the advantages and disadvantages of embedded style sheets?

The advantages of embedded style sheets are as follows:

• In embedded style sheets, it is possible to generate classes for use on multiple tag types in a document.
• In embedded style sheets, in comparison to external style sheets, no extra download is compulsory to import the information.

The disadvantage of embedded style sheets are as follows:

• In embedded style sheets, controlling the styles for multiple files from one file is not possible.

5. What is a CSS selector?

A CSS selector is the portion of a CSS set that chooses the content that requires a specific style. A CSS selector is also referred to as a connection between the stylesheet and HTML files. A CSS selector permits you to choose and operate HTML elements. CSS selectors are used to selecting or find HTML elements created on their id, class, type, etc.

6. What is tweening?

Also known as in-betweening, tweening is the process of creating intermediary frames between two images to provide the appearance that the first image develops efficiently into the second image. It is a key process that is used in all types of animations. Refined animation software permits you to find particular objects in an image and describe how they will be able to move and change throughout the tweening process.

7. What is the box model in CSS? Which CSS properties are a part of it?

A rectangle box is wrapped around every HTML element. The CSS box model is used to determine the height and width of the rectangular box. If it is not mentioned, then default values and content are added inside. The CSS box also includes borders, margins, and padding.

• Content: It refers to the actual content of the box where the text or image is placed.
• Padding: It is the area surrounding the content, and it is the space between the border and the content.
• Border: It is the area that surrounds the padding.
• Margin: It refers to the area that surrounds the border.

8. How can you include CSS in a web page?

There are different ways by which you can include a CSS in a web page:

• External Style Sheet: An external file is linked to the HTML document using the link tag.

  <link rel="stylesheet" type="text/css" href="mystyles.css" />

• Embed CSS with a Style Tag: Another way to include CSS in a web page is by having a set of CSS styles included within the HTML page.

  <style type="text/css">
  /*Add style rules here*/
  </style>

  The CSS rules have to be added between the opening and closing style tags. The CSS is written exactly like the standalone style-sheet files.

• Inline Styles to HTML Elements: Style can be added directly to the HTML element with the help of a style tag.

  <h2 style="color:red;background:black">Inline Style</h2>

• Import a Style-sheet File: Another way to add CSS is by using the @import rule. Here, an external file is imported to another CSS file. This is for adding a new CSS file within the CSS itself.

  @import "path/to/style.css";

9. What are the different types of selectors in CSS?

A CSS selector in a CSS rule set helps select the content that needs to be styled. The different types of selectors are listed below:

• Universal Selector: The universal selector selects all elements on a page. The provided styles will get applied to all the elements on the page.

  * {
    color: "green";
    font-size: 20px;
    line-height: 25px;
  }

• Element Type Selector: The element type selector selects one or more HTML elements of the same name. In the example below, the provided styles will be applied to all the ul elements on the page.

  ul {
    line-style: none;
    border: solid 1px #ccc;
  }

• ID Selector: The ID selector is used for selecting any HTML element that has an ID attribute same as the selector. In the below example, the assigned styles will get applied to all the elements having the ID container.

  #container {
    width: 960px;
    margin: 0 auto;
  }
  <div id="container"></div>

• Class Selector: The class selector choses all the page elements with class attributes that are set to the same value as the class. The styles get applied to all the elements having the same ID on the page.

  .box {
    padding: 10px;
    margin: 10px;
    width: 240px;
  }
  <div class="box"></div>

• Descendant Combinator: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors and be more specific in the selection method.

  #container .box {
  float: left;
  padding-bottom: 15px;
  } 
  <div id="container">
  <div class="box"></div>
  <div class="box-2"></div>
  </div>
  <div class=”box”></div>

  In the above example, the declaration block applies to all elements having a class, “box”, that is inside an element with the ID, “container”.  It is worth noting that the .box element does not have to be an immediate child; there can be another element wrapping the .box, and the styles will still apply.

• Child Combinator: The child combinator is similar to the descendant combinator, except it only targets immediate child elements.

  #container> .box {
  float: left;
  padding-bottom: 15px;
  }
  <div id="container">
  <div class="box"></div>
  <div>
  <div class="box"></div>
  </div>
  </div>

  The selector will match all elements that have a class, “box”, and are immediate children of the element, “container”.

• General Sibling Combinator: The general sibling combinator matches elements based on sibling relationships. The selected elements are adjacent to each other in HTML.

  h2 ~ p {
  margin-bottom: 20px;
  }
  <h2>Title</h2>
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
  <div class=”box”>
  <p>Paragraph example.</p>
  </div>

  In the above example, all paragraph elements, (<p>), will be styled with the specified rules, but only if they are siblings of <h2> elements. Even if there are other elements in between <h2> and <p>, the styles will still apply.

• Adjacent Sibling Combinator: The adjacent sibling combinator is almost the same as the general sibling selector but the targeted element must be an immediate sibling, not just a general sibling. The adjacent sibling combinator uses the plus symbol, (+).

  p + p {
  text-indent: 1.Sem;
  margin-bottom: 0;
  }
  <h2>Title</h2>
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
  <div class=”box”>
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
  </div>

  In the above example, the specified styles will apply only to those paragraph elements that immediately follow other paragraph elements. This means that the first paragraph element on a page will not receive these styles.

  If there are other elements appearing between two paragraphs, the styles will not apply to the second paragraph.

• Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes. It is declared using square brackets.

  input [type=”text”] {
  background-color: #444;
  width: 200px;
  }
  <input type="text">

10. What is a CSS preprocessor? What are SASS, LESS, and Stylus? Why do people use them?

A CSS preprocessor allows us to generate CSS from the preprocessor’s own unique syntax. It extends the basic functionality of default vanilla CSS through its own scripting language. With a CSS preprocessor, it is possible to use complex logical syntax such as variables, mixins, functions, code nesting, inheritance, etc.

SASS: Syntactically awesome style sheets (SASS) is a CSS preprocessor. It reduces the repetition of CSS, thus saving time. SASS can be written in two different syntaxes. The original syntax, called the indented syntax, uses indentation to separate code blocks and newline characters to separate rules.

The newer syntax, Sassy CSS (SCSS), uses block formatting, like CSS, and braces to denote code blocks and semicolons to separate rules within a block. The indented syntax and SCSS files have the extensions .sass and .scss respectively.

LESS: Learner style sheets, or LESS, are easy to add to any JavaScript project with the help of npm or less.js file. It uses the extension .less. LESS syntax is similar to SCSS with some exceptions. It uses @ to define the variables.

Stylus: Stylus is quite flexible when it comes to writing syntax. It supports native CSS and allows omission of colons, semicolons, and brackets. @ or $ does not need to be used for defining variables.

These CSS processors are used because they help build inventive features to CSS by using variables, mixins, nesting, and extending.

11. What is the difference between reset CSS and normalize CSS?

Reset CSS attempts to remove all built-in browser styling, while normalize CSS aims for consistency in built-in browser styling across browsers. Normalize CSS also fixes bugs for common browser dependencies.

12. What is the difference among inline, inline-block, and block elements?

Block Element: Block elements always start on a new line and occupy an entire row or width. Examples of block elements are <div> and <p>.

Inline Elements: Inline elements do not start on a new line; they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <strong>, <span>, and <img>.

Inline-block Elements: Inline-block elements are similar to inline elements, but they can have padding, margins, and set height and width values.

13. What are pseudo elements and pseudo classes?

Pseudo elements help to create items that do not normally exist in the document tree. The examples of pseudo elements are:

• ::before
• ::after
• ::selection
• ::first-letter
• ::first-line

Pseudo classes select regular elements under specific conditions such as when a user is hovering over a link. The examples of pseudo classes are:

• :hover
• :active
• :link
• :visited
• :focus

14. What is a responsive web design?

A responsive web design is about design and development that responds to the user activities and the components involved such as screen size, platform, and orientation. It comprises a mix of flexible grids, layouts, images, and intellectual use of CSS media queries.

15. What are the differences between adaptive design and responsive design?

16. What are the properties of Flexbox?

The numerous characteristics of CSS Flexbox can be used to create intricate and powerful compositions.

• display is used to describe a flex container. The flex value is utilized to establish a flex container.
• flex-direction is employed to determine the direction of the primary axis, which is the axis that flex items are arranged along. This property can have the values row, row-reverse, column, and column-reverse.
• justify-content aligns flex items parallel to the primary axis. This property can take many different values, including flex-start, flex-end, center, space-between, space-around, and space-evenly.
• align-items align flex items perpendicular to the primary axis. Flex-start, flex-end, center, baseline, and stretch are all possible values for this attribute.
• flex wrap determines whether or not flex items should wrap when their width exceeds the width of the flex container. This property’s possible values are nowrap, wrap, and wrap-reverse.
• align-content, When there is extra space in the flex container, use align-content to align flex lines perpendicular to the major axis. This property’s likely values are flex-start, flex-end, center, space-between, space-around, and stretch.
• flex is employed to establish the flex grow, flex shrink, and flex basis of a flex item. The shorthand property flex creates all three values at the same time. The individual properties are flex-grow, flex-shrink, and flex-basis.

Intermediate CSS Interview Questions

17. What is the difference between physical and logical tags?

Logical tags mainly focus on the content and are older as compared to the physical tags. Logical tags are hardly used in terms of presentation. In terms of aesthetics, logical tags do not serve any purpose. However, physical tags find their application in presentation.

18. What is the use of CSS image sprites?

It is a group of images placed into one image. A web page with multiple images can take a lot of time to load and uses multiple server requests to project the same. With the help of image sprites, we can decrease the number of requests to the server and save time and bandwidth as well.

19. What is the syntax to link an external style sheet?

An external style sheet comprises style description that can be linked with the HTML document externally. An external style sheet is one of the best and most organized ways to keep the style separate from the structure.

The syntax for linking an external style sheet is as follows:

<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="Test.css" TYPE="text/css">
</HEAD>
</HTML>

If you wish to learn more about HTML, then you can take up this HTML and jQuery Course.

20. How can embedded style be linked with HTML documents?

Embedded style can be implemented within HTML code. It is written using the <Style> tag and used under the <Head> structure.

Its syntax is as follows:

<HEAD>
<STYLE TYPE=”text/css”>
style {text-indent: 15pt;}
style1{text-color: #060000;}
</STYLE>
</HEAD>

21. Why is the imported function an easy way to insert a file?

An imported style sheet permits us to import external files or combine one style sheet with another. Many files can be created, and different style sheets have different functions. The import function gives the provision to combine many elements or functionalities into one. The syntax to import any file is @import notation, which is used inside the <Style> tag. There is a one rule that implies that the last imported sheet will override the previous ones.

The syntax is shown by coding as:

<Link Rel=Stylesheet Href=”Main.Css” Type=”Text/Css”>
<STYLETYPE=”text=css”>
<!–
@import url(http://www.xyz.css);
…. your code
–>
</STYLE>

The <!– –> tag is used as a comment for browsers that do not support CSS.

22. What are the advantages of using CSS?

The main advantages of using CSS are:

• Separation of Content from Presentation: CSS enables presentation of the same content in multiple formats for mobile, desktop, or laptop.
• Bandwidth: When CSS is used effectively, the browser cache can store the style sheets and these can be used on multiple pages without the need to redownload.
• Easy to Maintain: By making small changes, CSS can be used to completely change the look and feel of a web page. For a global change, we simply have to change the style, and all elements in all web pages will be automatically updated.

23. How are the CSS selectors matched against the elements by the browser?

The order of matching selectors is from right to left of the selector expression. Based on the key selectors, DOM elements are filtered by browsers and are then traversed up to the parent elements to determine the matches. The speed of deciding the elements is based on the length of the chain of selectors.

24. How is border-box different from content-box?

The border-box property contains the content, border, and padding in height and width properties. If you look at the example below, the box-sizing for the div element is set as border-box. The height and width considered for the div content will also include the padding and border:

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

The actual height of the div content in this case is:

actual height = height - 
                padding on top and bottom - 
                border on top and bottom
              = 200 - (15*2) - (5*2) 
              = 160 px
The actual width of the div content in this case is:
actual width  = width - 
                padding on right and left - 
                border on right and left
              = 300 - (15*2) - (5*2) 
              = 260 px

Let us take a look at the border-box model for the above example:

Content-box, on the other hand, is the default value box-sizing property. Height and the width properties do not include border and padding and only have content. For example:

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

Here, content-box is the box-sizing for the div element. The height and width for the div content do not include padding and border. The full height and width parameters are specified for the content as shown below:

25. Explain RGB stream

RGB represents the colors in CSS. The RGB streams are namely red, green, and blue. The intensity of the colors can be set from 0 to 255. It enables CSS to have a spectrum of visible colors.

26. Define z-index

Z-index helps specify the stack order of elements that overlap each other. While the default value of z-index is zero, it can take both positive and negative values. An element with a greater stack order is always above the element with a lower stack order.

Z-index can assume the following values:

• auto: It sets the stack order equal to its parents.
• number: It sets the stack order of the element. Negative values are allowed.
• initial: It sets this property to its default value.
• inherit: It inherits this property from its parent element.

27. When should translate () be used instead of absolute positioning?

Translate is a CSS transform value. Changing the opacity or transform does not trigger the browser reflow or repaint. Transform requires the browser to create a GPU layer for elements. However, CPU usage changes absolute positioning properties.

translate() involves reduced paint times and is more efficient. Unlike when changing absolute positioning, the element occupies original space when translate () is used.

28. Name the different ways to position some aspects in CSS

The positioning method type is determined by the positioning property. The five different position values are:

• fixed
• static
• absolute
• sticky
• relative

The elements are positioned with the help of top, left, right, and bottom properties. These properties need to be set first, and they work depending on position value.

29. What are mixins?

A mixin returns a single value and is somewhat similar to a function block of code. It allows us to make groups of CSS declarations that may be reused throughout the site. It helps keep the SASS very DRY. The values can be passed on to make the mixins more flexible. To create a mixin, the @mixin directive is used and given a name.

30. How can a web page be optimized for prints?

A website typically contains a header, footer, sidebar, navbar, and main content area. The content sections of the website need to be identified and controlled. By doing so, most of the work is done.

The integrity of the website should not be changed. It is recommended to use page breaks, create a style sheet for print, size the page for print, and avoid unnecessary HTML tables.

31. What is the property that is used to control image scroll?

The background-attachment property is used to set whether the background image remains fixed or is scrollable with the rest of the page. Here is an example for a fixed background-image:

body {
  background-image: url(‘url_of_image’);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

To acquire the skills necessary to become a Web Developer, you must enroll in one of the best Web Development Courses Online!

32. What are the Differences between CSS flexbox and CSS grid?

CSS Flexbox and Gridare are CSS layout systems, although they have different purposes and qualities. Flexbox is useful for simpler, one-dimensional layouts for regulating item alignment within a container, whereas CSS Grid is great for more complicated, multi-dimensional layouts with a lot of item placement options.