<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>CSS 적용</title>
    <!-- style태그 or css 파일 링크 -->
    <link rel="stylesheet" href="style.css">
    <style>
      /* 태그 선택자 { CSS 속성 } */
      body {
        /* 폰트 글꼴 변경 */
        font-family: cursive;
      }
      /* .은 클래스 */
      .male{
        color: darkgreen;
      }
      .female {
        color: blueviolet;
      }
      ul{
        /* 앞의 글머리기호 제거 */
        list-style: none;
      }
      /* # 은 id 를 의미 */
      #ceo {
        background-color: darkkhaki;
      }
    </style>
  </head>
  <body>
    <h1>별다방 카페</h1>
    <h2>운영진</h2>
    <ul>
      <li class="male" id="ceo">X</li>
      <li class="female">Y</li>
    </ul>
    <h2>매니저</h2>
    <ul>
      <li class="male">P</li>
      <li class="female">Q</li>
    </ul>
    <h2>알바</h2>
    <ul>
      <li class="male">A</li>
      <li class="female">B</li>
      <li class="male">C</li>
      <li class="female">D</li>
    </ul>
  </body>
</html>

/* 태그 선택자 { CSS 속성 } */
body {
    /* 폰트 글꼴 변경 */
    font-family: cursive;
  }
  /* .은 클래스 */
  .male{
    color: darkgreen;
  }
  .female {
    color: blueviolet;
  }
  ul{
    /* 앞의 글머리기호 제거 */
    list-style: none;
  }
  /* # 은 id 를 의미 */
  #ceo {
    background-color: darkkhaki;
  }

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>CSS 적용</title>
    <!-- style태그 or css 파일 링크 -->
    <link rel="stylesheet" href="style.css">
    <style>
      /* CSS */
    </style>
  </head>
  <body>
    <h1>별다방 카페</h1>
    <h2>운영진</h2>
    <ul>
      <li class="male" id="ceo">X</li>
      <li class="female">Y</li>
    </ul>
    <h2>매니저</h2>
    <ul>
      <li class="male">P</li>
      <li class="female">Q</li>
    </ul>
    <h2>알바</h2>
    <ul>
      <li class="male">A</li>
      <li class="female">B</li>
      <li class="male">C</li>
      <li class="female">D</li>
    </ul>
  </body>
</html>

내용이 별로 많지 않으면 그냥 html 에 같이 써주면 되지만

많은 경우 파일을 따로 만들어서 링크를 걸어준다