Top CSS Interview Questions

1) What are different CSS selectors ?
-> A CSS selector is the part of a CSS rule set that actually selects the content you want to style.

Universal Selector
-> The Universal Selector works like a wild card character, selecting all elements on a page.

-> The three lines of code inside curly braces (color, font-size and line-height) will apply to all elements on the HTML page.
-> The universal selector  is declared using an asterisk.

Element Type Selector
-> 
The Element Type Selector must match one or more HTML elements of the same name

ID Selector
-> An ID selector is declared using a hash or pound symbol (#) preceding a string of characters. This selector matches any HTML element that has an ID attribute with the same value as that of the selector.

Class Selector
-> The class selector is declared with a dot preceding a string of one or more characters. The class selector also matches all elements on the page that have their class attribute set to the same value as the class.

Descendant Combinator
-> The descendant selector or descendant combinator lets you combine two or more selectors so that a specific element can be selected.

-> If we apply the CSS in the previous example to this section of HTML, the only element that’ll be affected by those styles is the first <div> element that has a class of box. The <div> element that has a class of box-2 won’t be affected by the styles. Similarly, the second <div> element with a class of box won’t be affected because it’s not inside an element with an ID of container.

Child Combinator
-> A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.

-> This is the same code from the descendant combinator, but instead of a space character a greater than symbol (or right angle bracket) is used.

General Sibling Combinator
-> A selector that uses a general sibling combinator matches elements based on sibling relationships. i.e. the selected elements are beside each other in the HTML.

-> In this example the styles will apply only to the first three paragraph elements. The last paragraph is not a sibling of the <h2> element because it its inside the <div> element.

Adjacent Sibling Combinator
-> A selector that uses the adjacent sibling combinator uses the plus symbol (+) and the targeted element must be an immediate sibling, not just a general sibling.

-> the styles will apply only to the second, third, and fifth paragraphs in this section of HTML.

Attribute Selector
-> The attribute selector targets elements based on the presence  and/or value of HTML attributes and is declared using square brackets.

-> The first input will match, but the second won’t match.

-> This will match all input elements with an attribute of type, regardless of the value.

Pseudo-class
-> A pseudo-class uses a colon character to identify a pseudo-state that an element might be in.

-> In this case the pseudo-class portion of the selector is the :hover part. This means that when the user hovers their mouse over the anchor element, the color property for that element will change to red. This type of pseudo-class is a dynamic pseudo-class, because it occurs only in response to user interaction—in this case, the mouse moving over the targeted element.

Pseudo-element

2) Explain Flexbox  layout ?

-> The Flexbox layout officially called CSS Flexible Box Layout Module is  new layout module in CSS3 to improve the items align, directions and order in the container even when they are with dynamic or even unknown size.
-> The flex layout is constituted of parent container referred as flex container and its immediate children which are called flex items.

->Flex is a set of rules for automatically stretching multiple columns and rows of content across parent container.

Main-Axis and Cross-Axis
-> Flex has two coordinate axis. The horizontal axis is referred to as Main-Axis  and the vertical axis is the Cross-Axis.
Flex-direction and Flex-wrap
-> Determines how the rows and columns are distributed inside the parent element.

Leave a Reply

Your email address will not be published. Required fields are marked *