Notes/Lecture_Notes
1
0
Fork 0
mirror of https://github.com/dholerobin/Lecture_Notes.git synced 2025-09-13 13:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

push

Browse Source
This commit is contained in:
mrinal1224
2024-05-07 12:57:28 +05:30
parent b6c1969f0e
commit 98aa698dd9
48 changed files with 24210 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/1_Web Fundamentals and Introduction to HTML.md Normal file
View File

@@ -0,0 +1,163 @@
## Introduction
When we think about accessing a website, there's more happening behind the scenes than meets the eye. The URL, or Uniform Resource Locator, is what we usually type into the address bar to access a web page. However, the URL represents much more than just a web address. It's a pathway to the actual resource we're trying to access on the internet.
## Process
To break it down, when we enter a URL, the full form of URL comes into play: **Uniform Resource Locator**. This term accurately describes what it does — it locates a specific resource on the internet. This resource could be anything from a text document to a video, and the server's job is to provide us with that resource.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/110/original/upload_06940025115633bec555d541d722b876.png?1695109040)
A **server**, in this context, isn't a physical location but rather a program running somewhere in the world. This program generates the website content for us. It's important to note that a server is not a database. Rather, it's a responsive entity that resides somewhere in the vast expanse of the digital world. Imagine it as a helpful entity that receives your request and promptly serves you the requested information.
## Dairy Farm Analogy
Here's an analogy to help clarify the roles involved: Imagine you own a dairy farm and have numerous customers who regularly place orders for dairy products. To manage this influx of orders, you have an **operations team** that handles the order-taking process. They ensure that customers' requests are recorded accurately and are then forwarded to the **production team**.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/111/original/upload_9cef5b39282b29f01216e706282bbb64.png?1695109075)
In the context of websites, the operations team can be likened to the **DNS (Domain Name System)** system. The DNS system acts like an operations team, taking in requests and translating them into specific IP addresses. Think of DNS as a phonebook for the internet. When you enter a domain name like "scaler.com," the DNS system translates it to an IP address that points to a particular server.
However, it's important to note that the server itself is not where the data comes from. Instead, it's comparable to the dairy farm in our analogy—it's responsible for assembling and providing the products. In our website world, the actual data resides in a **database**. This database is akin to a **warehouse** for the dairy farm. All the products are stored there, ready to be accessed when needed.
When a request is made, the server applies specific protocols and data logic to retrieve the necessary information from the database. This process is what ensures that we receive the correct data as a response to our request.
Bringing it all together, the customers in our dairy farm analogy represent clients or users of the website. The operations team corresponds to the DNS system, efficiently directing requests. The dairy farm itself serves as the server, assembling and providing the desired information. And finally, the warehouse embodies the database, housing all the necessary data for the website.
In the grand scheme of things, even though we might simply see a website's interface through our browser, there's a complex interplay of components behind every web page that ensures we get the right information at the right time.
### HTML boiler plate code
#### Code
```html
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf - 8">
<meta name = "viewport" content = "width = device - width, initial - scale = 1">
<title>Bootstrap demo</title>
</head>
<body>
<h1>Hello, world ! </h1>
</body>
</html>
```
### Structure your code
#### Div
Div elements are often used to structure and style sections of a web page, making it easier to apply CSS styles or JavaScript functionality to specific groups of content.
#### Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<div>
<h2>Welcome to Scalar Topics</h2>
<p>
We're glad you're here
</p>
</div>
</body>
</html>
```
#### Output
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/112/original/upload_b1f0471a9f3040bdd40eb364e9101835.png?1695109208)
#### Section
Sections are used to structure the content of a web page into logical parts, such as chapters, articles, or different sections of a document.
#### Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<section>
<h2>Section Title</h2>
<p>This is a section of content.</p>
</section>
</body>
</html>
```
### Tags and buttons
### Header tags
Header tags are used to structure the hierarchy of content on a webpage, with `<h1>` typically being the main title and `<h2>`, `<h3>`, and so on used for subsections. They help improve the accessibility and readability of content.
#### Code:
```html
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
```
#### Output
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/113/original/upload_0666ce092529c955114832a23824d462.png?1695109287)
#### Anchor tags
Anchor tags are used to link to other web pages or resources, both within the same website or externally to other websites.
#### Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<section>
<a href = "https://www.scaler.com/topics/autoboxing-in-java/">Learn autoboxing - in - java</a>
</section>
</body>
</html>
```
#### Output
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/114/original/upload_a280807eb2f3df89d88691096051f0eb.png?1695109351)
#### Image tags
Image tags are used to display graphics, photographs, icons, or any other visual content on a webpage. The alt attribute provides alternative text for accessibility and SEO purposes.
#### Code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML</title>
</head>
<body>
<img src = "img.jpg" alt = "Description of the image">
</body>
</html>
```
#### Output
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/115/original/upload_4f0ea4a42e75394bc79c854cbe6cafce.png?1695109387)
#### Buttons
Button elements are used to create clickable elements that can trigger actions when clicked, such as submitting a form or triggering JavaScript functions.
#### Code:
```html
<button type = "button"> BUTTON </button>
```
#### Output
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/116/original/upload_e873e3ecb310330c64503dafcf33ad53.png?1695109456)

244
Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/2_HTML (Lists , Tables and Forms).md Normal file
View File

@@ -0,0 +1,244 @@
## List
In HTML you can structure your content in a more readable and organized manner using lists. There are two types of lists such as
1. Ordered lists `<ol>` and,
2. Unordered lists `<ul>`
## 1. Ordered List
An ordered list is used to create a list of items that have a specific sequence or order. Each item in an ordered list is typically numbered, and the numbers usually increment in a sequential manner.
Each list item is defined with the `<li>` (list item) element, this will be more clear further in this article.
An ordered list can store content in two ways as well:
1. Non-alphabetically ordered
2. Alphabetically ordered
#### 1.1 Ordered List
In the following code you can clearly see that the output generated is not structured alphabetically but listed in an orderely fashion
#### Pseudocode
```html
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<ol>
<li>Banana</li>
<li>Apple</li>
<li>Strawberry</li>
</ol>
</body>
</html>
```
#### Output:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/117/original/upload_2e99c2e6057a7cefa9e96c95d9c27f37.png?1695110158)
### 1.2. Alphabetical Ordered List
In order to structure list in alphabetical fashion we can use `type = "A"` between `<ol>` tags
#### Pseudocode
```html
<!DOCTYPE html>
<html>
<head>
<title>Alphabetical Ordered List</title>
</head>
<body>
<h1>Alphabetical Ordered List Example</h1>
<ol type = "A">
<li>Banana</li>
<li>Apple</li>
<li>Strawberry</li>
</ol>
</body>
</html>
```
**Output:**
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/118/original/upload_ef0ce2a0099cb2aed2158fe245251153.png?1695110223)
### 2. Unordered List
Use `<ul>` tags for displaying a list with the help of symbols/shapes. In this case we're considering shapes.
#### Pseudocode
```html
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<ul type = "circle">
<li>Banana</li>
<li>Apple</li>
<li>Strawberry</li>
</ul
</body>
</html>
```
#### Output:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/119/original/upload_c4298d24e8363ee59290b3ea888e16ca.png?1695110251)
## Tables in HTML
We gnerally tables are used to organize and display data in a structured format. Tables consist of rows and columns, where each cell is capable of storing data in form of text, images, links, or other HTML elements. But in-order to create tables in HTML one needs to be familiar with certain tags and attributes used such as:
1. `<table`: tag is used to define the beginning of a table
2.`<td>`: tag represents a table cell that contains data
3. `<tr>`: tag represents a table row
4. `<th>` : tag represents a table header and is used to label columns or provide additional information about the data
5. `<thead>`: tag is used to group the header content in a table. It typically contains one or more `<tr>` elements with `<th>` elements inside.
6. `<tbody>`: tag groups the body content of the table.
7. `<caption>`: tag is used to provide a title or caption for the table. It is placed immediately after the opening `<table>` tag.
8. **border attribute**: is used to specify the thickness of the border around the table and its cells.
#### Pseudocode
```html
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<table border style = "text-align: center;">
<caption>Student's Marksheet</caption>
<thead>
<th>Student</th>
<th>Roll No.</th>
<th>Marks</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2016911</td>
<td>98</td>
</tr>
<tr>
<td>2</td>
<td>2015911</td>
<td>78</td>
</tr>
</tbody>
</table>
</body>
</html>
```
#### Output:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/120/original/upload_051534e2f8bbaa444c5fff971dbba317.png?1695110359)
## HTML Forms
Just like any other forms are used to collect information, in context of HTML it collects user input on a web page. They allow users to enter data, make selections, and submit that information to a server for processing. HTML forms are created using a combination of form-related tags and input elements such as
1. `<form>`: tag defines the beginning of a form and contains the elements that make up the form, such as text fields, checkboxes, and buttons. It has several attributes, including action (specifying the URL to which the form data should be submitted) and method (specifying the HTTP request method, usually "**GET**" or "**POST**")
2. `<input>`: The `<input>` tag is used to create various types of form input fields. The type attribute specifies the type of input field to be displayed. Common type values include:
* **text:** Creates a single-line text input.
* **password:** Creates a password input field (text is masked for security).
* **checkbox:** Creates a checkbox for binary (true/false) choices.
* **radio:** Creates a radio button for selecting one option from a group.
* **submit:** Creates a submit button to send the form data.
* **button:** Creates a generic button.
* **file:** Allows users to upload files.
* **date, email, number, and more:** Various input types for specific data formats.
3. `<label>`: tag is used to associate a label with a form element, making the form more accessible and user-friendly. The for attribute of the `<label>` tag should match the id attribute of the form element it labels.
4. `<select>`: tag creates a dropdown list, allowing users to select one option from a list of choices. It contains one or more `<option>` elements.
5. `<option>`: tag defines an individual item in a `<select>` dropdown list. The value attribute specifies the value that will be sent to the server when the form is submitted.
6. `<button>`: acts as an input element in HTML and is used for various purposes in a form including the submission of a form. We have different types of input elements as well such as checkboxes `<input type = "checkbox">`, radio buttons `<input type = "radio">`, and other input elements as needed to gather user input
#### Pseudocode
```html
<!DOCTYPE html>
<html>
<head>
<title>List Examples</title>
</head>
<body>
<form>
<label>Name</label>
<input type = "text">
<label>Email</label>
<input type = "email">
<label>Phone</label>
<input type = "number" maxlength = "10">
<label>age</label>
<input type = "number" min = "1" max = "100">
<label>Birthday</label>
<input type = "date" min = "1905 - 06 - 18" max = "2002 - 06 - 10">
<p>Food</p>
<label>Apple</label>
<input type = "checkbox">
<label>Orange</label>
<input type = "checkbox">
<label>Banana</label>
<input type = "checkbox">
<p>Gender</p>
<label>Male</label>
<input type = "radio">
<label>Female</label>
<input type = "radio">
<label for = "">Eyecolor</label>
<select>
<option>Blue</option>
<option>Black</option>
<option>Red</option>
</select>
</form>
</body>
</html>
```
#### Output:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/121/original/upload_f466e18fe597bb978dd2f93f02a9c0f7.png?1695110510)
## Inline Elements
In HTML, elements are categorized as either block-level elements or inline elements. Inline elements do not create new block-level containers and flow within the content of surrounding elements. The `<span> `element is one such common inline element used for various purposes. It's a generic inline container that is often used to apply styles or attributes to a specific portion of text within a larger block of content.
#### Pseudocode
```html
<!DOCTYPE html>
<html>
<head>
<title>Span in Inline Element Example</title>
</head>
<body>
<h1>Inline Element with Span</h1>
<p>This is a <strong><span style = "color: red ; ">red</span></strong> word.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Span in Inline Element Example</title>
</head>
<body>
<h1>Inline Element with Span</h1>
<p>This is a <strong><span style = "color: red;">red</span></strong> word.</p>
</body>
</html>
```
#### Output:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/122/original/upload_c10b7b956b460dadbe2f8996096eed32.png?1695111073)

314
Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/3_Introduction to CSS.md Normal file
View File

@@ -0,0 +1,314 @@
# Agenda:
- What is CSS
- Need for CSS
- CSS Selectors
- Properties of CSS (color, background, fonts, and texts)
So, lets start!
>Various ways of using CSS
They are:
1. Inline
2. Internal
3. External
These are the things that we will discuss. Now, let us see them one by one.
- Create a basic HTML file and add a heading **h1** inside the body tag entitled: "Heading 1" and open it in a browser to show how it looks.
- Now, let us see how to add CSS to this element.
# Steps to add style tag:
- Add `<style>` and `</style>` tag inside the head tag of your HTML file. Inside this **style** tag, you can use all the CSS stylings.
- Select the element that you need to add CSS.
- For example, h1 and add curly braces to it. Inside this, you can define the CSS properties as shown below:
```HTML=
h1{
color : brown;
}
# Using CSS in three different ways:
## 1. Internal CSS
- When you write CSS in the same HTML file. (using the style tag)
## 2. Inline CSS
- It is writing CSS for a particular element. (using style attribute.)
### Example
```
<h2 style = "color: red;"> I am heading 2 </h2>
```
- Here we are providing the CSS to that specific element "h2" only, known as Inline CSS. Always try to add a style tag inside the **head tag**.
- Inline CSS has more priority than Internal CSS.
## 3. External CSS
- You can create a separate file for CSS having the extension "**.css**".
- Here you do not need to use any HTML tag. You can directly write your CSS and properties.
### Example
```HTML=
H3{
color: green;
}
```
To reflect these CSS into your HTML file, you need to link that CSS file to the HTML file.
- Use the "link" tag to do this as shown below.
```
<link rel="CSS_file_name" href="./CSS_file_name.css">
```
- You can add the file location in the **href** to add the CSS file if it is at some other location in your system.
> These are the three ways that can be used to apply CSS to your HTML file. Now we will discuss the ways of selecting a particular element.
- As we have seen in the previous example, **h1{}** was the selector. But there are more ways of selecting elements.
- Have a brief discussion about how the students can select an element as the previous method that we learned till now.
## Descendent selectors
- Anything down the order can be termed as a descendent. For example, a father is the descendent of their child.
- Now, you need to select the obvious list as shown in the image and make it blue color.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/035/original/upload_741aa927d48eecd0dcd6ec59f15eba43.png?1695311213)
- For that first discuss the "**descent selector**".
- When you select **ol li{}** as the selector then all the elements will get blue. So you need to select the specific parents that are "div" as shown in the example.
- We will write the selector as:
```HTML=
div li{
color: blue;
}
```
Now moving to Children Selectors.
## Children selectors
Let us take an example as shown below.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/036/original/upload_6e331819a556124295cda866b1ad80df.png?1695311277)
There are two span tags. Here we need to make the text "I am the direct son" blue using CSS.
- Use the greater than **">"** symbol to use direct children.
```html=
div > h1 > span{
color: blue;
}
```
- It means that you are directing to apply CSS to the span element that is directly children to the **h1**.
Let's see another type of selector which is the Classes
## Classes
- It is a very important part when you are learning CSS.
- Classes are defined as separate entities of similar elements.
- For real real-life example, if you are in class 10, then all the students there should be in class 10 only.
- Similarly, in CSS, similar elements having the same behavior are separated in a specific class as shown below code:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/037/original/upload_130e57374ed680b30734deba9ee0b2c7.png?1695311313)
- We use dot (.) to select a class and apply CSS to them. Here the name of the class is test so we will apply CSS to this class as below:
```HTML=
.test{
color: blue;
}
```
This will be applied to both the elements of the class namely the **test**.
> Discuss a question having two different classes namely **class1** and **class2** and apply CSS on them to make one class **blue** and one class **red**.
- Solution:
```HTML=
.class1{
color: blue;
}:
.class2{
color: red;
}
```
### Question on multiple classes
Suppose a situation when there are two or more than two classes for a single element as shown below and you have to make some specific elements blue.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/038/original/upload_1a43d7aa8cd4e546b6264e88799e956b.png?1695311389)
- Here we need to select multiple classes **m1** and **m2** and make them blue.
- Solution:
```HTML=
.m1.m2{ <!-- it is multiple selector -->
color : blue;
}
```
Here you will use multiple classes as shown in the example to apply the CSS to some specific elements in such cases.
### Question on a combination of all the previously discussed selectors.
You have to make the text "**I'm here, find me**" blue as shown in the question image below. Feel free to use any selector or combination of selectors you want.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/039/original/upload_e17f8e227f4328a482d1cc22803e0dc5.png?1695311505)
- **Solution**:
```HTML=
.c1 .c2{
color: blue;
}
```
### Question on Class with Children Combinator
In this question you need to make the select and make the text "**I'm a direct son**" blue.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/041/original/upload_6e8bceeaca78cf983eb897650d522316.png?1695311598)
- **Solution**:
```HTML=
.c1>p{
color: blue;
}
```
### Question on id selector
- The id selector uses the id attribute of an HTML element to select a specific element.
- The id of an element is unique within a page, so the id selector is used to select one unique element.
- We use "#" to address the id.
### Example
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/042/original/upload_0a85830042d3f0d832f66b0c11e9ab40.png?1695311661)
- You need to select **s2** with the "id=the-one" and make blue
- Solution:
```HTML=
#the-one{
color: blue;
}
```
### Question on attribute selector
- CSS attribute selectors are used to select and style HTML elements with the specified attributes and values.
- Let us take an example as shown below. Here we need to select the button element and make the color blue.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/044/original/upload_106e606616e173b79a0a71bd501d9812.png?1695311699)
- **Solution**:
```HTML=
input[value="Select me"]{
color: blue;
}
```
Here you can write the element like "input" and start the bracket "[]". Inside the bracket, you can write the attribute that you are selecting to apply CSS.
- That's how the attribute selector works.
# 1. Normal Color
- The very basic way of using colors is as follows as we have discussed earlier that is `h1{color: color_name;}`
- Using this method you can use the 140 colors of CSS. But what do you need to use a color apart from these 140 colors?
# 2. RGB
- Then we use the **RGB value** to change the element colors.
- RGB is the color concept that shows how you can create any color using a definite proportion of these three colors that are **Red**, **Green**, and **Blue**.
The range of RGB values is from **(000 to 255)**.
Let us take an example how to use RGB values for CSS.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/045/original/upload_001bf16ebd83d5ea0df12fc19d263397.png?1695311917)
[
- You can also add **opacity** property where you pass the RGB values.
- Range of opacity is from (0.00 to 1.00)
- For example-
```HTML=
color : rgba(255, 165, 100, 0.50);
```
# 3. Color code (Hexadecimal code)
- Color codes are three-byte hexadecimal numbers (meaning they consist of **six digits**), with each byte, or pair of characters in the Hex code, representing the intensity of **red**, **green**, and **blue** in the color respectively.
- We have hex code for every color in CSS.
- You can find these codes on Google search also.
- You can use these hex codes to paste into your CSS thing.
- Remember to apply hashtag **"#"** before the codes. For example- **#DC143C**
Now, let us see the 4th method of CSS Colors.
# 4. HSC
- It stands for **Hue**, **Saturation**, and **Lightness**.
## Example
```HTML=
h2{
color : hsl(100%, 15%, 25%)
}
```
- In this, we define these three properties in percentage.
# Final Question of the session
Now, let us summarize the session and use all the previous selectors and color properties to solve this problem shown below:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/046/original/upload_cf0319b7c90943234aa84a26a0e8ff6f.png?1695312027)
- **Solution**:
First, we will add a style tag and then write all the CSS provided in the question like this:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/047/original/upload_2ea1f412f739128739787f0498ccba03.png?1695312161)
Coming to the point 6 of the question. Let us first see what is pseudo selector.
## Pseudo selector
- When you hover over any element and it changes its behavior, it is known as a Pseudo selector.
- For example, if you go on a sign-in button it becomes popped up.
```HTML=
a.hover{
color : hsla(100%, 15%, 25%, 0.6)
}
```
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/048/original/upload_14bb1001ae9af53dda59aa7200cd2c8f.png?1695312197)

363
Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/4_CSS Display , Box model and Positioning.md Normal file
View File

@@ -0,0 +1,363 @@
The topics we are going to cover in today's session are:
- Previous lecture recap with left topics
- CSS Fonts
- Box Model
- Display Property in CSS
So, let us start with the session.
So, in the previous lecture, we left the background color in CSS.
- It works the same as the color.
- You can add CSS code for background color as :
```HTML=
h1{
background-color : blue;
}
```
## **Example**:
[IMAGE_1 START SAMPLE]
![](https://hackmd.io/_uploads/ryUXY8npn.png)
[IMAGE_1 FINISH SAMPLE]
Here you will select the class namely "background" and apply CSS to them. It will be reflected to all the **h1s** inside that div tag.
> `color` is used to change the text color but `background-color` is used to change the color area behind that text.
- You can also use an image as the text background. To do this, you need to provide the image URL in the CSS as shown below:
```HTML=
h1{
background-color : url(" url_of_that_specific_image.jpg ");
}
```
You can set the background size as:
```HTML=
h1{
background-color : url(" url_of_that_specific_image.jpg ");
background-size : 400px;
}
```
- In the CSS background property, when it finds any empty space, it starts to repeat its element. You can use the property `background : no-repeat;` to avoid it.
- -You can customize the repetition of the BG image using the X and Y axis.
- You can customize various aspects of the font such as size, look, and many dynamics of it. Let us see them one by one.
- First, create a file as shown below:
[IMAGE_2 START SAMPLE]
![](https://hackmd.io/_uploads/rJ3VYLh62.png)
[IMAGE_2 FINISH SAMPLE]
Then we will apply CSS to the fonts. First, let us see font family.
## Font family
- The different types of font available in the CSS are termed as font family.
- The font-family property can hold several font names as a "**fallback**" system. If the browser does not support the first font, it tries the next font.
- Font family are like "times", "courier", "arial". If you want to use a single font from this, you can just remove the other font styles from the font family.
- Syntax:
```HTML=
.heading_1{
font-family: your_desired_font
}
```
## Font weight
- This font property is used to decide the intensity of the font.
- It's value ranges from lightest **100px** to boldest **800px**.
- Syntax:
```HTML=
font-weight: 800px;
```
## Font size
- It refers to the size of the text.
- Syntax:
```HTML=
font-size: xx-larger;
```
```HTML=
font-size: 50%;
```
- There is also a font-style that you can choose to customize your font like bold, italic, etc.
## Google font
- If you are not unable to get the font requirement from the above font properties, then you can use the Google font option.
- You just need to go to the Google search and search "**google font**". Refer website: `https://fonts.google.com/`.
- Here you can find and choose the font. Click over the font and you will get a lot of options to customize that font.
- Click on "**select font_style**" and select the link there.
- Then paste it on your HTML file head tag as shown below.
[IMAGE_3 START SAMPLE]
![](https://hackmd.io/_uploads/Hyn8KInT3.png)
[IMAGE_3 FINISH SAMPLE]
- Now copy the font family from the Google font website and you can use it in the CSS.
- Since you have imported the Google fonts using API till now. Now you can just copy the font family from Google font and paste it at the font family section in the link of the head tag.
- Font and text can be seen as similar but they are not.
- Font focus on the look and styling but Text is the internal working of your text such as spacing, line width, etc.
- First, create a file of HTML is shown below
[IMAGE_4 START SAMPLE]
![](https://hackmd.io/_uploads/Sy-OFI263.png)
[IMAGE_4 FINISH SAMPLE]
First, let us see the text alignment property
## Text Alignment
- It is used to make the alignment of your text like from the left, from the right, or in the center.
- Syntax:
```HTML=
.heading_1{
text-align : left;
}
```
## Text Decoration
- It is used to make your text attractive using some properties.
- These are oval-line, line-through, underline, etc.
- Syntax:
```HTML=
.heading_1{
text-decoration : oval-line;
}
```
## Word Spacing
- It defines how many spaces are there between any two consecutive words.
- It is defined using the pixel values.
- Syntax:
```HTML=
.heading_1{
text-decoration : oval-line;
word-spacing : 100px;
}
```
## Line Height
- It defines the height between two consecutive lines.
- Syntax:
```HTML=
.heading_1{
text-decoration : oval-line;
word-spacing : 100px;
line-height : 100px;
}
```
These are all text and font properties.
- Anything that we create in HTML and CSS takes the form of a box.
- You can check this by inspecting.
- Go to any website that we have created till now, select an html element paragraph and right click, then click on **inspect**. Here you see the boxing of your content in the right panel.
Always remember to add height and width to your box otherwise, it will not be visible. Make the box as shown below.
[IMAGE_5 START SAMPLE]
![](https://hackmd.io/_uploads/SkQYFU2a2.png)
[IMAGE_5 FINISH SAMPLE]
You can customize the size of the box by changing the height and width values.
> Take a real-life example of creating a township including steps like making land cut, house placing, etc. to discuss the box concept. And introduce `padding`.
## Padding
- It is the empty area inside the container.
- You can apply the padding outside your content but it should be inside your container box.
- Syntax to add padding:
```HTML=
h1{
padding : 20px;
}
```
- **Increasing the padding** area **decreases the container** space. Because padding is only inside that specific container, it can not go outside of the box.
## Margin
- The CSS margin properties are used to create space around two different elements, outside of any defined borders.
- It prevents your elements from getting overlapped.
- Syntax:
- Create another box as in the previous example then,
```HTML=
.box_2{
width: 100px;
height: 120px;
background-color: blue;
}
```
- There are already some margins by CCS default. But you can customize it as :
```HTML=
.box_2{
width: 100px;
height: 120px;
background-color: blue;
margin : 0px;
}
```
> You can use the universal selector (*) to apply the desired CSS property to all the elements.
Syntax:
```
*{
CSS_Property
}
```
## Applying Margins, Padding and Border
- First, let us create three containers:
[IMAGE_6 START SAMPLE]
![](https://hackmd.io/_uploads/BkXsY836h.png)
[IMAGE_6 FINISH SAMPLE]
- The CSS that we apply in the containers will be applied to all the containers because they all have the same name.
- When you apply margin 20px, it gets reflected in the element from all sides.
- If you want to apply margin from a specific side say top, then :
```HTML=
.container{
background-color : lightgreen;
martin-top : 20px;
}
```
- Likewise, you can apply margin for **bottom**, **left** and **right** side too.
Now, let us apply padding.
- If you apply padding to the container, it gets reflected in the **div tag**. You can check by applying padding to the container.
- So, it should be avoided. Rather it is best practice to **apply padding to the elements** by targeting the element separately in the style tag as:
```HTML=
h1{
padding : 20px;
}
```
Coming to margins,
- If can apply four values to the margin property as `margin : 10px 20px 30px 40px;` it will be reflected as `margin : top right bottom left`
- You can try using different margin values to see the different results.
- If you pass three values to the margin property and forget the last value, as `margin: 10px 20px 30px;`, then it will be reflected as "10 px for top and 20 px as left and right both and 40px for bottom".
- If you pass two values to the margin property as `margin : 10px 20px;`, then it will be reflected as "10px for top and bottom, and 20px as left and right.
> All these concepts are similar for **padding**. You just need to use padding in place of margins. And the rest of the rules will be the same.
## Border
- Border is defined as that extra space that you can create around your HTML elements.
- There are many types of borders such as **solid**, **dashed**, **dotted**, etc. that you need to define in the syntax to see it.
- Syntax:
```HTML=
.container{
background-color : lightgreen;
martin-top : 20px;
border : 2px solid red;
}
```
### Border Alignment Properties
- border-top : 5px solid blue ;
- border-left: 2px solid red;
- border-right: 6px dashed green;
- border bottom: 5px solid red;
### Border Radius Properties
- It is used to apply curved edges to the borders
- Syntax:
```HTML=
border-radius : 20px;
```
You can also apply this radius to a specific side of the border for example : `` border-top-right_radius: 20px;``
> These are the all properties and concepts (Margins, Padding, and Borders) that together are termed as "**Box Model** in CSS".
# Question
What is the order of values when passing all four values in the margin?
# Choices
- [ ] top right left bottom
- [ ] right left top bottom
- [ ] top bottom left right
- [x] top right bottom left
> Summarizing
- Everything that we create in an HTML is taken as a Box known as **Box Model**.
- It will have two dimensions that are Height and Width.
- And these boxes have three properties that are **Margin**. **Padding**, and **Border**.
First, let us create a file as shown below to understand the working of the Display property:
[IMAGE_7 START SAMPLE]
![](https://hackmd.io/_uploads/H1pRtL2T3.png)
[IMAGE_7 FINISH SAMPLE]
> Note: Rem is also a unit to define pixels. It converts the pixel into 10 times. For example **5rem** is **50px**.
When you see the output you can see that the border is taking the whole area of paragraphs. But it should be on the paragraph **p1** only.
Now, let us add a span tag to the file as shown below:
[IMAGE_8 START SAMPLE]
![](https://hackmd.io/_uploads/Bk8TjInTh.png)
[IMAGE_8 FINISH SAMPLE]
When you run this file, You can see that these **span tags** are not acting as a paragraph. This means that there are no borders applied to it.
Now, give this span tag border, height, and width property as :
```HTML=
span{
border: 2px solid blue;
height: 50px;
width: 50px;
}
```
Now give the p tag height and width as :
```HTML=
p{
border: 2px solid red;
height: 50px;
width: 50px;
}
```
You can see in the output that there are no changes seen in the span tag.
> Note: Block elements can have customizable height and width but you can not provide height and width to the inline elements (**span tag** in this case).
Here comes the need for **Display property**
- Add a random image to the file using **img src tag**.
- Also add an anchor tag entitled "click me".
- You can see that you can provide customizable height and width to the image. Here, it is working as both inline and block elements.
- CSS allows the user to add all of these tags as a Display property.
- Syntax:
```HTML=
p{
display : inline;
}
```
This makes your element an **inline-block**. That's the work of the Display property in CSS. After that, you can provide height and width to the inline elements too.

851
Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/5_Flexbox and Media Queries.md Normal file
View File

@@ -0,0 +1,851 @@
## Agenda
Today we will be discussing about positioning and flexbox in CSS.
We will talk about Flexbox and responsive later, So first let's start with positioning in CSS.
So let's start.
**[Ask the learners]**
What do you understand when we talk about positioning or position?
> **Note to Instructor:** Wait for 5-10 seconds to get some answers and then continue
The concept of positioning in CSS can be understood by arrangement of players on a sports field. Imagine football or cricket field.
**Think of a scenario in football:** you have a center forward positioned at one spot, and you'll find the center midfielder occupying another specific spot. This arrangement of players in different positions is scattered over the field.
Similarly, in CSS, positioning involves placing elements within a web page layout. Just as players are situated precisely on the field, web elements can be located using various CSS positioning techniques.
Now that we know what is positioning in CSS. We will be now discussing types of position in CSS.
So, let's understand two types of position in CSS:
* **Absolute Position**
* **Relative Position**
Think about a table you have in front of you. Imagine you're looking straight down at the table. It's just a flat square surface, like the top of the table. This is the place where you might put things, like your phone or a cup of coffee.
What we're going to talk about is how you can move this "cell phone" around on the table in two different ways.
**[Ask the learners]**
Can anyone tell what are the two ways we can move this cell phone on table.
When we talk about moving the box around, we're talking about changing its position in these two main directions – X-Axis and Y-Axis. These two coordinates, X and Y, help us understand exactly where the box (or any object) is located on the table.
Let's say you start with the cell phone placed at a specific spot on the table. Now, you want to move it a bit. In CSS terms, this is done by specifying how many centimeters (like pixels) you want to move the box from its current position.
For example, if you move the box 10 centimeters to the right. So the relative position of the cell phone from its starting point to ending point has changed by 10 cm.
If you are measuring the distance from the starting of the Table. The distance between starting of the table and the cell phone will be the absolute position.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/071/original/upload_189ab829bb663b192a1033cb2dbf5b52.png?1695317443)
So we can define in terms of CSS as:
* **Relative Position:** The element is positioned relative to its previous position.
* **Absolute Position:** The element is positioned absolutely to its parent container.
> **Tip to Instructor:** Ask learners if they have any doubt.
Now, that we know what is Relative and Absolute Positioning. Let's move forward by coding and understanding positions.
Now let's move to VS Code and write some code to understand it better.
> **Tip to instructor:** Make a boilerplate code by creating 4 boxes and use those boxes for explaining position property. While writing the code, make sure to explain each line to the learners.
**HTML Code:**
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning</title>
<style>
.container {
background-color: dodgerblue;
}
.box {
display: inline-block;
height: 150px;
width: 150px;
background-color: tomato;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Now lets target this 3rd box and apply position property on it.
### Exercise 1
#### Problem Statement
Give **static** position value to box 3.
#### Solution
* we can give a separate id to the box3, say box_3.
* Now, in style tag, we can use position property and set the value as **static.**
#### Pseudocode
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning</title>
<style>
.container {
background-color: dodgerblue;
}
.box {
display: inline-block;
height: 150px;
width: 150px;
background-color: tomato;
margin: 10px;
}
#box_3 {
position: static;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box" id="box_3">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Static is the default position in which all the elements are positioned, so it will do nothing to the position of box3
There are 5 positions in CSS that we will talk about:
* static
* relative
* absolute
* fixed
* sticky
Now lets give it relative position.
### Exercise 2
#### Problem Statement
Give **relative** position value to box 3 and move it 20px.
#### Solution
* In style of box_3, we can use position property and set the value as **relative** along with top property as 20px.
#### Pseudocode
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning</title>
<style>
.container {
background-color: dodgerblue;
}
.box {
display: inline-block;
height: 150px;
width: 150px;
background-color: tomato;
margin: 10px;
}
#box_3 {
position: relative;
top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box" id="box_3">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Now, it will move 20 pixels from the top. We're instructing the box to move '20 pixels down from your original position at the top'.
> **Tip to instructor:** Use different-different values to explain relative value to learners and ask learners if they have any doubt or not.
Now lets give it absolute position.
### Exercise 3
#### Problem Statement
Give **absolute** position value to box 3 and move it 20px.
#### Solution
* In style of box_3, we can use position property and set the value as **absolute**.
#### Pseudocode
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning</title>
<style>
.container {
background-color: dodgerblue;
}
.box {
display: inline-block;
height: 150px;
width: 150px;
background-color: tomato;
margin: 10px;
}
#box_3 {
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box" id="box_3">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
> **Tip to instructor:** This box 4 vanishing case can be tricky for learners. so take time explaining this.
Now, we can see that box 4 has vanished but "box 4" could be positioned directly underneath "box 3", and because of the overlap, "box 4" might be hidden by "box 3".
If we want "box 4" to be visible and not hidden by "box 3", you might need to adjust the positioning of box 3 and give some top value as 100px.
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning</title>
<style>
.container {
background-color: dodgerblue;
}
.box {
display: inline-block;
height: 150px;
width: 150px;
background-color: tomato;
margin: 10px;
}
#box_3 {
position: absolute;
top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box" id="box_3">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Now, we can see it is moving down, so that means box3 is now trying to adjust with the window itself.
In this case, the element box3 is removed from the normal document flow. The other elements will behave as if that box3 is not in the document. No space is created for the element in the page layout. The values of left, top, bottom and right determine the final position of the box3.
Now box3 is not trying to move relative to its original position, it will try to move relative to the window, means from the entire top of the window it is taking 100px.
> **Tip to instructor:** Now use right, left and bottom properties to explain it better.
Now lets understand what fixed position is.
**Fixed position:**
* Fixed Position is basically when your Element will take a place with the Respect to the window and it will not move from there.
* Fixed-positioned element is "fixed" in a specific location on the screen, and it won't move when the user scrolls up or down the page. This can be useful for creating elements that should always be visible, like navigation bars or call-to-action buttons, regardless of where the user is on the page.
* The element will maintain its position relative to the viewport's coordinates, providing a consistent visual reference point as the user interacts with the content.
### Exercise 4
#### Problem Statement
Give **fixed** position value to box 3 and fix it at the bottom of the scrollable page.
#### Solution
* In style of box_3, we can use position property and set the value as **fixed**.
* For fixing it to the bottom of the page, we can give right property as 4px and bottom as 1px.
#### Pseudocode
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning</title>
<style>
.container {
background-color: dodgerblue;
height: 4000px;
}
.box {
display: inline-block;
height: 150px;
width: 150px;
background-color: tomato;
margin: 10px;
}
#box_3 {
position: fixed;
right: 4px;
bottom: 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box" id="box_3">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Now if we scroll the page, the box3 will be fixed at the bottom right of the page.
> **Tip to instructor:** Ask the learners, if they have any doubts
Now, lets understand sticky value:
**Sticky:**
* When an element is given a "position" value of "sticky," it acts like a relative-positioned element within its containing element until a certain scroll threshold is reached. Once the user scrolls beyond that threshold, the element becomes "stuck" in place and behaves like a fixed-positioned element, remaining visible on the screen.
* In other words, a sticky element starts as part of the normal document flow, just like a relatively positioned element. As the user scrolls, the element follows its normal position until it reaches a designated point (usually when its top or bottom edge reaches a specific distance from the viewport's edge). At that point, it becomes "sticky" and remains fixed at that position while the rest of the content scrolls.
Lets go to the zomato website and see its navbar, here you can see when we scroll the page, this navbar is getting fixed at the top of the page.
So on reaching a particular value, sticky gets fixed.
### Exercise 5
#### Problem Statement
Give **sticky** position value to box 3 and fix it at the top of the scrollable page.
#### Solution
* In style of box_3, we can use position property and set the value as **sticky**.
* For fixing it to the top of the page, we can give top property as 0.
#### Pseudocode
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning</title>
<style>
.container {
background-color: dodgerblue;
height: 4000px;
}
.box {
display: inline-block;
height: 150px;
width: 150px;
background-color: tomato;
margin: 10px;
}
#box_3 {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box" id="box_3">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Now if we scroll the page, the box3 will behave normally will it touches the top and them it becomes fixed to the top of the page.
Now let's talk about Flex box.
**Flex Box:**
* Flex box stands for flexible box
* liberty to align and Justify our Elements with just some line of code but you need to think graphically.
* It's a layout model in CSS that makes arranging elements a whole lot easier.
* With flexbox, you have a container that holds your elements, and it's like your shelf. Inside this container, you can use the power of flexbox to control how your elements behave.
Flexbox is just a concept of CSS that makes your life very easy.
> **Note to instructor:** Now use the below boilercode to start with explaining flex.
Now, lets create some boxes again in HTML to start with flexbox.
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<style>
.container {
background-color: tomato;
border: 2px solid black;
height: 500px;
width: auto;
}
.box {
height: 100px;
width: 100px;
background-color: dodgerblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
So this is the basic boxes that we made similar to above.
Now lets use the **display: flex;** property in the parent container
```css
.container {
background-color: tomato;
border: 2px solid black;
height: 500px;
width: auto;
display: flex;
}
```
When you apply the CSS property display: flex; to an element, you're essentially creating a flex container. This container establishes a flex formatting context for its child elements, or "flex items." This means that the child elements within this container will follow the rules and behaviors defined by the flexbox layout model.
Default property of flex box is to arrange all the elements in the row as you can also see here.
You can also use many flex-direction property to arrange the elements in different ways.
> **Note to instructor:** Use different-different values with flex-direction property like row, column, row-reverse, column-reverse etc, to explain it better.
You can also use this important property called **justify-content**.
**justify-content:** Defines how flex items are distributed along the main axis (horizontal for row layout, vertical for column layout).
So if we want to center all the row items, we can use **justify-content: center**
```css
.container {
background-color: tomato;
border: 2px solid black;
height: 500px;
width: auto;
display: flex;
justify-content: center;
}
```
The justify-content: center; property applied to a flex container in CSS aligns its child elements **horizontally** at the center of the container along the main axis.
But there is 1 more property that is used to align items vertically that is **align-items**.
> **Note to instructor:** Explain the axis using the below diagram. diagram refence: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/073/original/upload_1ec9fd4a198aa44de652e4864bd69a53.png?1695317491)
**[Ask the learners]**
If I say, I want my flex direction is row, what will be my main axis?
- X axis
**[Ask the learners]**
And If I say, I want my flex direction is column, what will be my main axis?
- Y axis
Now lets take more examples of **justify-content** property.
> **Note to Instructor:** Explain each of the values with examples.
* **justify-content: flex-start;**
* Flex items are aligned at the beginning of the container (left for a row layout, top for a column layout).
* **justify-content: flex-end;**
* Flex items are aligned at the end of the container (right for a row layout, bottom for a column layout).
* **justify-content: center;**
* Flex items are centered along the container's main axis.
* Equal space is added before the first item and after the last item, creating a balanced appearance.
* **justify-content: space-between;**
* Flex items are evenly spaced along the main axis.
* The first item aligns with the container's start, the last item aligns with the container's end, and equal space is added between the items.
* **justify-content: space-around;**
* Flex items are evenly spaced along the main axis, with space distributed around them.
* Space is added before the first item, after the last item, and between each pair of items.
* **justify-content: space-evenly;**
* Flex items are evenly spaced along the main axis, with equal space added between them.
* Equal space is added before the first item, between all items, and after the last item.
There are many options for this property, you can choose to play around with all of them.
Now lets understand **align-items** property.
The **align-items property** lets you control how flex items are positioned on the cross axis within the container.
> **Note to Instructor:** Explain each of the values of align-items with examples.
* **align-items: flex-start;**
* Flex items align at the start of the cross axis (top for row layout, left for column layout).
* No additional space is added between items and the container's cross axis edge.
* **align-items: flex-end;**
* Flex items align at the end of the cross axis (bottom for row layout, right for column layout).
* No additional space is added between items and the container's cross axis edge.
* **align-items: center;**
* Flex items are vertically centered along the cross axis.
* Equal space is added above and below the items, creating a balanced appearance.
* **align-items: baseline;**
* Flex items are aligned along their text baselines.
* This value can be useful when items have varying font sizes or text content.
* **align-items: stretch;**
* Flex items are stretched to fill the container's cross axis.
* If no height is explicitly set on the items, they will take up the full height of the container.
**[Ask the learners]**
If flex-direction if set to row and justify-content is center, which direction it will align?
- Horizontally
Now, we have covered two important properties, justify-content and align-items. Now we will move formward with some interesting properties.
**[Ask the learners]**
Do you know what is a responsive website?
- A responsive website is a website that can work of different screen size and can adapt to those different screen sizes. It responds and adjusts its layout, images, and content to fit the screen it's being viewed on, whether that's a desktop computer, tablet, or smartphone.
Lets take an example to scaler's website
> **Note to Instructor:** Navigate to https://www.scaler.com/ and show its responsiveness
If you minimize the screen, you can see that everything is changing according to the screen size. Design is not breaking and is adapting to the screen size whether it is mobile view or the desktop view.
> **Note to Instructor:** Now to explain screensize better, you can navigate to our HTML page and show different mobile and responsive views in inspect tab.
In inspect tab of our HTML website, we can check how our website will look in different dimensions and screen sizes.
If we decrease the screen size, we can see that the boxes are shrinking. That means it is not responsive, There are various properties in flex box that we can use to make our website responsive.
In the current scenario the boxes are getting shrinked but if I don't want it to shrink and I want them to adjust according to the screen size, for that we can use some CSS properties.
There is 1 property know as **flex-wrap**
**flex-wrap:** The flex-wrap property in flexbox controls whether flex items should wrap onto multiple lines within the flex container when there's not enough space to fit them all on a single line.
So if we use the above code with flex-wrap property, we can see that the boxes are now responsive and not shrinking.
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<style>
.container {
background-color: tomato;
border: 2px solid black;
height: 500px;
width: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
height: 200px;
width: 200px;
background-color: dodgerblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
> **Note to Instructor:** Now create more boxes to expain **flex-wrap** property better.
The flex-wrap property is especially useful when dealing with responsive layouts. It allows you to control how flex items reorganize when the available space changes. For example, if you have a row of cards and they don't fit on a smaller screen, setting flex-wrap: wrap; would cause them to stack vertically, creating a more readable layout.
Here's what each value of flex-wrap does:
* flex-wrap: nowrap;
* This is the default value.
* Flex items will stay on a single line, even if they cause overflow. They won't wrap to the next line.
* flex-wrap: wrap;
* When there's not enough space for all items on a single line, flex items will wrap to the next line. They will stack vertically if needed.
* flex-wrap: wrap-reverse;
* Similar to wrap, but the wrapping happens in reverse order. The last flex item becomes the first item on the new line, and so on.
Now we can discuss about item wise flex box,For now we were using flex box in container but now we will use flex box within the container items
> **Note to Instructor:** Navigate to https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-properties-for-the-childrenflex-items and explain that we can use flex properties for children items.
There is 1 property called **order** that is used for ordering the items.
The **order** property in flexbox allows you to control the visual order in which flex items appear within a flex container, regardless of their order in the HTML markup. It's particularly useful for reordering items for different screen sizes or creating unique visual layouts. H
lets give the order property to box1, and see what happens:
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<style>
.container {
background-color: tomato;
border: 2px solid black;
height: 500px;
width: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
height: 200px;
width: 200px;
background-color: dodgerblue;
margin: 10px;
}
.box1{
order: 5;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Now you can see that the box1 is ordered at the last.
let's understand this with an example:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/074/original/upload_738cab0d87a85a216d67986e5105b3e4.png?1695317536)
Suppose, we gave order: 4 to box1 and order: 2 to box3.
> **Note to Instructor:** So the question is how will the boxes arrange themselves?
* box1 has the order 4, so it will go at last.
* box3 has order 2, so it will go at third.
* box 2 will be at 2nd position
* box1 will be at first.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/075/original/upload_e5323381ac5d2c537cd4459693a88763.png?1695317559)
Now lets' understand flex-shrink property.
The **flex-shrink** property in flexbox determines how flex items shrink when the container's available space is limited. It defines the ability of an item to shrink in relation to other items in the container when the container's size is reduced.
let's understand this with an example:
We are providing flex-shrink property as 2 to box3.
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<style>
.container {
background-color: tomato;
border: 2px solid black;
height: 500px;
width: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box {
height: 200px;
width: 200px;
background-color: dodgerblue;
margin: 10px;
}
.box3{
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box box3">3</div>
<div class="box">4</div>
</div>
</body>
</html>
```
Now, whenever we are downsizing the screen box will be the first one to shrink the most.
Similarly there is a property called flex-grow
**flex-grow:**
* This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
> **Note to Instructor:** Show the similar example as flex-shrink.
lets see a basic example:
```htmlembedded
.box3{
flex-shrink: 2;
}
```
Now the box3 will grow the most on increasing the screen size
> **Note to Instructor:** Now ask for doubts to the learners about the doubt that came up during the class.

824
Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/6_CSS Grid.md Normal file
View File

@@ -0,0 +1,824 @@
## Agenda
Today we will be discussing about Responsive Layout and Grid in CSS.
In previous session, we learned about flexbox and media queries. you can practice more about Flexbox via https://flexboxfroggy.com/.
So let's start with today's session.
Sometimes, when you have to create a very complex layout, you can use a Grid.
**[Ask the learners]**
What is a Grid?
Let's take an example to understand this better, when we were kids, there were notebooks and the pages were of below structure.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/076/original/upload_ea53ca4c4a28ffe4b4386302f64cd526.png?1695317786)
This is basically a grid structure.
**CSS Grid Layout** is a layout in CSS that allows you to create two-dimensional grid layouts for arranging and aligning elements on a web page. It provides a powerful way to structure and design both rows and columns of content, allowing for complex and flexible layouts.
In CSS Grid, we can use more properties as compared to Flexbox. So, lets jump on to VS Code to understand CSS Grid better.
> **Tip to instructor:** Make a boilerplate code by creating 9 items and use those items for explaining CSS Grid. While writing the code, make sure to explain each line to the learners.
Let's create a basic layout of 9 items which we will use to understand Grid.
**HTML Code:**
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 20px;
line-height: 1.5;
color: dodgerblue;
background-color: tomato;
}
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
}
.item{
background-color: dodgerblue;
color: white;
font-size: 20px;
padding: 20px;
border: 1px solid lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
```
**[Ask the learners]**
Suppose we want to arrange these items in a row order, so what properties can I use?
**display: flex;**. In last lecture we learn't about flex, so giving display as flex will make the items align in row manner.
**[Ask the learners]**
Now, what happens if I give display property as Grid?
Nothing will change, they will look the same, but if you go to inspect, you can see a Grid keyword to the container.
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/077/original/upload_bf8d96c8c569d50f6f73d4f21f594191.png?1695317817)
It tells that this container is assigned to a grid value, so we are allowed to use any grid property available with the CSS.
### grid-template-columns
So lets move to the first property called **grid-template-columns** and give some value to this as grid-template-columns
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 100px 100px 100px;
}
```
Here grid will be with three columns, each with a width of 100px. This means that the entire grid will be 300px wide, and each of the nine grid items will occupy a cell that is 100px wide having 3 rows of the grid.
Similarly if we remove 1 column of 100px (grid-template-columns: 100px 100px) from the above property, it will create 2 columns of 100px each.
But, there is a catch, suppose I gave border to the container, Border will be applied to the entire container.
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 100px 100px 100px;
border: 2px solid black;
}
```
So here 300px will be taken by the items but the rest 900px will be completely empty. So we are not making any good use of the space. To fix this Grid provides Frames to handle this.
So I give the units like this:
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid black;
}
```
It will take the entire space and equally divide 3 items in a row. The grid-template-columns: 1fr 1fr 1fr; declaration means that the available space in the container's width will be divided into three equal parts, each represented by 1fr. This is a flexible way to distribute space evenly among the columns.
Let's understand it that way:
* suppose the container is of length 120px.
* grid-template-columns: 1fr 1fr 1fr;
* Total frames will be 1+1+1 = 3.
* size of each frame will be 120/3 = 40px.
Hence in this case, each column of the three columns will be equal to 40px.
Now lets give the units like this:
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
border: 2px solid black;
}
```
Now with grid-template-columns: 1fr 2fr 1fr;, you are distributing the available space into three columns with different proportions. The first column will take up 1fr that is 300px of the available space, the second column will take up 2fr that is 600px, and the third column will take up 1fr or 300px.
> **Tip to instructor:** Now use inspect to show learners the dimensions of the items created.
### column-gap
Now if we want to give some gap between the columns, we can use **column-gap** property
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
column-gap: 20px;
}
```
The space between the columns will now be 20px, creating a gap between each column. This space will be added to the defined widths of the columns.
### row-gap
Similarly if we want to give some gap between the rows, we can use **row-gap** property
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
column-gap: 20px;
row-gap: 20px;
}
```
The space between the rows and columns will now be 20px. This space will be added to the defined widths of the rows.
## gap
If you want to give gap to both rows and columns at once. you can give gap property only.
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
```
The result will be the same when we used both row-gap and column-gap property.
Let's now see row-level property of grid.
### grid-template-rows
Lets give some value to this as grid-template-rows.
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
```
The **grid-template-rows: 1fr 2fr 1fr;** declaration defines the height proportions of the grid's rows. The first row will take up 1fr, the second row will take up 2fr, and the third row will take up 1fr.
Similar to how fr units distribute space among columns, here the vertical space is distributed among rows. The second row will be twice as tall as the first and third rows.
### grid-template-columns with repeat()
Suppose you want to divide each column in equal frames then we can use **repeat()** method.
Suppose you want to create a grid with 4 columns, each of 100px width. Instead of writing out 100px 100px 100px 100px, you can use the repeat() function:
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 2fr 1fr;
}
```
This method can also be applied to row level grid.
### grid-auto-rows
grid-auto-rows is a CSS property used in CSS Grid layouts to define the size of rows that are created implicitly (automatically) when the content doesn't fit into the explicitly defined rows. This property allows you to control the height of these automatically generated rows.
Suppose we give its value:
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-auto-rows: 200px
}
```
In this example, all the rows will have a fixed height of 200px. This is helpful while we want out grid to not dynamically grow according to the content.
We can also use all the flex properties with Grid like align-items, justify-content etc.
If I use align-items: end;
```css
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
align-items: end;
}
```
All the columns will be pushed to the end of the container.
Now we will be working on item level.
Suppose we want to get a particular item without making its another class or id. then we can use **.item:nth-of-type()** pseudo-selector.
Here suppose we want to change the styles particularly for 2nd items from out list, we can use it like:
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 20px;
line-height: 1.5;
color: dodgerblue;
background-color: tomato;
}
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
}
.item{
background-color: dodgerblue;
color: white;
font-size: 20px;
padding: 20px;
border: 1px solid rgb(114, 118, 119);
}
.item:nth-of-type(2){
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
```
We have selected item 2 and gave its height and width as 100px.
Now, we can give some properties to it:
```css
.item:nth-of-type(2){
width: 100px;
height: 100px;
align-self: center;
justify-self: center;
}
```
These properties are used to control how the element aligns within its grid cell both vertically and horizontally. align-self: center; centers the element vertically, and justify-self: center; centers it horizontally within the grid cell.
These were the flex properties, all the flex properties are available for CSS grids also.
Keep in mind that these styles will only be applied to the second .item element due to the :nth-of-type(2) selector. The other .item elements will not be affected by these specific styles unless they are targeted by other rules.
**[Ask the learners]**
Now, let's take 1 more example, where you want item 1 to take space of item 4 vertically. So how we can do this?
We can give properties like:
```css
.item:nth-of-type(1){
background: black;
grid-row: 1/3;
}
```
This will create a lot of confusion that 1/3 row is how that much. So for that we will open inspect and see breakpoints.
You can see every element has breakpoint, so we are saying that 1st element should row-wise take the 1st to 3rd breakpoint.
grid-row: 1/3; sets the vertical span (row range) that the targeted .item element should occupy. In this case, the .item will span from row line 1 to row line 3.
If you make it grid-column: 1/3; it will horizontally take the space from 1st breakpoint to starting of 3rd breakpoint.
**[Ask the learners]**
Any questions in this topic?
There is 1 easier way to do this, you can give grid-column: span 2; and it will do the same thing.
```css
.item:nth-of-type(1){
background: black;
grid-column: span 2;
}
```
The grid-column: span 2; property on the .item class indicates that each .item element will span two columns horizontally.
> **Tip to instructor:** Now explain this property by using different different property values.
Okay, so now we will move ahead with media queries in CSS.
Media queries is used to make your webpage responsive. Media queries allows you to apply different styles based on the characteristics of the or screen, such as its width, height, orientation, resolution, and more. Media queries enable you to create responsive designs that adapt to various screen sizes and devices.
Lets just check the responsiveness of our basic code:
```css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 20px;
line-height: 1.5;
color: dodgerblue;
background-color: tomato;
}
.container{
width: 1200px;
margin: 100px auto;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid black;
}
.item{
background-color: dodgerblue;
color: white;
font-size: 20px;
padding: 20px;
border: 1px solid lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
</body>
</html>
```
Lets try to downsize the screen and move the screen. You can see that this webpage is not responsive and when we downsize it part of grid items is vanishing out of the window.
So, to make it responsive we will be using media queries.
Similarly, we can check this window using inspect responsive feature. Its not responsive there also, so we have to make it responsive.4
Suppose, we are downsizing the screen and want to it make responsive as soon as screen width reaches 500px. We can use the syntax as:
```css
@media (max-width: 500px){
.container{
grid-template-columns: 1fr;
}
}
```
Now lets see what happens as we downsize the window.
* When the screen width is 500px or narrower, the styles inside the media query will be applied.
* The .container element's grid layout will be set to a single column using grid-template-columns: 1fr;.
* This means that on screens narrower than 500px, the grid will collapse into a single column layout. Each grid item will take up the full width of the container, allowing for easy vertical scrolling on smaller screens.
When screen size is reaching 500px, we are telling the grid to make only 1 column and take the whole frame size for each item.
So media queries is applied this this, now we will cover 1 more topic from Grid that is grid areas.
For understanding the Grid Areas, we have to make the layout of the screen in this exercise:
![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/079/original/upload_0cd7eb9974551b72015c27bed98c5236.png?1695317926)
**[Ask the learners]**
Anyone has any idea how to approach this?
Topdown approach is correct one, we can use this to make our webpage, so lets start making it.
Lets first define all the components in our HTML page, header, navigation, sidebar, footer.
For all these components we can create semantic tags for all.
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
height: 100vh;
}
</style>
<body>
<header>Header</header>
<main>Content</main>
<nav>Navigation Bar</nav>
<aside>SideBar</aside>
<footer>footer</footer>
</body>
</html>
```
So, now we have created a basic layout of the application.
for initializing grid in our application, we can use display: grid; property.
```htmlembedded
body{
font-size: 20px;
height: 100vh;
display: grid;
}
```
now lets give some borders and colors to all the elements.
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
height: 100vh;
display: grid;
}
header, main, nav, aside, footer{
background-color: tomato;
color: white;
padding: 20px;
border: skyblue 1px solid;
}
</style>
<body>
<header>Header</header>
<main>Content</main>
<nav>Navigation Bar</nav>
<aside>SideBar</aside>
<footer>footer</footer>
</body>
</html>
```
To convert this layout to our desired layout, we can use 1 css property called grid-template-areas, where we can tell CSS what area to give to a specific section.
we can use grid-area to call that specific area and provide that area to our elements
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
height: 100vh;
display: grid;
grid-template-areas:
'top top top'
'nav content sidebar'
'nav footer footer';
}
header, main, nav, aside, footer{
background-color: tomato;
color: white;
padding: 20px;
border: skyblue 1px solid;
}
header{
grid-area: top;
}
nav{
grid-area: nav;
}
main{
grid-area: content;
}
aside{
grid-area: sidebar;
}
footer{
grid-area: footer;
}
</style>
<body>
<header>Header</header>
<main>Content</main>
<nav>Navigation Bar</nav>
<aside>SideBar</aside>
<footer>footer</footer>
</body>
</html>
```
The CSS styles define the grid layout using grid-template-areas, specifying where each section should appear in the grid. The classes header, nav, main, aside, and footer are assigned to their respective grid areas using the grid-area property.
Now using this code we have reached the basic layout requirements for us. But we have to play with heights and widths of the elements to make it exactly like the desired one.
We first need to add 1 more sidebar for our requirements.
**[Ask the learners]**
You can take some time and tell me how to do it?
Ans,
* we need to add 4 templates in grid-template-areas property,
* we have to make 1 more element for sidebar and give it the same styling
* then we can add new template name to grid-template-areas and create new element style with respect to our template.
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
height: 100vh;
display: grid;
grid-template-areas:
'top top top top'
'nav content sidebar sidebar2'
'nav footer footer footer';
}
header, main, nav, aside, footer, div{
background-color: tomato;
color: white;
padding: 20px;
border: skyblue 1px solid;
}
header{
grid-area: top;
}
nav{
grid-area: nav;
}
main{
grid-area: content;
}
aside{
grid-area: sidebar;
}
footer{
grid-area: footer;
}
div{
grid-area: sidebar2;
}
</style>
<body>
<header>Header</header>
<main>Content</main>
<nav>Navigation Bar</nav>
<aside>SideBar</aside>
<div>Sidebar 2</div>
<footer>footer</footer>
</body>
</html>
```
Now only height and width of the templates is left, so we can use grid-template-columns and grid-template-rows properties:
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
height: 100vh;
display: grid;
grid-template-areas:
'top top top top'
'nav content sidebar sidebar2'
'nav footer footer footer';
grid-template-columns: 1fr 4fr 1fr 1fr;
grid-template-rows: 80px 1fr 70px;
}
header, main, nav, aside, footer, div{
background-color: tomato;
color: white;
padding: 20px;
border: skyblue 1px solid;
}
header{
grid-area: top;
}
nav{
grid-area: nav;
}
main{
grid-area: content;
}
aside{
grid-area: sidebar;
}
footer{
grid-area: footer;
}
div{
grid-area: sidebar2;
}
</style>
<body>
<header>Header</header>
<main>Content</main>
<nav>Navigation Bar</nav>
<aside>SideBar</aside>
<div>Sidebar 2</div>
<footer>footer</footer>
</body>
</html>
```
* **grid-template-columns:** 1fr 4fr 1fr 1fr; defines the widths of the columns in the grid. The first column takes up 1 fraction of the available space, the second column takes up 4 fractions, and the last two columns take up 1 fraction each.
* **grid-template-rows:** 80px 1fr 70px; defines the heights of the rows in the grid. The first row has a fixed height of 80px, the second row takes up 1 fraction of the available space, and the third row has a fixed height of 70px.
In this, we have achieved the layout that we wanted to achieve

413
Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/7_CSS (specificity , inheritance , rendering).md Normal file
View File

@@ -0,0 +1,413 @@
# CSS Cascading, Specificity, Inheritance and Overflow
### Introduction
Before starting with the topic, let us understand the simple definition of *Priority and Specific*. These two words create a concept in CSS that is known as Specificity.
**Priority:** Suppose three tasks are to be done. All the tasks can be arranged based on the task that has to be done first. The task with the highest priority will be on the top.
**Specific:** Suppose you are diagnosed with fever then the doctor prescribes you with some medicines that are *particular* to the disease i.e., fever.
### What is Cascading in CSS?
Cascade is defined as top-to-bottom flow.
*Example:*
```css!
.h1{
colour: red;
}
.h1{
colour: blue;
}
```
The output will be blue because cascading always goes down therefore blue comes later therefore priority will be given to the later part.
**CSS Cascading involves Specificity and Inheritance which will be covered in this lecture.**
### Specificity
To understand specificity let's take an example.
**First**: Create an HTML file to understand specificity.
**Second**: Create an unordered list of let's say "fruits".
```htmlembedded!
<body>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
</body>
```
**Third**: Assign 'id' and 'class' to your unordered list.
```htmlembedded!
<body>
<ul id = "fruits">
<li>Apple</li>
<li class ="favourite">Mango</li>
<li>Orange</li>
</ul>
</body>
```
**Fourth**: Using CSS, make the colour of the class "favourite" blue.
The Selector will be id i.e., "fruits" Inside this id select a list element and then a specific class i.e., "favourite".
```htmlembedded!
<style>
ul#fruits li.favourite{
color: blue;
}
</style>
```
**Fifth**: Using CSS, change the colour of the unordered list to blue as well.
```htmlembedded!
<style>
ul#fruits li.favourite{
color: blue;
}
ul#fruits li{
color: blue;
}
</style>
```
**[Ask the learners]**
What will happen if we change the colour of the unordered list to blue after changing the colour of class "favourite" to red?
```htmlembedded!
<style>
ul#fruits li.favourite{
color: red;
}
ul#fruits li{
color: blue;
}
</style>
```
--> The result will be that **"Mango" will be of red** colour and the rest list elements will be blue because it is using the **Specificity** property.
Hover over the selector `ul#fruits li` you will see "Selector Specificity: (1,0,2)".
Before understanding the Selector Specificity values:
**[Ask the learners]**
What if the style attribute is applied in the list tag with class = "favourite"?
```htmlembedded!
<body>
<ul id = "fruits">
<li>Apple</li>
<li class ="favourite" style= "color: yellow;">Mango</li>
<li>Orange</li>
</ul>
</body>
```
--> The result will be that **the value of Mango will turn to "yellow"** and the rest of the list elements will remain blue because the style attribute does not get affected by the style tag.
### Understanding values in specificity
Specificity can have **four** values if the style attribute is also included.
| Style attribute | IDs | Classes | Elements |
| :--------: | :--------: | :--------: | :---------: |
#### How to count specificity?
The selector `ul#fruits li` has "Selector Specificity: (1,0,2)". But how?
There is 1 ID i.e., fruits. There is no class added in the selector. There are 2 elements in the selector: ul and li. Therefore the value will be (1,0,2).
Similarly, the value of the selector `ul#fruits li.favourite` is (1,1,2).
#### How does the Selector Specificity make sure what selector should be applied?
> Remove style attribute from the list element with class = "favourite".
By comparing both the Selector Specificity values box by box: we see the value of the selector `ul#fruits li.favourite` is (1,1,2) which means it has 1 class while the other selector has no class. Therefore, the `ul#fruits li.favourite` selector will be applied.
**[Ask the learners]**
Arrange them from the least effective to the most effective selector.
1. `.test`
2. `h1.test`
3. `#try`
4. `h1`
--> **4<1<2<3** is the order.
Let's compare the values of each one of them.
1. `.test` - It has one class. Therefore, the value is (0,1,0).
2. `h1.test` - It has one class and one element. Therefore, the value is (0,1,1).
3. `#test` - It has one ID. Therefore, the value is (1,0,0).
4. `h1` - It has one element. Therefore, the value is (0,0,1).
**[Ask the learners]**
Calculate the value of the Selector Specificity of the following selector.
`#try ul div.test h2{}`
--> **(0,1,1,3)**
ID - #try
Class - .test
Element - ul, div, h2
| Style attribute | ID| Class|Element|
| :--------: | :--------: | :--------: | :-------: |
| 0| 1 | 1 |3|
**[Ask the learners]**
Calculate the value of the Selector Specificity of the following selector.
`#try span img .test .main header`
--> **(0,1,2,3)**
ID - #try
Class - .test, .main
Element - span, img, header
| Style attribute | ID| Class|Element|
| :--------: | :--------: | :--------: | :-------: |
| 0| 1 | 2 |3|
> You can use [Keegan](https://https://specificity.keegan.st/) to calculate Specificity value.
### Keyword - `!important`
If the keyword !important is used then it follows the cascading rule regardless of the Specificity Value. Use this keyword only once in a selector. If it is used twice for the same selector then the Specificity rule will be followed.
#### Example
```css!
ul#fruits li.favourite{
color: red;
}
ul#fruits li{
color: blue !important;
}
```
All the list elements will turn into a blue colour regardless of the Specificity Value.
> Priority of Inline CSS will be more than Internal CSS and External CSS.
> The priorities of the External CSS file and Internal CSS file can be changed by following the cascading rule. That means, whatever comes later will be followed.
### CSS Inheritance
#### Definition
As the last names are inherited in a family same way inheritance works in CSS which inherits some property from the parent.
We will be looking at the four properties - **Default, Inherit, Initial and Unset**.
Let's take an example where we create an unordered list and add href to all the list elements:
```htmlembedded!
<ul>
<li>Default <a href="">Link</a> Color </li>
<li>Inherit <a href="">Link</a> Color </li>
<li>Initial <a href="">Link</a> Color </li>
<li>Unset <a href="">Link</a> Color </li>
</ul>
```
First, Let's assign classes to the three properties: Inherit, Initial and Unset.
```htmlembedded!
<ul>
<li>Default <a href="">Link</a> Color </li>
<li class = "class-1">Inherit <a href="">Link</a> Color </li>
<li class = "class-2">Initial <a href="">Link</a> Color </li>
<li class = "class-3">Unset <a href="">Link</a> Color </li>
</ul>
```
### Inherit Property
Inherit is defined as the properties inherited from the parent. The properties applied to the parent are inherited by the child.
For example
```htmlembedded!
<style>
div{
color: blue;
}
</style>
<body>
<div>
<h2>
Heading
</h2>
</div>
</body>
```
The result will be that the heading tag will inherit the colour that is applied to the div element as it is the parent of the h2 tag.
If the parent is not specified then the parent will always be the body tag by default.
To understand it better, let's take "class-1" from our unordered list of inheritance properties and apply `color: inherit` to the anchor tag.
```css!
body{
color: red;
}
.class-1 a{
color: inherit;
}
```
The term inherit means that whatever the colour of the parent tag is **(the default colour of CSS is black in most browsers)**, will be applied to the anchor tag of class: class-1 as well.
### Initial Property
The initial property will always take the default properties.
```css!
body{
color: red;
}
.class-1 a{
color: inherit;
}
.class-2 a{
color: initial;
}
```
The color of the class-2 anchor tag will take the default color i.e., black.
> There exists properties that cannot be inherited like display, and columns etc., You can check [w3schools](https://https://www.w3schools.com/cssref/css3_pr_columns.php) for more details on the properties.
### Unset property
Unset depends on the inherited value.
Unset checks if any properties in the body can be inherited will be inherited.
For example:
```css
body{
color: red;
display: inline;
}
.class-1 a{
color: inherit;
}
.class-2 a{
color: initial;
}
.class-3 a{
color: unset;
}
```
### CSS Overflow
When the content goes out of the container is known as **Overflow**.
Let's take an example where we create a div element and add content of 100 words to it. We create a container and give it a static width and height.
```htmlembedded!
<style>
.content-box{
border: 2px solid tomato;
width: 200px;
height: 200px;
}
</style>
<body>
<div class = "content-box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.
</div>
</body>
```
The result will be that the box will not contain the whole content and it will create an overflow condition. Therefore, we will use overflow to overcome it. We can use auto, hidden, scroll and visible overflow properties.
#### Example
Let's understand how:
```htmlembedded!
<style>
.content-box{
border: 2px solid tomato;
width: 200px;
height: 200px;
overflow: hidden; /* the content going outside of the container will be hidden */
}
</style>
<body>
<div class = "content-box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.
</div>
</body>
```
#### Properties of Overflow
**Hidden**: The content that remains outside the container will be hidden or not visible. It does not occupy space where the content is hidden.
**Scroll**: A scroll bar is added inside the container so that you can go through the whole content inside the container.
**Auto**: It works similarly to scroll the only difference is that scroll will always show scroll inside the container while auto will only show when the content is overflowing.
**Visible**: It will make the content visible. There will be no change.
> The container takes only the space designated to it. Therefore, the overflow content will overlap with the other content added after the container.
**[Ask the learners]**
How will we apply the overflow condition if we make the container horizontal for the following div content?
```htmlembedded!
<div class = "horizontal-content">
Scaler
</div>
```
-->
```htmlembedded!
<style>
.horizontal-content{
font-size: 30px;
width: 50px;
height: 30px;
border: 2px solid black;
overflow: hidden;
}
</style>
```
We can add any other property as well it will work similarly to the vertical container.
> If you want to hide the vertical or horizontal scroll bar you can use the following syntax: `overflow-x: hidden;` or `overflow-y: hidden;`.