# CSS For Beginners (Cascading Style Sheets)
**CSS (Cascading Style Sheets)** is what makes the web pages look good and presentable. It's an essential part of modern Web Development and a must-have skill for any web designer and developer.
In this article, I will give you a quick introduction to CSS to help you get started with CSS.
## **Getting Started**
Let's Start with learning the types of CSS we can include in our HTML elements.
## Inline CSS
First off, We can include CSS directly in our HTML elements. For this, we make use of the "style" attribute and then we provide properties to it.
`
style = "color : blue"> Hello World !
`
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671945498797/ad183445-eb50-4173-b48a-2b974cf8c603.png align="center")
Here we are giving it the property of colour and the value of the colour is set to blue, which results in the Changing of the colour of the text "Hello world !" into blue as the colour property of the `
` tag has been set to blue. We can also set multiple properties inside the `
```
In the style element, we can give the styling to our HTML elements by selecting the element(s) and providing styling attributes. Just like we applied the `color` property to the `h1` element above
## External CSS
The third and most recommended way to include CSS is using an external stylesheet. We can create a stylesheet with a `.css` extension, and include its link in the HTML document, like this :
```css
```
In the above code, I have included the link to the `style.css` file using the `link` element. We then write all our CSS in a separate stylesheet called `style.css` so that it's easily manageable.
```css
h1 {
color : blue;
}
```
This stylesheet can also be imported into other `HTML` files, so this is great for reusability.
## CSS Selectors
CSS is a design language which is used to style `HTML` elements. And in order to style elements, you first have to select them. You've already seen a glimpse of how this works, but let's dive a bit deeper into CSS selectors, and look at three different ways you can select `HTML` elements.
* **Element**
The first way to select an HTML element is by simply using the name, which is what we did above. Let's see how it works :
```css
h1{
font-size : 20px;
}
p{
color : green;
}
div{
margin : 10px;
}
```
The example above is almost self-explanatory. We are selecting different elements like `h1` , `p` , `div` and giving them different style attributes. The `font-size` controls the size of the text, `color` sets the text colour, and `margin` adds spacing around the element.
* **Class**
Another way of selecting HTML elements is by using class attribute. In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well.
Let's see it in action :
```css
This is the Heading
```
```css
.container {
margin : 10px;
}
```
In the code above I have assigned the class `container` to the div element. In the stylesheet, we select our class using `.classname` format and giving it a `10px` margin.
* **ID**
Like classes, we can also use IDs to select HTML elements and apply styling to them. The only difference between classes and IDs is that one ID can be assigned to only one HTML element.
```css
This is a paragraph
```
```css
#para{
color : green;
font-size : 16px;
}
```
The example above displays how we assign an ID to the paragraph element and later use the ID selector in the stylesheet to select the paragraph and apply the style to it.
### Fonts & Colors
CSS provides us with literally hundreds of options for playing with fonts and colours and making our HTML elements look pretty. We can choose from two types of font family names :
1. Generic Family: a group of font families with a similar look (like 'serif' or 'Monospace').
2. Font Family: a specific font family (like 'Times New Roman' or 'Arial')
For colours, we can use predefined color names, or RGB,HEX,HSL,RGBA,HSLA values.
```css
CSS is cool ...!!!!
```
```css
.container{
width : 500px;
height : 100px;
background-color : lightcyan;
text-align : center;
}
.heading1{
font-family : 'Courier New';
color : tomato;
}
```
* As we can see in the above example, we have a div element with the class of `container`. Inside the div, there is an `h1` tag with some text inside it.
* In the stylesheet, we select the container class as .container and set its `width` , `height` , `background-color` , and `text-align`.
* Finally, we select the `.heading1` class - which is applied to the `h1` tag - and give it the attributes of `font-family` and `color`.
## Conclusion
This is all about CSS at the Beginning and good to go with the styling of the websites by applying the same rules to design and style our beautiful website.
Thanks for reading! My name is Angan Koner. I'm A student of B.tech in Engineering and I am interested in Web Development, I have chosen it as a career option for me.
I am a junior developer, Thanks for reading. Hope you like it.