CSS or Cascading Style Sheets is a design language for defining the look and formatting of web pages. Many businesses today use CSS to add styling such as fonts, colors, or layouts to their websites, making them more aesthetically pleasing.
Q1. 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.
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 reset and normalize CSS? How do they differ?
Ans:The following points distinguish rest and normalize CSS:
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.
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 |
| 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. 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
Q20. 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
}Q21. 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;
Q23. 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.
Q24. 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.
Q25.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:
@import notation, used with CSS Interview Questions for Intermediate – 5 years of experience
Q26. 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.
Q27. 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.
F
In CSS, you can apply the same style to multiple elements by separating them with a comma. Here is your example with a bit more context:
h2, h3 {color: blue;}Copy codeIn this example, by adding a comma; both h2 and h3 elements will be styled with the color blue. You can add more properties inside the curly braces {} to apply additional styles to these elements.
Q28. 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.
Q29. 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.
Q30. 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; }Copy codeQ32. 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.
