CSS interview questions and Answers
Cascading Style Sheets (CSS) is a style sheet language or a mechanism used for enhancing its style by adding colors, fonts, and spacing to your web documents. We have a collection of CSS interview questions that helps in crack your interviews. It is designed to enable the separation of content for improving content accessibility and providing more flexibility in the specification of presentation and reducing complexity in the structural content. The specifications of CSS are maintained and managed by the W3C.
Most Frequently Asked CSS interview questions
It select and style a link when you mouse over it. An :hover is used to select elements when you mouse over them.
a:hover{
background-color: yellow;
}
It specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements like position:absolute, position:relative, or position:fixed.
visibility:hidden : Ithides an element, but it will still take up the same space as before. The element will be hidden, but still, affect the layout.
display:none : It hides an element as well as doesn't preserve the space.
The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.
Property of overflow is given below :-
- visible
- hidden
- auto
- scroll
overflow: scroll
div {
overflow: scroll;
}
overflow-x and overflow-y
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
CSS has various limitations as a programming language thats are as follows:
- CSS cannot perform any logical operations like if/else or for/while or +/-.
- We can not read any files using CSS.
- It can not interact with databases.
- CSS can not request a web page.
Both Postions(absolute & relative) are having different features. Once we set Position then you can able to use top, right, bottom, left attributes.
An absolute position element is positioned relative to the first parent element that has a position other than static.
Absolute : In case of position absolute, an element searches for the nearest available coordinate axes among its parent elements. The element is then positioned by specifying offsets from this co-ordinates axis. It removed from document normal flow.
Relative : In case of position relative, an element creates its own co-ordinates axes, at a location offset from the view port co-ordinate axis. It is Part of document flow but shifted.
Internal CSS are the ones that we can write within the same file i.e the HTML code and CSS code are placed in the same file.
External CSS are that we can write in a separate file than the html code i.e the HTML file is separate like(index.html) and CSS file is separate like(style.css).
nth-child(n) : It matches every element that is the nth child, regardless of type, of its parent.
ul:nth-child(3) {
background: red;
}
It is about making a website look good on all devices like desktops, tablets, and phones etc. In responsive HTML and CSS is automatically resize a website.
The !important css rule is used for overriding the previously assigned CSS declarations.
#sidebar {
font-size: 12px !important;
}
Latest Version : CSS version 4 was released in March 2017.
Advantages
- Saves time
- Pages load quickly
- Easy to maintain
- Superior styles in HTML
- Compatible with multiple devices
Development History
CSS was proposed by Hakon Wium Lie in October 1994. The first released was made public in December 1996.