Some CSS Important Concept
- Different types of CSS selectors:
A CSS selector selects the HTML element(s) for styling purposes. Let’s describe about the 4 types of CSS selectors:
- Universal Selector: Universal selectors work for all the elements on the page. Let’s see an example about how it works,
* {
color: “black”;
font-size: 30px;
line-height: 10px;
background-image: url(“paper.gif”);
}
- Element type selector: Element type selector works when some HTML elements of the same name appear and match with each other. In the given example, the provided styles will get applied to all the p elements on the page.
p {
color: “red”
line-style: none;
border: solid 2px #ccc;
}
- ID selector: ID selector works with all the HTML elements that have an ID attribute with the same name and value. In the given example, The ID attribute’s style will be applied to all the elements having the same ID name.
#box {
width: 960px;
margin: 0 auto;
}
<div id=”box”></div>
- Class Selector: Class selector works with a specific class attribute of an HTML element. In the given example, The class selector’s style will be applied to all the elements having the same Class name.
.center {
text-align: center;
color: blue;
}
2. Properties of flexbox:
Flexbox is an efficient way to handle layout, align elements within them and distribute proper spaces among text. The properties of flexbox are:
- flex-direction: flex-direction defining the direction where flex items are placed in the flex container. Example:
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- flex-wrap: flex item all try to stay in one line. But with flex-wrap we can wrap the flex item and can adjust them in another line. Example:
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- flex-flow: For combining flex-direction and flex-wrap in one statement we need to use flex-flow. Example:
.box {
flex-flow: column wrap;
}
- justify-content: justify-content is basically used for aligning the flex item. It can be done in many ways. Such as — center, flex-start, flex-end, space-around, space-between. Example:
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
- align-items: align-items is also used for aligning the flex item. Example:
.box {
align-items: flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
}
- align-content: align-content is used for aligning the flex line. Example:
.box {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline;
}
