0

everybody. I am following a tutorial to create a register and login system, I am doing it for the first time. I am not being able to style the HTML form that is in the PHP file. I just have one folder with 6 files (error.php, index.php, login.php, register.php, server.php, style.css) So far I have just wrote code in the register.php and style.css files. And I get this messages from the console in the register.php file: 1- "The stylesheet http://localhost/registration/register.php/style.css was loaded as CSS even though its MIME type, “text/html”, is not “text/css”."

2- "Ruleset ignored due to bad selector."

What's wrong? I am working with XAMPP

This is the code:

register.php:

<?php
include('server.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
  <h2>Register</h2>
</div>

<form method="post" action="register.php">
<?php
include('errors.php');
?>
 <div class="input-group">
    <label>Username</label>
    <input type="text" name="username" value="<?php
echo $username;
?>">
  </div>
  <div class="input-group">
    <label>Email</label>
    <input type="email" name="email" value="<?php
echo $email;
?>">
  </div>
  <div class="input-group">
    <label>Password</label>
    <input type="password" name="password_1">
  </div>
  <div class="input-group">
    <label>Confirm password</label>
    <input type="password" name="password_2">
  </div>
  <div class="input-group">
    <button type="submit" class="btn" name="reg_user">Register</button>
  </div>
  <p>
      Already a member? <a href="login.php">Sign in</a>
  </p>
  </form>
</body>
</html>

style.css:

    * {
  margin: 0px;
  padding: 0px;
}
body {
  font-size: 120%;
  background: #F8F8FF;
}

.header {
  width: 30%;
  margin: 50px auto 0px;
  color: white;
  background: #5F9EA0;
  text-align: center;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;
}
form, .content {
  width: 30%;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;
}
.input-group {
  margin: 10px 0px 10px 0px;
}
.input-group label {
  display: block;
  text-align: left;
  margin: 3px;
}
.input-group input {
  height: 30px;
  width: 93%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
}
.btn {
  padding: 10px;
  font-size: 15px;
  color: white;
  background: #5F9EA0;
  border: none;
  border-radius: 5px;
}
.error {
  width: 92%; 
  margin: 0px auto; 
  padding: 10px; 
  border: 1px solid #a94442; 
  color: #a94442; 
  background: #f2dede; 
  border-radius: 5px; 
  text-align: left;
}
.success {
  color: #3c763d; 
  background: #dff0d8; 
  border: 1px solid #3c763d;
  margin-bottom: 20px;
}
7
  • Did you try to replace href="style.css" with href="./style.css", you must point css to same directory as your php files Commented Jun 1, 2020 at 4:01
  • Van Tho, same result. Commented Jun 1, 2020 at 4:03
  • How about href="/registration/style.css" Commented Jun 1, 2020 at 4:05
  • Van Tho, that worked, thank you so much. Why this worked? Commented Jun 1, 2020 at 4:09
  • Because your css file is in the folder registration, not registration/register.php/style.css, normally ./style.css will works, but this case you may need to use /registration/style.css Commented Jun 1, 2020 at 4:14

1 Answer 1

0

There two ways that you can try

Replace your line

<link rel="stylesheet" type="text/css" href="style.css">

With

1: Point to current directory

<link rel="stylesheet" type="text/css" href="./style.css">

2: Point from root directory

<link rel="stylesheet" type="text/css" href="/registration/style.css">

Because your css file is in the folder /registration/, not /registration/register.php/

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.