CSS

Cascading Styles Street is used to give style to our web page. If HTML is considered to be our skull then CSS is our body. CSS is basically used to make our websites beautiful. We can make our websites without CSS also but it will not look good. We use to give colour, background - colour, margins, padding etc to our webpages. CSS follow top down approach, so priority is given to that style which is written later.

Ways To Add CSS

1. Inline CSS
2. Internal CSS
3. External CSS

1. Inline CSS

We write CSS properties inside a HTML tag. We used style attribute to write CSS properties.

Eg.

2. Internal CSS

We write CSS inside the same HTML file. We write our CSS inside tag which is written inside tag.

Eg.

3. External CSS

We write CSS in an external file and import in our HTML file. We can import the CSS file like this

Eg.

CSS Selectors

CSS selectors is a way to target and HTML element to give style to them. There are different types of CSS selectors. We will study all the common selectors which are used.

Types of CSS Selectors

1. Universal Selector

It is used to target an entire HTML page. It select an entire HTML page.

Syntax:

*{
style properties
}

Eg.

2. Individual Selector

It is used to select a particular element in a HTML page.

Syntax:

elementname{
style properties
}

Eg.

3. Class Selector

It is used to target all the elements in HTML in which the particular class is applied.

Syntax

.classname{
style properties
}

Eg.

4. Id Selector

It selects an element which has that particular id. There should be only one element which has the given ID. The main difference between a class selector and ID selector is that a single class can be applied to more than one elements but we should not apply same id to 2 or more elements.

Syntax

#IDname{
style properties
}

Eg.

5. AND Selector(Chained)

It is like AND operation. It is used to basically chained the selector. It will select only that element which matches all the selectors. It will not select the element even if one thing is missing.

Syntax

li.bg-black.text-white{
        background-color: #000;
        color: #ef9323;
        style
      }

    <ul>
      <li class="bg-black text-white">item1</li>
      <li class="bg-black text-yellow">item2</li>
      <li >item3</li>
      <li >item4</li>
      <li>item5</li>
    </ul>

This will target only the item1 and not item 2 as item2 does not have text-white class.

Eg.

6. Combined Selector

It is used to target two or more elements. We can select as many element we want by just separating them by a Comma(,).

Syntax

p,li,span{
style
}

Eg.

This has selected every span and li elements.

7. Inside Selector(Descendant Combinators)

It selects all the elements which are inside the specified tag. They are space separated elements.

Syntax

A B{
style
}

It will only target B element which is inside A and will not effect other elements.

Eg.

This targeted only li which are inside div and inside ul.

8. Direct Child

It targets only those elements which are direct child of the previous element. The ">" sign is used to denote direct child. The main difference between Direct Child and Inside Selector is that direct child select its direct child element only.

Syntax

A>B

It will only select the A which are direct child of B.

Eg.

It has selected only I Am Direct Child of li and not I am not direct child of li. As I am not direct child of li has span as its parent element.

9. Sibling Selector("+" or "~")

9.1 ~

This Sibling Selector is used to target all the siblings of the second element which follows the first element.

Syntax

A~B{
Style
}

Eg.

This has targeted all the p tags which are after sibling class.

9.2 +

This Sibling Selector is used to target only the immediate sibling of the second element which follows the first element.

Syntax

A+B{
Style
}

Eg.

This has targeted only the p tag which was after the sibling class.

Pseudo Selectors

Pseudo selectors are selectors which are used to give style a specific part of selected element. We used ":" colon to use pseudo class. For eg if we use

button:hover{
style
}

It will apply this style when someone hovers over a button.

There are many types of pseudo selectors but we will study about the most common one.

Types Of Pseudo Selectors

1. ::before
2. ::after
3. :hover

1. :before

This is used to insert something before the content of selected element. We need to add content inside the CSS to make this work.

Syntax

A::before{
style
}

Eg.

2. ::after

This is used to insert something after the content of selected element. We need to add content inside the CSS to make this work.

Syntax

A::after{
style
}

Eg.

3. :hover

This applies style to an element when we hover over it.

Syntax

A:hover{
style
}

Eg.

The Background color property is applied only when we are hovering over the button.

Entire Code

Thank You..