mirror of
https://github.com/dholerobin/Lecture_Notes.git
synced 2025-03-16 14:19:58 +00:00
315 lines
9.6 KiB
Markdown
315 lines
9.6 KiB
Markdown
![]() |
# 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.
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
- 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.
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
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:
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
- 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.
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
- 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.
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
|
||
|
- **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.
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
- **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
|
||
|
|
||
|

|
||
|
|
||
|
- 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.
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
- **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.
|
||
|
|
||
|
|
||
|

|
||
|
[
|
||
|
|
||
|
- 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:
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
- **Solution**:
|
||
|
First, we will add a style tag and then write all the CSS provided in the question like this:
|
||
|
|
||
|
|
||
|

|
||
|
|
||
|
|
||
|
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)
|
||
|
}
|
||
|
```
|
||
|
|
||
|

|
||
|
|