Brush up your CSS knowledge 🚀 Part[1 of 2]
Tags: webdev, beginners, html, css
Published: 2023-07-09 07:26:22

## Introduction
Welcome 👋 to this blog. This blog is for beginners who just started the web development journey or professionals who just wanted to revise their **CSS** knowledge. We will learn the essential of **CSS**. Let's get started 🚀. One more thing for this blog I have created a [website](https://ankur0904.github.io/blog-1/CSS-I/main.html) which helps me for the demonstration purpose.

## CSS
**CSS** stands for the **Cascading Style Sheets**, which help us to style our website. _for example_ background colour, font color, font size etc.

## How to add CSS to our website?
We have three options here
- Inline CSS
- Internal CSS
- External CSS

Let's time to take a look at each of these.

## Inline CSS
This is the CSS that is applied to the particular **HTML** element with the help of **HTML attributes**. If you are not familiar with these terms I highly recommend you to read my previous [blog](https://dev.to/ankur0904/complete-html-4m32) 🤠.

Let's time to look at the code.

```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <h1 style="color: red;">Hello world</h1>
  </body>
</html>
```

You notice how we are using the **style attribute** in the `h1` element to **change the font colour** to red.

You look at the website I created for the demonstration before this code e.g. inline style and after the style.
[Before style](https://ankur0904.github.io/blog-1/CSS-I/main.html)
[After style](https://ankur0904.github.io/blog-1/CSS-I/main-inline.html)

## Internal CSS
Internal CSS is the CSS that is written inside the `<style>...</style>` tags. 
**Note:** You **MUST** include the `style` inside the `head` tag. _for example_ 
```HTML
  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
```
Let's time to look the full code.
```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
```

You can look at the live website [here](https://ankur0904.github.io/blog-1/CSS-I/main-internal.html). You will see there is no difference between this live website and the previous one. Because we are doing the same thing but in a different manner.

**Note:** Here we are using `h1{//code }` this is the `tag selector` which is selecting `h1` HTML element or tag. _We will cover more later in **this** blog_.

## External CSS
The name is self-explanatory. In this method, we are creating a separate `CSS` file _for example_ `styles.css` and write the `CSS` code and link the `HTML` file to the CSS file and everything works fine.

We can link the external CSS file to the HTML like this.
```HTML
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
```

Let's time to view the code

`index.html`
```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
```
`styles.css`
```CSS
h1 {
    color: red;
}
```
[Live website](https://ankur0904.github.io/blog-1/CSS-I/main-external.html)

**Note:** 🤨 `index.html` and `styles.css` **must** be in the same file hierarchy level.

## Time to look at CSS selectors

We are covering the most commonly used selectors in CSS. If you want to learn more click [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)

- Element Selector
- Class Selector
- ID Selector

_We are writing all the code below in the `styles.css` file ._😇

## Element Selector
This selector helps us to select the HTML element simply by using the `element or tag` name.
_for example_
`index.html`
```HTML
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
```
`styles.css`
```CSS
h1 {
    color: red;
}
```
[Live website](https://ankur0904.github.io/blog-1/CSS-I/main-element.html)

### This CSS code is selecting the `h1` element.

## Class Selector
The class selector is used to select the element by its `class name`. In the element we have to define a `attribute` named `class` and in the `CSS` file we have to select the class name by `.` _for example_ `.heading`.

**Note:** 🤨 _A HTML element may have different - different class names_

`index.html`
```HTML
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 class="heading">Hello world</h1>
  </body>
</html>
```
`styles.css`
```CSS
.heading {
    color: red;
}
```
[Live website](https://ankur0904.github.io/blog-1/CSS-I/main-class.html)

## ID Selector
Same as the class selector the `id` selector selects the element by its `id name` and in the `CSS` file we have to select the id name by `#` _for example_ `#main-heading`.

`index.html`
```HTML
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 class="heading" id="main-heading">Hello world</h1>
  </body>
</html>
```
`styles.css`
```CSS
.heading {
    color: red;
}

#main-heading{
   color: blue;
}
```
[Live website](https://ankur0904.github.io/blog-1/CSS-I//main-id.html)

**Note:**
- 🤨 _A HTML element must **NOT** have different - different `ID` names. The id name **MUST** be unique for the different elements_
- In the example, you will observe the final colour will be `blue` because the priority of the `id selector` is high than the `class selector`.

## You got it 🤩
You revised a lot of fundamentals for the CSS. Thanks for reading till the end. If you have any feedback, the comment section is yours.

Till then let's grow together.
[Code](https://github.com/ankur0904/blog-1/tree/main/CSS-I)


Contact me: ankursingh91002@gmail.com 
            [LinkedIn](https://www.linkedin.com/in/ankur-singh-161458227/)
            [Twitter](https://twitter.com/ankursingh91002)