I have 2 html files in the project, for each of them there is a css file.

HTML 1:

<!DOCTYPE html> <html> <head> <title>Company</title> <link rel="stylesheet" type="text/css" href="./style/company.css" /> </head> <body> <h1 align="center">Hello Company</h1><br/><br/> <div id="result_form"> <form id="company" method="GET" action="CompanyServlet"> <a href="./html/coupon_html_page.html" class="create_link">Create Company</a><br/><br/> <input type="button" value="Remove Company" class="btn" /><br/><br/> <input type="button" value="Update Company" class="btn" /><br/><br/> <input type="button" value="Get Coupon" class="btn" /><br/><br/> <input type="button" value="Get All Coupons" class="btn" /><br/><br/> <input type="button" value="Get Coupon By Type" class="btn" /><br/><br/> <input type="button" value="Get Coupon Till Price" class="btn" /><br/><br/> <input type="button" value="Get Coupon Till Date" class="btn" /><br/><br/> </form> </div> </body> </html>

CSS 1:

 @CHARSET "windows-1255"; body { background-image: url('../img/backgroundLogin.gif'); background-size: 100%; } h1{ color: #191919; font-size: 300%; margin-top: 30px; text-shadow: 2px 2px white; } .create_link{ text-decoration: none; color: white; font-size: 20pt; margin-left: 80px; text-shadow: 2px 2px black; }

HTML 2:

 <!DOCTYPE html> <html> <head> <title>Coupon</title> <link rel="stylesheet" type="text/css" href="./style/coupon.css" /> </head> <body> <h1>Coupon</h1> <div> <form action="CouponServlet" method="get"> <input name="coupon_title" type="text" size="25" maxlength="30" value="" class="textField_title" placeholder="Title"/> <input name="coupon_message" type="text" size="25" maxlength="30" value="" class="textField_message" placeholder="Message"/> <input name="coupon_image" type="text" size="25" maxlength="30" value="" class="textField_image" placeholder="Image?"/><br/> <a class="text_Date">Start date</a> <input name="coupon_start_date" type="date" size="25" maxlength="30" value="" class="Date"/> <a class="text_Date">End date&nbsp;</a> <input name="coupon_edn_date" type="date" size="25" maxlength="30" value="" class="Date"/><br/> <input name="coupon_price" type="text" size="25" maxlength="30" value="" class="textField_price" placeholder="Price"/> <input name="coupon_amount" type="text" size="25" maxlength="30" value="" class="textField_amount" placeholder="Amount"/><br/> <p><select name="coupon_Type"> <option>Select Coupon type</option> <option value="RESTAURANS">Restaurant</option> <option value="ELECTRICITY">Electricity</option> <option value="FOOD">Food</option> <option value="HEALTH">Health</option> <option value="SPORTS">Sports</option> <option value="CAMPING">Camping</option> <option value="TREVELLING">Trevelling</option> </select></p> <input type="submit" value="Submit" class="button_sub" id="btn"/> <input type="reset" value="Reset" class="button_res" id="btn"/> </form> </div> </body> </html>

CSS 2:

 @CHARSET "windows-1255"; body { background-image: url('../img/backgroundLogin.gif'); background-size: 100%; } h1{ color: white; font-size: 45pt; margin-left: 80px; text-shadow: 2px 2px black; } div { margin-left: 260px; width: 700px; height: 380px; background: #335CAD; border: 3px solid #fff; border-radius: 15px; } select{ margin-left: 260px; margin-top: 35px; padding: 7px 15px; border-radius: 5px; } /*Submit button*/ .button_sub{ margin-left: 240px; margin-top: 35px; padding: 7px 15px; border-radius: 5px; background-color: green; color: white; text-shadow: 2px 2px black; } /*Reset button*/ .button_res{ margin-left: 60px; margin-top: 35px; padding: 7px 15px; border-radius: 5px; background-color: green; color: white; text-shadow: 2px 2px black; } /*Text fields*/ .textField_title{ margin-left: 60px; margin-top: 30px; border-radius: 3px; } .textField_message{ margin-left: 20px; margin-top: 30px; border-radius: 3px; } .textField_image{ margin-left: 20px; margin-top: 30px; border-radius: 3px; } .textField_price{ margin-left: 140px; margin-top: 60px; border-radius: 3px; } .textField_amount{ margin-left: 80px; margin-top: 40px; border-radius: 3px; } /*Title - Start Date & End Date*/ .text_Date{ margin-left: 90px; color: white; text-shadow: 2px 2px black; } /*Date fields*/ .Date{ margin-left: 10px; margin-top: 50px; border-radius: 3px; }

With the first html and css everything is fine, everything works.

The problem with the file number 2, but rather with the file css. HTML is displayed but css is not.

Very strange because file location is the same.

I check all this in Eclipse on the Tomcat 8 server.

enter image description here

  • Are there any errors in the console? - Pyramidhead
  • No, it’s empty. - tarasula
  • I strongly recommend moving the <title> and <link> tags from <body></body> to <head></head> . - Pyramidhead
  • Thanks, corrected! - tarasula
  • The <br /> tag after <title> also not needed. It is also strange that you have the Hebrew encoding set in CSS. Check the file name coupon.css for Cyrillic. Perhaps the first letter is Russian "c", not English "c". - Pyramidhead

1 answer 1

Try to specify the path to exit the html folder "../"

 <link rel="stylesheet" type="text/css" href="../style/company.css" />
  • Strange that the first HTML code works with one point ... - tarasula
  • I corrected my answer. When you write 2 points "../", you exit the folder in this way. Since your html is in the child directory - you need to go to the parent directory, then to refer to the style directory - "../style/company.css" - azhirov1991
  • You have the same method used in css - background-image: url ('../ img / backgroundLogin.gif'); - azhirov1991