CSS {type : kick-off;}
Tags: programming, beginners, tutorial, css
Published: 2021-12-15 18:25:17

Hello ...what should i call you developer of cascedies whatever.

## CSS
A Cascading Style Sheet, commonly known as **CSS**, is the layer of styling over **HTML** elements, or in simpler terms, it lets you style the elements (font, size, color, and spacing) of your HTML pages and content by gently applying classes to it. CSS takes care of the presentation and helps you determine how the pages and content that you make with **HTML** are going to look and display. **CSS** will be a savior once you have learned to master the code. To master **CSS**, you first need to understand the different types of **CSS**. 

What **CSS** offers to WEB?

1. **Consistency** 
the changes to the pages of your website. By making one change to your CSS style-sheet, you can consequently make it to each page of your website.

2. **Browser Compatibility**
Browser compatibility is something that is very important and with CSS, it is easy to withhold as it addresses this issue nicely.

3. **Appearance**
it is easy to improve the look-and-feel of the website from one place as it allows you to use a various choices of extensive styles.

4. **Maintainability**
the ability to automatically correct and change every page throughout your website whenever a change is made to your website’s style sheet.

5. **Saves Time**
you only need to specify details of the styling once for any element and it will automatically apply the specified styles whenever that particular element occurs. Hence, it saves a lot of time by not forcing you to rewrite everything again and again.

Example:-
Pure HTML : [HTML](https://codepen.io/vlljcemp-the-animator/pen/poWebPm)

![Pure HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g868ydphvj3i8oyaewt7.png)

Integration CSS with the HTML : [HTML-CSS](https://codepen.io/vlljcemp-the-animator/pen/ExwWyZV)


![CSS with the HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nhx9162auwyk7zkmsbd.png)

CSS file that integrated with HTML is a style space for your HTML (font, size, color, and spacing) properties the scheme that CSS is following in coding.

## Selectors

![Selectors Scheme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ymyothku1ximlrmeulk.png)

Selector is pointer to specify a item in HTML page to apply this property as the previous example. So,if i want to select all h1 tags from my HTML file and give them font and layout property.

![tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uu3gda50iza4krv4x5ay.png)

**Types of Selector**

**Element Selector** : all `<p>` elements on the page will be center-aligned, with a red text color.

![Element Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy9tdyj0znfuplm9pih6.png)

**Id Selector** : The CSS rule below will be applied to the HTML element with id="para1".

![id Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70h66mbph34j14jxlfee.png)

**Class Selector** : all HTML elements with class="center" will be red and center-aligned

![class Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enmsjenbhqcz016hp3pk.png)

So how the the webpages before-time looks like?>

![webpages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3jeczyo9n3pfpftw5it.jpg)

With Upgrading of HTML/CSS and Browsers and protocols from web 1.0 to web 3.0, right now the world have big business just upon these modern web technologies.

**Conclusion**
The **CSS** is brush of the web developer in addition to learning framework like bootstrap and similar frameworks require solid understanding of CSS, and Backdoor. Lastly, **CSS** is the millstone of the web these days so learning it well be the first stone on your career wall.

**Learning materials**:-
[WEB DEV](https://web.dev/learn/css/)
[W3C](https://www.w3schools.com/css/)
[CODECADEMY](https://www.codecademy.com/learn/learn-css)
[DEV MOZILLLA](https://developer.mozilla.org/en-US/docs/Web/CSS)