HTML & CSS
Hyper Text Markup Language
1. HTML4 VS XHTML VS HTML5
2. What is <!Doctype>
Tells the browser about the version of HTML used
3. How to open a link in the new page?
<a target = "_blank" href="www.google.com">
4. How many ways you can write CSS?
3 ways

5. How to link the CSS file to HTML?
<head>
<link rel="stylesheet" type="text/css" href="style.css"> // no closing tag
</head>
6. How to group the css?


7. Box-Modal
Content-box (default )

Border-box

8. CSS properties on all elements (presets we can follow)
*{
margin:0;
padding:0;
box-sizing:border-box;
}
9. Out of two paragraphs, how do you change the color of the first paragraph?
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?
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.
17. CSS Selector - nth-of-type vs. nth-child
Both do the same thing sometimes so might get confused. Please watch this
18. The easiest way to align the container/ block-level element horizontally
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
// HTML
<div class="container">
<p class="center-me">I'm perfectly centered </p>
</div>
// CSS
.container {
background-color: #ccc;
width: 70%;
margin: auto;
text-align: center;
padding: 5rem;
}
20. When to use vertical-align:middle
?
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
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)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)
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
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".
Last updated
Was this helpful?