1. What are the CSS frameworks?
CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are: –
Bootstrap
Foundation
Semantic UI
Gumby
Ulkit
2. What are the several forms of CSS?
Ascending by selectors is not possible
Limitations of vertical control
No expressions
No column declaration
Pseudo-class not controlled by dynamic behavior
Rules, styles, targeting specific text not possible
3. What is a CSS selector?
It is a string that identifies the elements to which a particular declaration apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. There are several different types of selectors in CSS: –
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
4. What is the difference between inline, inline-block, and block?
Block Element: The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are <div>, <p>.
Inline Elements: Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <span> , <strong>, and <img> tags.
Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins and set height and width values.
5. What is a Pseudo element? What is pseudo-class?
Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.
:link
:visited
:hover
:active
:focus
Example of the pseudo-class, In the below example, the color applies to the anchor tag when it’s hovered.
/* mouse over link */
a:hover {
color: #FFOOFF;
}A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ::after.
::before
::after
::first-letter
::first-line
::selection
In the below example, the color will appear only on the first line of the paragraph.
p: :first-line {
color: #ffOOOO;
font-variant: small-caps;
}
6. What is the CSS Box model and what are its elements?
The CSS box model is used to define the design and layout of elements of CSS.
The elements are:
Margin – It removes the area around the border. It is transparent.
Border – It represents the area around the padding
Padding – It removes the area around the content. It is transparent.
Content – It represents the content like text, images, etc.
7. What is the purpose of the z-index and how is it used?
The z-index helps to 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 than a lower index.
Z-Index can take the following values:
Auto: Sets the stack order equal to its parents.
Number: Orders the stack order.
Initial: Sets this property to its default value (0).
Inherit: Inherits this property from its parent element.
8. 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 and laptop. You don’t need to create a different page for each device.
9. Compare Grouping and Nesting in CSS?
Grouping: In grouping, the code can be reduced by literally grouping selectors that have the same properties or values.
Nesting: In nesting, a selector is specified within another selector.
10. What is float property?
Using float property, an image can be moved along with the text to the right or to the left. Applying this property does not change the properties of the elements it is applied to.
11. What is the difference between class selectors and id selectors?
An overall block is given to class selector while id selectors take only a single element differing from other elements.
CSS Class Selector
<style>
.center {
text-align: center;
color: blue;
}
</style>
CSS Id Selector
<style>
#para1 {
text-align: center;
color: blue;
}
</style>12. Different Box Sizing Property?
The box-sizing CSS property sets how the total width and height of an element are calculated.
Content-box: The default width and height values apply to the element’s content only. The padding and border are added to the outside of the box.
Padding-box: Width and height values apply to the element’s content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.
Border-box: Width and height values apply to the content, padding, and border.
13. What does the :root pseudo-class refer to?
The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 specification.
14. How does Calc work?
The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element’s width, we can use calc() to specify that the width is the result of the addition of two or more numeric values.
.foo {
Width: calc(100px + 50px)
}