CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

CSS is like filling colors and making the body of HTML.

What is CSS?

  • CSS stands for Cascading Style Sheet, whereas the HTML is as defines the structure and content of a web page, a Cascading Style Sheet is a website document that allows us to change the representation of the HTML.

CSS allows you to change the size, style, font, and color of text also margins and padding, background colors, and border styles, etc. It can also be used to position elements on a page.`

Why CSS?

  • Styling the HTML Tags.
  • Responsive Website.
  • Animation on Websites.
  • 2D and 3D transformation of HTML elements(Heading tilt in any angle).
  • Website development process fast.

Ways to implement CSS-

  1. Inline Style( inside any tag of HTML, change in style property).
  2. Inpage Style Tag( use style tag and define property )
  3. External Style Sheet(we create another file of CSS and use it)(Most Important).

carbon.png

--

``` tag is used to link the external CSS file to the HTML file, where **rel** stands for relation and **href** stands for hyperlink reference.

### Color and Background  color -

![carbon (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633017696629/PHx-IMUXv.png)

well ! this is also the inline style of CSS.

## Basics Selectors-
- It is used inpage style sheets or external style sheets.

### Types of Selectors :-
 - By Tag name like:- 
```h1, p, anchor, div, span, html, body, footer
```  etc.

![carbon (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633018049643/Sg9CB7_L2.png)
**- By Class** 
- In this we uses .(dot) operator before Class.

![carbon (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633018159740/guujM3pLC.png)

**By ID**
-In this, we use the #(hash) operator before ID.
![carbon (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633018223327/SHcqaIZHQ.png)

***Some Important Point***
- ID selector can only use one time on one page. (no same name)
-Class selectors can use multiple times on one page.

## Border Properties
- border-width
- border-style
- border-color
**Border Style** -

```solid, dotted, dashed, double, groove, ridge, inset, outset, mix

####border Shorthand-

carbon (5).png

Thanks for reading this...