Contents
- CSS Selectors
- Display properties
- CSS Units
1.CSS Selectors
- Universal Selector It selects everything in the document and apply styling to them.
* {
color: green;
margin: 0;
padding: 0;
}
- Element Selector It selects and gives styling to all elements with the same specified element name.
p {
color: red;
}
- id Selector It selects the target by id and apply styling to all specified elements with a selected id.
#button {
width: 200px;
height: 200px;
background: grey;
}
- Class Selector It selects all elements with a specified class and gives styling to them.
.center {
text-align: center;
}
- Descendant Selector It selects only those elements that are descendants of a specified element and gives styling to them.
<div>
<h2>I am h2</h2>
</div>
div h2 {
background-color: green;
}
- Adjacent Selector It selects the element which is right next to another element at the same level of the hierarchy.
div + p {
color: red;
}
-
Child Selector
It selects all elements that are the children of a specified element.
Child Selector vs. Descendant Selector- Child Selector: It selects only the immediate descendant.
- Descendant Selector: It selects all the descendant.
div > h1 {
color: green;
}
- Attribute Selector It selects all elements by the name or value of a given attribute and apply styling to them.
<h3 id="title" class="friend" rel="newfriend">David Walsh</h3>
h3[rel="newfriend"] {
color: yellow;
}
- Pseudo Classes Selector If you want to style an element based on the state of a specified element, you can use pseudo classes for that.
selector:pseudo-class {
property: value;
}
e.g.
button:hover {
color: green;
}
- Pseudo Element Selector It allows you to apply styling to the specific piece or fragment of the selected element. For example, style the first character, or line, of an element.
selector::pseudo-element {
property: value;
}
p::first-line {
color: green;
}
2.Display properties
display: none;
The element is completely removed, as if it wasn't in the HTML code in the first place.display: inline;
The element is turned into an inline element: it behaves like simple text. Any height and width applied will have no effect.display: block;
The element is turned into a block element: it starts on a new line, and takes up the whole width.-
display: inline-block;
The element shares properties of both an inline and a block element:- inline because the element behaves like simple text, and inserts itself in a block of text
- block because you can apply
heightandwidthvalues
display: list-item;
The element behaves like a list item:<li>. The only difference with block is that a list item has a bullet point.display: table;
The element behaves like a table:<table>. It can be very useful when you want to make some element's layout like a table.
e.g.
<div class="wrap">
<div class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</div>
<div class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
.wrap {
display: table;
}
.block {
display: table-cell;
vertical-align: middle;
width: 50%;
}
display: table-cell;
The element behaves like a table cell:<td>or<th>. Its content and child elements behave like table cells.display: table-row;
The element behaves like a table row:<tr>. Its content and child element behave like table cells.display: flex;
The element is turned into a flexbox container. On its own, it behaves like a block element. Its child elements will be turned into flexbox items.-
display: inline-flex;
The element shares properties of both an inline and a flexbox element:- inline because the element behaves like simple text, and inserts itself in a block of text
- flexbox because its child element will be turned into flexbox items
display: grid;
The element is turning into an grid container. On its own, it behaves like a block element. Its child elements will be turned into grid items.
Flexbox vs. Grid: Flexbox is made for one-dimensional layouts, and the Grid is made for two-dimensional layouts. It means Flexbox can work on either rows or columns at a time, but Grids can work on both.-
display: inline-grid;
The element shares properties of both an inline and a grid element:- inline because the element behaves like simple text, and inserts itself in a block of text
- grid because its child element will be turned into flexbox items
3.CSS Units
-
Absolute Lengths
-
cm- centimeters -
mm- mellimeters -
Q- Quarter-millimeters(1Q = 1/40th of 1cm) -
in- inches(1in = 96px = 2.54cm) -
px- pixels -
pt- points(1pt = 1/72th of 1in) -
pc- picas(1pc = 12pt)
-
-
Relative Lengths
-
em- Relative to the font size of the parent, in the case of typographical properties likefont-size, and relative to the font size of the element itself, in the case of other properties likewidth
-
<p>
I am a paragraph
<span>I am a span</span>
</p>
p {
font-size: 20px;
border: 1px solid;
<!-- width property's em is relative to the font size of the element itself. So here width = 2 * 20px = 40px -->
width: 2em;
}
span {
<!-- font-size property's em is relative to the font size of the parent. So here the font-size = 2 * 20px = 40px -->
font-size: 2em;
border: 1px solid;
display: block;
<!-- width property's em is relative to the font size of the element itself. So here width = 2 * (2 * 20px) = 80px -->
width: 2em;
}
rem- Relative to font-size of the root element(root em). This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16pxvw- Relative to 1% of the width of the viewportvh- Relative to 1% of the height of the viewport%- Relative to the parent element
Top comments (0)