[HTML&CSS]Why CSS file doesn't apply to html? :/ :/

Question

I write HTML file and CSS file and operate in Chrome but I think CSS file doesn't apply to HTML file...

I don't know why... but I think I documented code properly

here is directory enter image description here

and this is What Problematic code

* {
  margin:0;
  padding:0;
}
body {
  font-family:"맑은 고딕", "돋움";
  font-size:12px;
  color:#444444;
}
ul {
  list-style-type:none;
}
.clear {
  clear:both;
}
#wrap {
  width:970px;
  margin:0 auto;
}
/* 상단 헤더 */
header {
  height:100px;
  position:relative;
}
header #logo {
  position:absolute;
  top:10px;
  left:20px;
}
header #top_menu {
  position:absolute;
  top:10px;
  left:770px;
}
header #main_menu{
  width:757px;
  height:38px;
  background-image:url("../img/main_menu_bg.png");
  background-repeat:no-repeat;
  position:absolute;
  top:40px;
  left:210px;
}
header #main_menu li {
  display:inline-block;
  margin:12px 30px 0 50px;
  font-size:13px;
}
header #main_menu a:link {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:hover {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:visited {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:active {
  text-decoration:none;
  color:#ffffff;
}
aside {
  width:190px;
  float:left;
}
aside #login_box {
  width:186px;
  heigth:120px;
  border:solid 1px #dddddd;
}
aside #login_title {
  margin:10px 0 0 10px;
}
aside #input_button {
  margin:10px 0 0 10px;
}
aside #login_input {
  float:left;
}
aside #login_btn {
  float:left;
  margin:3px 0 0 5px;
}
aside #login_input input {
  width:100px;
  height:20px;
  border:solid 1px #dddddd;
}
aside #login_input li {
  margin-top:2px;
}
aside #join_search {
  margin: :10px 0 0 5px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="/css/common.css?">
<link rel="stylesheet" type=="text/css" href="/css/header.css?">
<link rel="stylesheet" type=="text/css" href="/css/footer.css?">
<link rel="stylesheet" type=="text/css" href="/css/main.css?">
</heda>
<body>
<div id="wrap">
  <header>
    <a href="index.html"><img id="logo" src="img/logo.png">
    <nav id="main_menu">
      <ul>
        <li><a href="board_list.html">자유 게시판</a><li>
        <li><a href="#">기타 연주</a><li>
        <li><a href="#">공동 구매</a><li>
        <li><a href="#">연주회 안내</a><li>
        <li><a href="#">회원 게시판</a><li>
      </ul>
    </nav>
  </header> <!-- header -->
  <aside>
    <article id="login_box">
      <img id="login_title" src="img/ttl_login.png">
      <div id="input_button">
        <ul id="login_input">
          <li><input type="text"></li>
          <li><input type="password"></li>
        </ul>
        <img id="login_btn" src="img/btn_login.gif">
      </div>
    <article>
  </aside>
</div><!-- wrap -->
</body>
</html>

and this is the output enter image description here

so I want to know why CSS file doesn't work :/

you have to remove the starting `/` from all the CSS include rules: `/css/common.css` => `css/common.css`. That is not the best solution for including CSS files, but it should work — Cornel Raiu, Apr 25 '20 at 02:46

score 0 · Answer 1 · edited Aug 30 '20 at 16:20

If you check the console of the browser you will most probably have the failing CSS includes and you will see from where it tries to load them.

By using href="/css/common.css" it tries to load the styles from the base domain so, for example if your URL to access the website is: http://localhost/Ch12_Make_commuSite/index.html the CSS files will be loaded from here: http://localhost/css/common.css which is definitely not correct.

It works exactly like the src for the images which you got correctly.

You can read more here

Here is a solution that should work

* {
  margin:0;
  padding:0;
}
body {
  font-family:"맑은 고딕", "돋움";
  font-size:12px;
  color:#444444;
}
ul {
  list-style-type:none;
}
.clear {
  clear:both;
}
#wrap {
  width:970px;
  margin:0 auto;
}
/* 상단 헤더 */
header {
  height:100px;
  position:relative;
}
header #logo {
  position:absolute;
  top:10px;
  left:20px;
}
header #top_menu {
  position:absolute;
  top:10px;
  left:770px;
}
header #main_menu{
  width:757px;
  height:38px;
  background-image:url("../img/main_menu_bg.png");
  background-repeat:no-repeat;
  position:absolute;
  top:40px;
  left:210px;
}
header #main_menu li {
  display:inline-block;
  margin:12px 30px 0 50px;
  font-size:13px;
}
header #main_menu a:link {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:hover {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:visited {
  text-decoration:none;
  color:#ffffff;
}
header #main_menu a:active {
  text-decoration:none;
  color:#ffffff;
}
aside {
  width:190px;
  float:left;
}
aside #login_box {
  width:186px;
  heigth:120px;
  border:solid 1px #dddddd;
}
aside #login_title {
  margin:10px 0 0 10px;
}
aside #input_button {
  margin:10px 0 0 10px;
}
aside #login_input {
  float:left;
}
aside #login_btn {
  float:left;
  margin:3px 0 0 5px;
}
aside #login_input input {
  width:100px;
  height:20px;
  border:solid 1px #dddddd;
}
aside #login_input li {
  margin-top:2px;
}
aside #join_search {
  margin: :10px 0 0 5px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="css/common.css?">
<link rel="stylesheet" type=="text/css" href="css/header.css?">
<link rel="stylesheet" type=="text/css" href="css/footer.css?">
<link rel="stylesheet" type=="text/css" href="css/main.css?">
</heda>
<body>
<div id="wrap">
  <header>
    <a href="index.html"><img id="logo" src="img/logo.png">
    <nav id="main_menu">
      <ul>
        <li><a href="board_list.html">자유 게시판</a><li>
        <li><a href="#">기타 연주</a><li>
        <li><a href="#">공동 구매</a><li>
        <li><a href="#">연주회 안내</a><li>
        <li><a href="#">회원 게시판</a><li>
      </ul>
    </nav>
  </header> <!-- header -->
  <aside>
    <article id="login_box">
      <img id="login_title" src="img/ttl_login.png">
      <div id="input_button">
        <ul id="login_input">
          <li><input type="text"></li>
          <li><input type="password"></li>
        </ul>
        <img id="login_btn" src="img/btn_login.gif">
      </div>
    <article>
  </aside>
</div><!-- wrap -->
</body>
</html>

punter147 · Accepted Answer · 2020-04-25T03:17:51.300

0

There seems to be some problem with the file paths specified in the link href of the css files. Instead of mentioning "/css/common.css" if you write "css/common.css". The styles should load given the directory structure is as posted in the image.

edited Apr 25 '20 at 03:17

answered Apr 25 '20 at 02:54

punter147

302
2
7

score 0 · Answer 3 · answered Apr 25 '20 at 03:33

0

Check your css pathing used in the css, according to your screenshot you need to remove the / from the start, also i adivce you to open the consil of chrome that way you cann see the pathing issue

answered Apr 25 '20 at 03:33

OUSSAMA BEY GAHAR

83
1
1
8

[HTML&CSS]Why CSS file doesn't apply to html? :/ :/

3 Answers3