// HTML
<div class="container">
<p class="center-me">I'm perfectly centered </p>
</div>
//CSS - Note that the default position is static
div {
background-color: #ccc;
width: 70%;
margin: auto;
text-align: center;
height: 75vh;
}
.center-me{
position:relative; /*static is the default*/
top:50%; /*the text's head will now position center but we want center of the text to be centered*/
transform:translateY(-50%) /*moves the text'head to 50% of its height above*/
}
20. When to use vertical-align:middle?
We can use this when working with inline or inline-block elements in two contexts.
Center content in a table cell
Center an image or icon placed along with the text
21. And condition css
This is a part of Expanding cards project. Checkout my git repo
@media (max-width: 900px) {
//this works like and condition. If both the conditions are true then the display:none applies
// condtion 1 - .panel:not(.panel--active)
// condition 2 - .panel:nth-of-type(1)
// I'm basically saying, if my 1st panel is not active then hide it
// To say first panel -> Its second condition, to say 'not active' it's condition 1
.panel:not(.panel--active).panel:nth-of-type(1) {
display: none;
}
}
22. ::before and ::after pseudo elements
Note that we can't apply pseudo elements on images as they don't have the content. In other words, we can apply for an element like p because it has the content or text and we can apply ::after after the text and ::before before the text, but not for images.
23. Can you modify :: pseudo class with JS?
No, you can't. You could do it with Jquery but not with Vanilla JavaScript. Define another class which can do it instead of ::before or ::after pseudo class.
24. CSS Selectors
5 type of selectors
Simple selectors(select elements based on name, id, class)
25. On hovering on an element, can I change the style on some other element?
26. CSS Grid
You should know all grid properties by heart
// grid properties
// CONTAINER
1. set display:grid on container
2.
grid-template-columns: repeat(2, 1fr); /* items must splitup into 2 cols */
grid-template-rows: repeat(1, 100px); /* 1st row is 100px*/
grid-auto-rows: 300px; /* after 1st row, every row is 300px*/
3. To center the items inside it's grid cell, give this in grid container
justify-items:'center'
4. To center all the items inside the grid container horizontally
justify-content:'center' // this can be 'space-around' and so on
5. To center all the items inside the grid container vertically
align-content:'center' // this can be 'space-around' and so on
6. To set gaps between rows
grid-row-gaps : 10px;
7. To set gaps between columns
grid-column-gaps:20px;
6 and 7 can be combined into
grid-gap : 10px 20px; //rowgap columngap
// ITEMS
Note: Lines are the lines starting at each cell (for both rows and columns)
8. To make first item to consume two spaces horizontally
.item-1{
grid-column-start:1; // beginning of 1st line
grid-column-end: 3; // beginning of 3rd line
// same as writing
grid-column : 1 / 3;
}
9. To make 2nd item consumes two rows in the same position
.item-2 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 3; // to tell the starting point of column
grid-column-end: 4;
//same as writing
grid-row : 1/3;
grid-column:3/4;
}
10. Using the above properties we can make it consume an item an area (2 rows and 2columns)
.item-3 {
grid-row: 2/4; // start at 2 and end at 4
grid-column: 1/3; // start at 1 and end at 3
// instead of specifying the ending, we can tell it to consume the desired rows
grid-row : 2 / span 2; // span means occupy 2
grid-column: 1 / span 2;
}
// instead of doing above to define area, we can use grid-area
.item-3 {
//grid-area : row-start / column-start / row-end / column-end
grid-area : 2 / 1/ 4/ 3
which is same as
grid-row: 2/4;
grid-column: 1/3;
which is same as
grid-area : 2 / 1/ span 2/ span 2;
}
NOTE: You can also overlap two or more items by making it occupy same rows or cols
and then play with their z-index to create required layouts
11. To align all individual items to center or start or end you know to use justify-items
and align-items.
To position all the elements horizontally or vertically you do
justify-content and align-content
To justify and align one single item you can do this
.item-1 {
justify-self: start;
align-self: center;
// which is same as
place-self : center start; // vertical horizontal, keep in mind (vh) not hv
}
Till now we learned basics of grid like how to align container and items. There is another way of doing things in grid where we specify a name to each item and then place it in the container (literally saying how this item should be and where it should be placed in the container). The below video timestamp for this one is 18.48
// defining names of the grid items so that we can align them in the container using
// grid-template-areas
.grid-container {
height: 100vh;
border: 10px solid #14a76c;
display: grid;
-----------------------------
grid-template-areas:
"header header header"
"nav main ads"
"footer footer footer";
//after setting the layout, we can define the sizes using,
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
// three statements above can be written in one statement using
grid-template:
"header header header" 60px
"nav main ads" 1fr
"footer footer footer" 60px
/ 20% 1fr 15%;
// creating empty space using a dot
grid-template:
"header header header header" 60px
"nav main . ads" 1fr
"footer footer footer footer" 60px
/ 20% 1fr 10% 15%;
}
.item-1 {
grid-area: header;
}
.item-2 {
grid-area: nav;
}
.item-3 {
grid-area: main;
}
.item-4 {
grid-area: ads;
}
.item-5 {
grid-area: footer;
}
27. Border vs Outline
The CSS border properties allow you to specify the style and color of an element's border.
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
(select elements based on a specific relationship between them)
(select elements based on a certain state)
(select and style a part of an element)
(select elements based on an attribute or attribute value)
