Frequently asked - CSS3 Interview Questions and Answers - Part 02
21. What are all the units we can use in CSS3?
We can use px, pt, cm, em, rem, in, vmin, and vmax.
The most common are px, pt, em and rem.
22. What is the difference between em and rem?
em unit is equal to the computed size for the element in which the em is applied. For example, if the font-size of the parent is applied to 16px and a child has 1.2em then it is equal to 20% greater than the computed value of 16px which is 19.2px.
rem is equal to the computed value of font-size on the root-element rather than the parent.
23. What is Media Query and why it is used?
A media query is a logical expression that is either true or false. It is true if the type of media the user has, matches the expression.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.
We can use width, height, screen, print and orientation in the expression to match the certain media and then apply the custom rules for that.
Some media types are All, Screen, and Print.
Media Query plays a crucial role in Responsive Web Design. Example:
@media all and (min-width:500px) {
Our custom rules.
}
We can also use the media condition in link element also.
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
24. Which are the new backgrounds are added in CSS3?
Below are the new background properties are added in CSS3
- background-origin
- background-clip
- background-size
25. What are the types of gradients in CSS3?
Below are the new gradient properties are added in CSS3
- Radial gradients
- Linear gradients
26. What would be the difference between width: auto and width: 100% in CSS?
width: auto reaches to the full width and it will subtract borders, paddings, margins etc. from the available space where as width: 100% will force the element to be as wide as its parent element and will add additional spacing which can cause some problems.
27. What is @import rule in CSS3?
The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules.
@import cannot be used inside conditional group at-rules. Example:
@import url("fineprint.css") print;
@import url("fonts.css");
28. What is the option to place the paragraphs next to each other using CSS?
Below is the sample code for aligning the paragraphs next to each other –
<div style="float: left; width: 50%">Paragraph 1</div>
<div style="float: left; width: 50%">Paragraph 2</div>
29. What benefits and demerits do External Style Sheets have?
Benefits:
- One file can be used to control multiple documents having different styles.
- Multiple HTML elements can have many documents, which can have classes.
- To group styles in composite situations, methods as selector and grouping are used.
Demerits:
- Extra download is needed to import documents having style information.
- To render the document, the external style sheet should be loaded.
- Not practical for small style definitions.
30. Why is it easy to insert a file by importing it?
Importing enables combining external sheets to be inserted in many sheets. Different files and sheets can be used to have different functions. Syntax:
@import notation, used with <style> tag.
31. Enlist the various Media types used?
Different media has different properties as they are case insensitive.
They are:
- Aural – for sound synthesizers and speech
- Print – gives a preview of the content when printed
- Projection - projects the CSS on projectors.
- Handheld - uses handheld devices.
- Screen - computers and laptop screens.
32. What is contextual selector?
Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors. Only the last element of the pattern is addressed in this kind of selector. For e.g.: td p span { color: blue; }.
33. Why is @import only at the top?
@import is preferred only at the top, to avoid any overriding rules. Generally, ranking order is followed in most programming languages such as Java, Modula, etc. In C, the # is a prominent example of a @import being at the top.
34. What is RWD?
RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device. For example: Mobile, Tablet, desktop, laptop etc. You don’t need to create a different page for each device.
35. What are the benefits of CSS sprites?
If a web page has large no. of images that takes a longer time to load because each image separately sends out an http request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of http requests and hence the loading time.
36. What is tweening?
It is the process of generating intermediate frames between two images. It gives the impression that the first image has smoothly evolved into the second one. It is an important method used in all types of animations. In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can be used to achieve tweening.
37. List out the new texts added in CSS3?
Below are the lists of texts added in CSS3
- Word-wrap
- Text-overflow
- Word- break
38. What is the difference between “cell-padding” and “cell-spacing”?
“cell-Padding” – This used to leave the space between the content of cell and wall/border of the cell.
“Cell-Spacing” – This used to specify the space between the cells.
39. What is the difference between overflow-x: scroll and overflow-x: auto in CSS?
Overflow-x: auto in CSS properly will only show a scrollbar when any content go beyond screens width, however overflow-x: scroll will force any screen to always show the scrollbar even if all content fits in.
40 What’s the difference between “resetting” and “normalizing” CSS?
Resetting - Browser uses it’s internal (build-in) CSS for some HTML element like margin, padding, list-style, font-size etc. In order to make HTML page from scratch you need to override these styles.
Normalizing - Normalize CSS means “What You Write is What You See/Get” across all browsers. e.g. If you write CSS for h1, h2, h3, h4 like font-size: "14px", font-weight: 600. then all h1, h2, h3, h4 will look same across all browsers.
41. Is there any possible to add multiple background images?
Yes, it is possible in CSS3.
You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
42. What is difference between nth-of-type and nth-child?
The :nth-child() and :nth-of-type() pseudo-classes allows you to select elements with a formula.
The :nth-child(n) selects nth child of the parent whereas nth-of-type considers element of the given type (<div> in the example).