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.
|
1 2 3 4 5 |
* { color: green; font-size: 20px; line-height: 25px; } |
-> 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.
|
1 2 3 4 5 6 |
#container { width: 960px; margin: 0 auto; } <div id="container"></div> |
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.
|
1 2 3 4 5 6 |
.box { padding: 20px; margin: 10px; width: 240px; } <div class="box"></div> |
Descendant Combinator
-> The descendant selector or descendant combinator lets you combine two or more selectors so that a specific element can be selected.
|
1 2 3 4 5 6 7 8 9 10 11 |
#container .box { float: left; padding-bottom: 15px; } <div id="container"> <div class="box"></div> <div class="box-2"></div> </div> <div class="box"></div> |
-> 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.
|
1 2 3 4 |
#container > .box { float: left; padding-bottom: 15px; } |
-> 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.
|
1 2 3 |
h2 ~ p { margin-bottom: 20px; } |
|
1 2 3 4 5 6 7 |
<h2>Title</h2> <p>Paragraph example.</p> <p>Paragraph example.</p> <p>Paragraph example.</p> <div class="box"> <p>Paragraph example.</p> </div> |
-> 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
p + p { text-indent: 1.5em; margin-bottom: 0; } <h2>Title</h2> <p>Paragraph example.</p> <p>Paragraph example.</p> <p>Paragraph example.</p> <div class="box"> <p>Paragraph example.</p> <p>Paragraph example.</p> </div> |
-> 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.
|
1 2 3 4 5 6 7 |
input[type="text"] { background-color: #444; width: 200px; } <input type="text"> <input type="submit"> |
-> The first input will match, but the second won’t match.
|
1 2 3 4 |
input[type] { background-color: #444; width: 200px; } |
-> 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.
|
1 2 3 |
a:hover { color: red; } |
-> 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.
|
1 2 3 4 5 6 |
.container { display: flex; } .container > div { flex: 1 1 auto; } |
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.