Frequently asked - CSS3 Interview Questions and Answers - Part 01
1. Explain the CSS selectors.
There are class, id, element, attribute and pseudo selectors in CSS. The most common is class and id selectors.
Class selectors are grouped collection of CSS attributes applied to HTML. Class selectors are called by adding a ’.’ and then inserting the class name.
Ids are unique elements in the document and they are marked as '#' in the CSS.
2. What is Pseudo selectors? What are they used for?
Pseudo classes are similar to classes, but are not explicitly defined in the markup, and are used to add additional effects to selected HTML elements such as link colors, hover actions, etc.
Pseudo classes are defined by first listing the selector, followed by a colon and then pseudo-class element. E.g., a:link{ color: blue }, or a:visited { color: red }
3. What are all the ways to apply CSS rules to a web page?
There are totally three ways:
- Inline - It is by adding style attribute in the HTML element and then adds the rules. Though it is easy, it is not a best practice.
- Inline/Internal - Adding the
<style>element in the document, preferably in the head, and then place our rules. - External/Linked - CSS rules are placed in .css file and then using
<link>element link the CSS files in the document
4. What is a Child selector?
Child selectors are another way to group and style a set of elements that descend from a parent element.
Child selectors contains > in between the parent and child.
5. What is float property in CSS?
In float, CSS allow an element to be positioned horizontally, allowing elements below the floated element to flow around it. Several floating elements can be placed together to make a gallery type layout.
Floats can only accept a left or right value.
To prevent subsequent elements from flowing around the floated element, apply the clear property, followed by the side you wish to disable or both for all sides.
6. What is CSS Box model and its uses?
CSS box model is made up of margins, borders, padding, and content. Box model provides a structured way to space elements in relationship to each other.
7. Is there a way to restore the default property value using CSS?
This is not an easy way to restore the default property. But we can use inherit value, which will restore it to the default.
8. What is inline, inline-block and block? How they are different from each other?
A block element is an element that takes up the full width available, and has a line break before and after it. <h1>, <p>, * , and <div> are all examples of block elements.
An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <span> are examples of inline elements.
Inline-block is similar to inline, but it can take height, width or margin values.
9. What is the purpose of the z-index and how is it used?
The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number.
An element with a higher z-index is always stacked above one with a lower index.
10 Explain the difference between visibility: hidden and display: none
visibility: hidden simply hides the element, while it will still take up space and affect the layout of the document.
display: none also hides the element, but will not take up space and the page will appear as if the element is not present.
11. What are some of the new features and properties in CSS3?
- Box model
- Rounded corners
- Box shadows, text shadows
- Transform property
- New Web fonts
- New Color schemes (RGBA)
- Multi-column layout
- New Gradients and New Pseudo-classes
- Border Images
12. What are the uses of CSS preprocessors?
Ability to use nested syntax, define variables and mixins, use of mathematical and operational functions, and the ability to join multiple files into a single one.
The widely used CSS preprocessors are less and sass.”
13. Can you write conditional CSS rules, like specific to IE version?
Yes, we can.
<!--[if IE 7]> our styles <![endif]-->
This will run only in IE 7 and will not affect other versions or browser. We can also use \ in CSS rule to apply the version number we are targeting, like color: red\9;.”
14. How can you apply a CSS rule to all elements?
We can use * selector to apply a rule globally for all the elements. Though it is not a good idea, we can use it for resetting margin or padding.
15. How can you center a div element in a page?
We can center an element by applying margin-left and margin-right to auto.
16. What are all the values of position attribute in CSS?
Possible position values are static, relative, absolute, fixed, inherit, initial.
17. What is the difference between all the positions?
Absolute positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element. An absolutely positioned element will therefore overlap other content unless you take action to prevent it. They will positioned according to the parent element which has position: relative. If an absolutely positioned element has no positioned ancestor, then the html element will be considered.
Fixed positioning is really just a specialized form of absolute positioning; elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element; even if the page is scrolled, they stay in exactly the same position inside the browser window.
Static and relative elements are closely related. By setting position: relative for an element you make it the containing block for any absolutely positioned descendant (child elements), whether they appear immediately below the relatively positioned element in the hierarchy, or further down the hierarchy.
18. What is Flexible Box Layout in CSS3? Or, Explain Flex in CSS3.?
Flex layout is superficially similar to block layout. It is a simple and powerful tool for distributing space and aligning content in ways that web apps and complex web pages often need. With flex, we can easily arrange the elements in rows or columns easily.
19. What is CSS3 Transitions? What are all the transitions you have used?
Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Only animatable CSS properties can be transitioned like, opacity, background-color, border, width, height and color. We can use transition-timing-function like ease-in, ease-out, linear for describing the animation speed over time.
20. What is CSS3 animations? Have you ever used it?
Like CSS3 transitions which are used for simple animations, we have animation in CSS3 which has more control over the property changes like start and end states of the animation.
To animate an element, the CSS changes should be defined in @keyframes. Unlike transitions, we can animate many CSS properties in animations.
We can use ‘from’ and ‘to’ or percentage values to describe what should happen at the given time period.