Q1. What is CSS?

Ans. CSS or Cascading Style Sheet is a styling language that is used with HTML to make web pages presentable. It is an important part of web development. CSS describes the visual structure and aesthetics of web documents. It defines how HTML elements should be displayed on the screen, paper, or in other media. It allows developers to choose the text color, font styles, spacing between paragraphs, background images or colors are used, layout designs, and more.

Q2. What are the advantages of CSS?

Ans. CSS plays a crucial role in the overall presentation of a web page. The advantages of CSS are as follows:

• Faster page speed
• Easy to maintain
• Saves time
• Device Compatibility
• Enhanced user experience
• Numerous formatting options
• Lightweight code
• Great accessibility

Q3. What are the disadvantages of CSS?

Ans. The disadvantages of CSS are as follows:

• Different levels: CSS is available in different levels – CSS, CSS 1 up to CSS3. This creates confusion among beginner-level developers.
• Fragmentation: While using CSS, what works well on one browser may not work with another. Due to this, web developers need to test for compatibility. They need to run the program across multiple browsers before a website is made live.
• Security Challenges: There is no in-built security in CSS to protect it from being overridden. Anyone with read or write access to a website can change the CSS file.

Q4. List the components of a CSS Style?

Ans.  CSS Style is composed of the following elements:

• Selector: It is an HTML tag at which a style will be applied.
• Property: It is a type of attribute of HTML tag.
• Value: These are assigned to properties.

Q5. What is the difference between CSS and CSS3?

Ans. CSS provides styling to web pages. It allows users to select color, layout, font, background, and more. CSS3 is short for Cascading Style Sheet level 3. It is an advanced version of CSS. It allows users to add structure, style, and format to web pages. CSS3 offers a variety of new features including the feature that splits the CSS standards into separate modules that are easier to use.

Q6. What is the difference between HTML and CSS?

Ans. HTML or HyperText Markup Language is a markup language that allows you to develop web documents, websites, and web applications. It describes the content and structure of the web pages, for example, the placement of a navigation bar. On the other hand, CSS describes the stylistic properties of a website such as colors, fonts, and page layouts.

HTML and CSS are the two fundamental technologies for building web pages. While HTML offers the functional framework, CSS is responsible for providing the aesthetic elements to a web document. CSS interacts with HTML to add style elements.

Q7. Explain Grouping and Nesting in CSS.

Ans. Grouping allows you to give the same properties to different selectors without repeating them. It reduces the code by grouping selectors that have the same properties or values. To group them, separate them with a comma, and the same properties will get applied to them all. Nesting allows you to have elements nested inside other elements.

Q8. What is the use of the CSS Box Model?

Ans. The CSS Box model is used to create the design and layout of web documents. It is a box that contains multiple properties including content, padding, border, and margin. It allows us to add a border all around elements and define space between elements.

Q9. How to integrate CSS on a web page?

Ans. There are three ways to integrate CSS on a web page:

• Inline: To add CSS rules to an HTML element (tag)
• Embedded: To add a unique style to a single document.
• Linked/Imported/External: To make changes on multiple pages of the website.

Q10. What are the CSS frameworks?

Ans. A CSS framework is a library consisting of several CSS stylesheets ready for use by web developers and web designers. It helps create user-friendly and browser-compatible web pages. One of the advantages of using the CSS framework is that it saves time, as you developers don’t need to begin from scratch. Some of the popular CSS frameworks include:

• Bootstrap
• Bulma
• Foundation
• Tailwind CSS
• Milligram
• Semantic UI
• Gumby
• Ulkit
• Materialize

Q11. Explain Embedded Style Sheet.

Ans. An Embedded style sheet lets you define styles for the whole HTML document in one place. You can embed style sheet information into an HTML document using the <style> element. This is done by embedding the style sheet information within <style></style> tags in the head of the document.

Q12. What are CSS Pseudo-elements and Pseudo-classes?

Ans. CSS pseudo-elements allow you to add special effects to some selectors. They are keywords that are added to a selector to style a certain part of the selected element.

Example

To change the font of the first line of a paragraph, we can use ::first-line

Syntax of CSS Pseudo-elements

selector::pseudo-element {   property: value; }

Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.

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

For example in the pseudo-class, the color applies to the anchor tag when it’s hovered.

Q13. What are the different Media types in CSS?

Ans. Below are the various media types that are used for different types of devices such as handheld devices, printers, and computer screens.

Media Type	Description
all	for all media type devices
braille	for braille tactile feedback devices
print	used for printers
aural	for sound synthesizers and speech
projection	projects on projectors
handheld	for handheld devices
screen	color computer screens
tv	for television type devices

Q14. How to define the dimension of an element?

Ans. The below CSS properties are used to define the dimension of an element:

Property	Description
Height	to set the height
Width	to set the width
Max-height	to set a maximum height
Max-width	to set the maximum width
Min-height	to set the minimum height
Min-width	to set the minimum width

Q15. Define a CSS preprocessor.

Ans. A CSS preprocessor is a tool that is used for extending the basic functionality of default vanilla CSS through its scripting language. It helps us in using complex logical syntaxes such as functions, mixins, variables, code nesting and inheritance. These preprocessors compile the code that is written through a special compile. It is then used for creating a CSS file that can be referenced by the main HTML document.

Q16. What are the different types of Selectors in CSS?

Ans. A CSS selector is used to select the HTML elements you want to style. Below are the different types of selectors in CSS:

1. Element Selector: The element selector selects HTML elements based on the element name or tag. It matches one or more HTML elements of the same name.

Example

h2 {   color: blue; }

2. ID Selector: The ID selector uses the ID attribute of an HTML element to select a specific element. It matches any HTML element that has an ID attribute with the same value as that of the selector.

Example

#my-id {   color: blue; }

3. Universal Selector: The universal selector selects all the elements in an HTML document.

Example

* {   color: blue; }

4. Group Selector: It styles all comma-separated elements with the same style.

5. Attribute Selector: Using the attribute selector, the HTML elements can be styled based on the presence of an attribute.

6. Class Selector: The class selector also matches HTML elements with a specific class attribute. It matches the elements that have their class attribute the same as that of the class.

Example

.a-class {   color: blue; }

Q17. Define SASS.

Ans. Syntactically Awesome Style Sheets (SASS) is a preprocessor scripting language that is compiled into Cascading Style Sheets (CSS). Sass consists of two syntaxes. The indented syntax is the original uses a syntax similar to Haml. It uses indentation for separating code blocks and newline characters to separate rules. SCSS is the newer syntax that uses block formatting like that of CSS. It uses braces for denoting code blocks and semicolons to separate rules within the block. The two syntaxes are traditionally given the extensions of ‘.sass’ and ‘.scss’.

Q18. What is viewport height/viewport width in CSS?

Ans. It is a CSS unit that is used for measuring the height and width in percentage w.r.t. the viewport. It is mainly used in responsive design techniques. The measure VH is 1/100 of the height of the viewport. If the height of browser is equal to 1000px, 1vh is  10px. and if the width is 1000px, 1 vw is 10px.

Q19: What is the difference between reset and normalize CSS? How do they differ?

Ans: Reset CSS: CSS resets focus on removing all built-in browser styling. For instance: margins, paddings, and font sizes of all elements are reset as the same. 

Normalize CSS: Normalize CSS focus on making built-in browser styling consistent across all browsers. Moreover, it also corrects bugs for common browser dependencies.

Q20. Why should we use the float property in CSS?

Ans: The float property is utilized for positioning the HTML elements horizontally, either towards the left or right of the container. For instance,

 float-demo {

     float: right; 

}

Here, the element to which the class gets applied makes sure that the element position is on the right of the container. If you specify the float value as left, then the element will be placed on the left side of the container.

CSS Scenario-Based Questions

Q1. Consider a scenario where you want to center block elements. How can one achieve this using CSS1?

Ans.

Block elements can be centered using the following properties:

margin-left and margin-right

body {
width: 30em;
background: gray;
}
p{
width: 20em;
margin-right: auto;
margin-left: auto
}

Q2. In the given picture below right sidebar has fallen down. Suggest a way to fix this.

Ans:

The reason for this issue is that the columns are not equal to 100% width due to some padding, so the most appropriate way to fix this issue is to use the box-sizing property i.e. use : box-sizing:border-box;

Q3. Explain what’s going on in the below CSS selector.

Ans:

This chooses any direct child of any element with the role attribute “navigation” that has an unordered list as a descendant and is not an email link.

Q4. Should one use !important with CSS properties?

Ans

While struggling with specificity to override a style, you may be forced to add !important to your style to work for you but be careful while using it. What this will do is that it will make a particular style with the highest specificity and no other style can override it unless it is defined as !important again.

Q5.Why is importing a file an easy way to insert it?

Ans.

Combining external sheets into several sheets is made possible by importing. Different sheets and files can be utilized for various purposes.

Syntax:

CSS Interview Questions for Intermediate – 5 years of experience

Q1. What is the use of the z-index?

Ans:

An element’s stack order is indicated by the z-index property. An element with a higher stack order will always be in front of a lower stack order element. It only works with the elements defined with position properties(position: relative, absolute, sticky, or fixed) and flex property. Z-index specifies the following values: auto, number, inherit, or initial.

Q2. How can you style both h3 and h2 the same way?

Ans:

Multiple elements can be addressed with the same style by using a comma between them.

For example: h2,h3{color: blue;}

Q3. When does DOM reflow take place?

Ans:

The web browser mechanism known as “reflow” recalculates the locations and geometries of document elements to redraw all or a portion of the document again. Below mentioned points tell us when DOM reflow occurs:

• When content is modified on a web page.
• Moving or animating the DOM element.
• Whenever updating, insertion, or deletion of an element occurs in DOM then also reflow mechanism happens.
• While changing a CSS style.

Q4. Explain CSS position property.

Ans: The position attribute describes the kind of positioning technique that is applied to an element. Different position values are:

• Relative: The element is positioned relative to its default position using the relative positioning property.
• Absolute: An element is positioned relative to the first parent element that has a position other than static using absolute positioning. In the absence of such an element, HTML is used as the containing block. You can position an element on a page anywhere using absolute positioning.
• Fixed: To fix the text on the browser, use the fixed positioning feature. Although the browser window can be scrolled, this fixed test remains in place relative to it.
• Static: HTML elements are always in this place by default. It always places an element in accordance with the page’s natural flow. The properties top, bottom, left, and right does not affect it.

Q5. How may CSS be used to limit image repetition?

Ans:  To control the image using CSS one should use the background-repeat property.

 img{
 background-repeat:none;
 }

Q6. Why is responsive web design used?

Ans:

Using adaptable graphics, flexible layouts, and CSS media queries, responsive design is a method of creating web pages. With the help of this design strategy, web pages will be created that can recognize users’ screen sizes and orientations and adjust the layout accordingly.

Q7. What is Tweening?

Ans: Tweening is the act of creating transitional frames between two images to observe how the first image changes as the second one appears.

Q8. How do you define image sprites in relation to CSS?

Ans: Image sprites are created when several images are combined into a single image. Using image sprites reduces the amount of time it takes to load each picture on a webpage, providing information more quickly.

Q9. Is testing the website across several browsers necessary?

Ans: When you create a website for the first time and make modifications to it, it is undoubtedly the most vital step to test it across different browsers. Due to the frequent updates that browsers receive, testing your website routinely in various browsers can assist you to ensure that every webpage is compatible with it.

Q10. How do visibility: hidden and display: none differ from one another?

Ans. The difference between the former and the latter is that with the former, the elements are disguised but not removed. No extra space is needed. In the latter scenario, the feature is concealed and the layout is altered—some additional space is required.

Example:

Output:

Output:

Q11. Is testing the website across several browsers necessary?

Ans. When you create a website for the first time and make modifications to it, it is undoubtedly the most vital step to test it across different browsers. Due to the frequent updates that browsers receive, testing your website routinely in various browsers can assist you to ensure that every webpage is compatible with it.

CSS Interview Questions for Advance – 10 years of experience

Q1. When is it preferable to use translate () over absolute positioning?

Ans:

A CSS transform value is called translate. There is no browser reflow or repaint when the opacity or transform is changed. For items to be transformed, the browser must establish a GPU layer; however, using the CPU modifies the absolute positioning attributes. Shorter paint times are obtained by using translate (). Unlike when adjusting absolute positioning, an element occupies its original space while using translate ().

Q2. How can you tell if a browser supports a particular feature?

Ans:

To check if the current browser supports a specific feature, you can use the @support property in CSS.

Q3. What can be done to make the website print-friendly?

Ans:

Identify and manage the website’s “content areas.” In addition to the primary content area, websites typically have a footer, header, sidebar, and navbar. Controlling the content area allows for the majority of the effort. So, use page breaks, make a stylesheet specifically for printing, resize your page for printing, and steer clear of needless HTML tables to dominate print media while maintaining the integrity of your website.

Q4. What do you mean by Accessibility (a11y)?

Ans: The term “accessibility” describes how a system’s software and hardware configurations are made to be usable by people with disabilities, such as low dexterity, hearing loss, or vision impairment. Text-to-speech features, for instance, might be available on a website that was created with accessibility in mind. Accessibility compliance is required for public websites in the USA. It is specified in the 508 compliance. It provides recommendations and best practices for all website visitors that should be adhered to in regard to accessibility’s most important areas.

Q5. Under the hood of the browser, how does CSS actually function?

Ans: A browser must merge the content of a document with its stylistic information before displaying it. The document is processed in two steps:

• HTML and CSS are transformed into the DOM(Document Object Model) by the browser. In the memory of the computer, the document is represented by the DOM. It blends the style and content of the document.
• The DOM’s contents are shown by the browser.

Q6. What must be done in order for section and category heading values to be automatically numbered?

Ans: The idea of CSS counters can be applied. This enables us to modify the content’s look according to its position within a document. When using this, we must first set the counter-reset property’s starting value, which is 0 by default. The value of the same property can also be changed to any required number. The counter’s value can be increased or decreased after startup by utilizing the counter-increment attribute. CSS terms like “none,” “initial,” “inherit,” etc. are not permitted in the name of the counter. The declaration would not be taken into consideration if the CSS keywords were utilized.

Q7. How does CSS3 define opacity?

Ans: The degree of transparency or opacity of the content is referred to as its opacity. The opacity attribute, which accepts values between 0 and 1, can be used. A value of 0 indicates that an element is entirely transparent, while a value of 1 indicates that the element is entirely opaque. The opacity property can be applied as follows:

Output:

Q8. What do you mean by graceful degradation?

Ans:  If the component breaks, a graceful degradation will be present and it will still function effectively. A webpage is created using the most recent browser version. Since it is not accessible to everyone, it has a fundamental function that makes it usable by a larger group of people. If the image cannot be viewed, text from the alt tag is shown.

Therefore, graceful degradation refers to the practice of designing your website’s functionality so that it offers a particular degree of user experience in more recent browsers but gently degrades to a lesser level in older browsers.

Q9. Define mixins.

Ans. Making sets of CSS declarations that you want to reuse across your website is possible with a mixin. It maintains a fairly DRY(don’t repeat yourself) Sass. For greater flexibility, you may even pass values to your mixin.

SCSS code:

Equivalent CSS code 

Q10. When is it preferable to use translate () over absolute positioning?

Ans.  A CSS transform value is called translate. There is no browser reflow or repaint when the opacity or transform is changed. For items to be transformed, the browser must establish a GPU layer; however, using the CPU modifies the absolute positioning attributes. Shorter paint times are obtained by using translate (). Unlike when adjusting absolute positioning, an element occupies its original space while using translate ().

Q11. How can you tell if a browser supports a particular feature?

Ans. To check if the current browser supports a specific feature, you can use the @support property in CSS.

Q12. What can be done to make the website print-friendly?

Ans. Identify and manage the website’s “content areas.” In addition to the primary content area, websites typically have a footer, header, sidebar, and navbar. Controlling the content area allows for the majority of the effort. So, use page breaks, make a stylesheet specifically for printing, resize your page for printing, and steer clear of needless HTML tables to dominate print media while maintaining the integrity of your website.

Q13. What do you mean by Accessibility (a11y)?

Ans. The term “accessibility” describes how a system’s software and hardware configurations are made to be usable by people with disabilities, such as low dexterity, hearing loss, or vision impairment. Text-to-speech features, for instance, might be available on a website that was created with accessibility in mind. Accessibility compliance is required for public websites in the USA. It is specified in the 508 compliance. It provides recommendations and best practices for all website visitors that should be adhered to in regard to accessibility’s most important areas.

Q14. Under the hood of the browser, how does CSS actually function?

Ans. A browser must merge the content of a document with its stylistic information before displaying it. The document is processed in two steps:

• HTML and CSS are transformed into the DOM(Document Object Model) by the browser. In the memory of the computer, the document is represented by the DOM. It blends the style and content of the document.
• The DOM’s contents are shown by the browser.

Q15. How does calc() work?

Ans. We can conduct mathematical calculations on property values using the CSS3 calc() feature. We can use calc() to declare, for instance, that an element’s width is the result of the addition of two or more numerical values rather than stating static pixel values for that width.

Output:

Q16. What must be done in order for section and category heading values to be automatically numbered?

Ans. The idea of CSS counters can be applied. This enables us to modify the content’s look according to its position within a document. When using this, we must first set the counter-reset property’s starting value, which is 0 by default. The value of the same property can also be changed to any required number. The counter’s value can be increased or decreased after startup by utilizing the counter-increment attribute. CSS terms like “none,” “initial,” “inherit,” etc. are not permitted in the name of the counter. The declaration would not be taken into consideration if the CSS keywords were utilized.

Q17. How does CSS3 define opacity?

Ans. The degree of transparency or opacity of the content is referred to as its opacity. The opacity attribute, which accepts values between 0 and 1, can be used. A value of 0 indicates that an element is entirely transparent, while a value of 1 indicates that the element is entirely opaque. The opacity property can be applied as follows:

Output:

Q18. What do you mean by graceful degradation?

Ans. If the component breaks, a graceful degradation will be present and it will still function effectively. A webpage is created using the most recent browser version. Since it is not accessible to everyone, it has a fundamental function that makes it usable by a larger group of people. If the image cannot be viewed, text from the alt tag is shown. Therefore, graceful degradation refers to the practice of designing your website’s functionality so that it offers a particular degree of user experience in more recent browsers but gently degrades to a lesser level in older browsers.