Hey, welcome to DesignWithRehana. In this article I am going to share some important CSS Interview Questions and Answers with you, which will help you to crack your interview. These questions are the most asked CSS interview questions.
And I’m sharing these questions and answers with you so that you can prepare these questions and if these questions asked in your interview then it will be helpful.
And here in this article you will also get the answers of these CSS Interview Questions. I hope this article will be helpful for you. And also don’t forget to Download FREE PDF of CSS Interview Questions and Answers.
Now let’s start CSS Interview Questions and Answers.
1. Name different ways to position some aspects in CSS
In CSS there are five different type of position available. And the of these position property are fixed, static, absolute, sticky and relative. And you can use these property to set the position of HTML elements using CSS.
2. How is a CSS selector used?
CSS selectors are used to target the HTML element on which we want to add style. In CSS there are different type of selectors. And these CSS selectors are class selector, id selector, element selector, type selector, pseudo selector, etc.
3. What are the properties of flexbox?
CSS flexbox contains various properties and some CSS flexbox properties are flex-direction, flex-wrap, flex-flow, flex-content, and align-items and more. These CSS properties are mainly to make the responsive layout of a webpage or a website.
4. What is common between class and ID?
class and ID are used in HTML elements to assign a value from CSS. These are CSS selectors. And the common these is that these are used to target the HTML element in CSS for styling.
5. Differentiate between logical and physical tags.
i). In HTML logical tags are used to provide information by giving the special importance to the text.
- Example of HTML logical tags are <em>, <strong>, etc.
ii). In HTML physical tags are used to style the content only.
- Example of HTML physical tags are <i>, <b>, etc.
6. Explain the term Responsive web design.
Responsive design is a way of creating web pages that includes flexible layouts, flexible images, and cascading style sheet media queries. The purpose of responsive design is to create web pages that recognize the size and orientation of the user’s screen and adjust the layout accordingly.
Responsive web design of any website can adapt it’s layout on different devices based on their screen.
7. What is CSS specificity?
In CSS, if there are two or more CSS rules that point to the same element, the selector who has the highest specificity value will be applied to that HTML element and “win”. It means the highest specificity styling will be applied on the HTML element.
8. What is CSS opacity?
CSS opacity-level describes the transparency-level of an element. If a HTML element contains 1 opacity value, then it will be fully visible to the user and if opacity value is 0.5 will be 50% see-through, and if the opacity value is 0 then the HTML element will be completely transparent.
Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well.
9. What is the difference between padding and margin?
Margin: Margin is the outer space of an element. The margin is applied outside of the element’s border. We can set margin on the HTML element top, right, bottom and left side. It means it will create some some around the HTML element if we add any margin on the HTML element.
Padding: Padding is the inner space of an element. The padding is applied inside of the element’s border. And it generates space inside the element. We can also add padding on the HTML element top, right, bottom and left.
10. What is meant by a universal selector?
In CSS, the asterisk (*) is known as the CSS universal selectors. It can be used to select all types of elements in an HTML page. This CSS selector is mainly used to reset the default CSS.
For example:
* {property: value;}
11. What is the float property of CSS?
In CSS, the float property specifies whether an element should float. It specify that the element should be float on the left, right, or not at all. And Absolute positioned elements ignore the float property!
Note: It is best practice to always use clear property.
12. What is the difference between visibility: hidden and display: none?
visibility: hidden- In the visibility:hidden; property the content will not be visible to the user but it will takes up its original space.
whereas,
display: none- In display:none; property the content will hidden and the hidden area will not take any space.
13. What are the external style sheets?
An external style sheet is different/separate CSS file with .css extension. This stylesheet can be accessed by creating a link within the head section of the HTML document. This style sheet is mainly used when we are working on a big project. Because it help us to maintain multiple file easily.
14. How case-sensitive is CSS?
CSS is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be. The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.
15. Is it possible to add multiple declaration in CSS?
Yes, it is possible to add multiple declaration in CSS. The declaration block contains one or more declarations separated by semicolons. And each declaration includes a CSS property name and a value, which is separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
16. What are the different font attributes available in CSS?
Here is the list of different font attributes available in CSS
- font-family: This property is used to add font family on the HTML element.
- font-size: This property is used to add font size of the HTML element.
- font-stretch: The font-stretch property allows you to make text narrower or wider.
- font-style: This property is used to add font style on the HTML element.
- font-weight: This CSS property is used to set the font weight.
- font-variant: This property is used to specify whether or not a text should be displayed in a small-caps font.
- line-height: This CSS property is used to set the line-height on the HTML element.
17. What are pseudo-elements?
CSS pseudo-elements are used to style specified parts of an HTML element.
For example, pseudo-elements can be used to:
- Style the first letter or line of an element.
- Insert content before or after the content of an element.