# HTML & CSS
### 1. HTML4 VS XHTML VS HTML5
{% embed url="" %}
### 2. What is \
Tells the browser about the version of HTML used
### 3. How to open a link in the new page?
\
### 4. How many ways you can write CSS?
3 ways
### 5. How to link the CSS file to HTML?
```markup
// no closing tag
```
### 6. How to group the css?
### 7. Box-Modal
Content-box (default )
Border-box
### 8. CSS properties on all elements (presets we can follow)
```css
*{
margin:0;
padding:0;
box-sizing:border-box;
}
```
### 9. Out of two paragraphs, how do you change the color of the first paragraph?
```css
p:first-of-type{
color:red
}
```
### 10. How do you select all p tags inside div tag in a simple way?
Using class or id you can also select like this
### 11. How to select only direct span children elements of a div tag?
### 12. How to arrange elements side by side or in any layout in CSS?
3 ways to arrange elements
* Using floats (old way and require hacks like clearfix)
* Flex-box (2D layouts)
* Grid (3D layouts)
### 13. Which is the default CSS position?
`static` position is the default. If you want to specify top, bottom, and so on then use position relative or absolute.
### 14. What are floats and how to clear floats?
{% embed url="" %}
Float video 1
{% endembed %}
{% embed url="" %}
Float video 2
{% endembed %}
{% embed url="" %}
Float video 3
{% endembed %}
### 15. How do you make the two paras appear side by side without using flexbox or grid?
Using float as done above
### 16. Set background image in CSS.
{% embed url="" %}
### 17. CSS Selector - nth-of-type vs. nth-child
Both do the same thing sometimes so might get confused. Please watch this
{% embed url="" %}
### 18. The easiest way to align the container/ block-level element horizontally
```css
margin: 0 auto; //works only horizontally but not vertically
// for text within a container, it is
text-align : center
```
### 19. The easiest way to align the block-level element vertically
{% tabs %}
{% tab title="paddingMethod" %}
```css
// HTML
// CSS
.container {
background-color: #ccc;
width: 70%;
margin: auto;
text-align: center;
padding: 5rem;
}
```
{% endtab %}
{% tab title="heightMethod" %}
```css
// HTML
//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*/
}
```
{% endtab %}
{% endtabs %}
{% embed url="" %}
### 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
{% embed url="" %}
### 21. And condition css
This is a part of Expanding cards project. Checkout my git repo
```css
@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
{% hint style="info" %}
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.
{% endhint %}
### 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
{% embed url="" %}
5 type of selectors
* Simple selectors(select elements based on name, id, class)
* [Combinator selectors](https://www.w3schools.com/css/css_combinators.asp) (select elements based on a specific relationship between them)
* [Pseudo-class selectors](https://www.w3schools.com/css/css_pseudo_classes.asp) (select elements based on a certain state)
* [Pseudo-elements selectors](https://www.w3schools.com/css/css_pseudo_elements.asp) (select and style a part of an element)
* [Attribute selectors](https://www.w3schools.com/css/css_attribute_selectors.asp) (select elements based on an attribute or attribute value)
{% embed url="" %}
Combinator selectors
{% endembed %}
{% embed url="" %}
Attribute selectors
{% endembed %}
### 25. On hovering on an element, can I change the style on some other element?
[**https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling**](https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling)
### 26. CSS Grid
> You should know all grid properties by heart
```css
// 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**
```css
// 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;
}
```
{% embed url="" %}
### 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".