# CSS- Separating style

When `<style>` code is too long, it's quite hard to see the whole code. Style code can be separated by using 

- Make a new stylesheet
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660045961395/1selFkQUl.png align="left")

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660046011313/5AfVrAirU.png align="left")

- Copy all tags under `<style>`and paste it in `mystyle.css`. Delete `<style>` from the original code.

-Import stylesheet by using 
`<link rel="stylesheet" type="text/css" href = "mystyle.css">`

```
<!-- create a style.css file in the same folder and, use it in head tag -->
<link rel="stylesheet" type="text/css" href = "(the name of CSS file).css">
```

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>Login Page</h1>
            <h5>Enter your ID and password</h5>
        </div>
        <p>ID: <input type="text" /></p>
        <p>PW: <input type="text" /></p>
        <button> Login</button>
    </div>
</body>
</html>
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660046274377/o1H_QW8iq.png align="left")

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href = "mystyle.css">
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>Login Page</h1>
            <h5>Enter your ID and password</h5>
        </div>
        <p>ID: <input type="text" /></p>
        <p>PW: <input type="text" /></p>
        <button> Login</button>
    </div>
</body>
</html>
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660046257976/ExqWgQzR1.png align="left")


