# 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 `` 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
```
I am heading 2
```
- 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.
```
```
- 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{
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)
}
```
