# What is CSS and way to write

## What is CSS

CSS stands for cascading style sheet.CSS is a stylesheet language used to style and design HTML element on web pages.

Cascading Means that when multiple CSS rules apply to same HTML element,the browser follows a set of rules to decide which style should be applied.

**There are three ways to add CSS to HTML:**

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

Let understand these three ways:

1. Inline CSS

In this way CSS is written directly inside a HTML element.

**HTML:**

```html
<p style="color:brown">Welcome to CSS</p>
```

**Browser Preview:**

![](https://cdn.hashnode.com/uploads/covers/6a670b7b711c6f3b57c87574/922b525c-75a0-4abd-9346-8db67525b492.png align="center")

2. Internal CSS

In this way CSS is Written inside `<style>` tag inside `<head>` tag in the HTML document.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color:green;
        }
    </style>
</head>
<body>
    
<p>Welcome to CSS</p>
   
</body>
</html>
```

**Browser Preview:**

![](https://cdn.hashnode.com/uploads/covers/6a670b7b711c6f3b57c87574/2a1c6fa2-8db1-41dd-9457-a8f4a917f3e7.png align="center")

3. External CSS

CSS is written in a separate .css file and connected to HTML.

1. Create a new file `style.css`

![](https://cdn.hashnode.com/uploads/covers/6a670b7b711c6f3b57c87574/4c1d6572-e1a8-4954-91e0-062608a336fa.png align="center")

2. Use &lt;link> tag to connect that css file

```html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
```

**HTML:**

```html
<body>
    <p>Welcome to CSS</p>
</body>
```

In `style.css` file

```css
p{
    color:green
}
```

**Browser Preview:**

![](https://cdn.hashnode.com/uploads/covers/6a670b7b711c6f3b57c87574/6eb7df48-dc54-46e5-be8e-464cb3deaeb3.png align="center")

## What is User Agent Style Sheet

A User Agent stylesheet is the default CSS Provided by the Web browser to HTML elements.

**User agent stylesheet for button**

![](https://cdn.hashnode.com/uploads/covers/6a670b7b711c6f3b57c87574/a9f8af35-84fd-4647-9907-aa9e092990d9.png align="center")