How do I get the CSS file to apply correctly to my PHP/HTML code?

Question

It looks like this:

But it's supposed to look like in the video at 26:05.

There are a few things I want to ask:

Does the code still work if I want to link it to a database?
Would it work if I were to alter some of the CSS?
Is the error in the CSS or in the HTML file?

It's supposed to be on the right side of the page.

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*classes*/

.main-wrapper {
    margin: 0 auto;
    width: 1000px;
}

a {
    text-decoration: none;
}

body {
    background-color: #ccc;
}

header nav {
    width: 100%;
    height: 60px;
    background-color: #fff;
}

header nav ul {
    float: left;
}

header nav ul li {
    float: left;
    list-style: none;
}

header nav ul li a {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
}

header .nav-login {
    float: right;
}

header .nav-login form {
    float: left;
    padding-top: 15px;
}

header .nav-login form input {
    float: left;
    width: 140px;
    height: 30px;
    padding: 0px 10px;
    margin-right: 10px;
    border: none;
    background-color: #ccc;
    font-family: arial;
    font-size: 14px;
    color: #111;
    line-height: 30px;
}

header .nav-login form input button {
    float: left;
    width: 60px;
    height: 30px;
    margin-right: 10px;
    border: none;
    background-color: #f3f3f3;
    font-family: arial;
    font-size: 14px;
    color: #111;
    cursor: pointer;
}

header .nav-login form input button {
    background-color: #ccc; 
}

header .nav-login a {
    display: block;
    width: 60px;
    height: 60px;
    border: none;
    float: left;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    cursor: pointer;
}

.main-container {
    padding-top: 40px;  
}

.main-container h2 {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 50px;
    text-align: center;
}

/*signup.php*/

.signup-form {
    width: 400px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input {
    width: 90%;
    height: 40px;
    padding: 0px 5%;
    margin-bottom:4px;
    border: none;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 40px;
}

.signup-form button {
    display: block;
    margin: 0 auto;
    width: 30%;
    height: 40px;
    border: none;
    background-color: #222;
    font-family: arial;
    font-size: 16px;
    color: #111;
    cursor: pointer;
}

.signup-form button:hover {
    background-color: #111;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"></link>
        <link rel="stylesheet" type="text/css" href="style.css"></link>
    </head>
    <body>
        <header>
            <nav>
                <div class="main-wrapper">
                    <ul>
                        <li><a href="index.php">Home</a></li>
                    </ul>
                    <div clalss="nav-login">
                        <form>
                            <input type="text" name="uid" placeholder="Username/e-mail">
                            <input type="password" name="pwd" placeholder="password">
                            <button type="submit" name="submit">Login</button>
                        </form>
                        <a href="singup.php">Sign up</a>
                    </div>
                </div>
            </nav>
        </header>
</body>
</html>

Using links to external sites (youtube etc) means that, over time, even if this question is answered correctly and usefully for you, over time it will become useless, as the external links will become invalid. Please try to make a complete and small example of your issue. — Chris Cousins
– Chris Cousins, Commented Jun 20, 2018 at 2:44
Looks like a CSS issue, I recommend going through the example video to catch the missing styles. — Steven Anthony
– Steven Anthony, Commented Jun 20, 2018 at 2:52
<F12> is your best friend when troubleshooting client side of your website (including CSS) — user5550963
– user5550963, Commented Jun 20, 2018 at 2:54

PP Magno · Accepted Answer · 2018-06-20 03:01:00Z

Ok, here are some fixes:

You misspelled "class" in your html (and you don't need a </link> cllosing);
Some classes are declared on the css, but not used in the html (html:<form class="signup-form"> / css:.signup-form);
You forgot to add some css properties the video tell you to (float: left);

I've made some adjusts, but you should try to fix the rest:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*classes*/

.main-wrapper {
    margin: 0 auto;
    width: 1000px;
}

a {
    text-decoration: none;
}

body {
    background-color: #ccc;
}

header nav {
    width: 100%;
    height: 60px;
    background-color: #fff;
}

header nav ul {
    float: left;
}

header nav ul li {
    float: left;
    list-style: none;
}

header nav ul li a {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
}

header .nav-login {
    float: right;
}

header .nav-login form {
    float: left;
    padding-top: 15px;
}

header .nav-login form input {
    float: left;
    width: 140px;
    height: 30px;
    padding: 0px 10px;
    margin-right: 10px;
    border: none;
    background-color: #ccc;
    font-family: arial;
    font-size: 14px;
    color: #111;
    line-height: 30px;
}

header .nav-login form input button {
    float: left;
    width: 60px;
    height: 30px;
    margin-right: 10px;
    border: none;
    background-color: #f3f3f3;
    font-family: arial;
    font-size: 14px;
    color: #111;
    cursor: pointer;
}

header .nav-login form input button {
    background-color: #ccc; 
}

header .nav-login a {
    display: block;
    width: 60px;
    height: 60px;
    border: none;
    float: left;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    cursor: pointer;
}

.main-container {
    padding-top: 40px;  
}

.main-container h2 {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 50px;
    text-align: center;
}

/*signup.php*/

.signup-form {
    width: 600px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input {
    float: left;
    width: 90%;
    height: 40px;
    padding: 0px 5%;
    margin-bottom:4px;
    border: none;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 40px;
}

.signup-form button {
    float:left;
    display: block;
    margin: 0 auto;
    width: 30%;
    height: 40px;
    border: none;
    background-color: #eee;
    font-family: arial;
    font-size: 16px;
    color: #111;
    cursor: pointer;
}

.signup-form button:hover {
    background-color: #111;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <div class="main-wrapper">
                    <ul>
                        <li><a href="index.php">Home</a></li>
                    </ul>
                    <div class="nav-login">
                        <form class="signup-form">
                            <input type="text" name="uid" placeholder="Username/e-mail">
                            <input type="password" name="pwd" placeholder="password">
                            <button type="submit" name="submit">Login</button>
                        </form>
                        <a href="singup.php">Sign up</a>
                    </div>
                </div>
            </nav>
        </header>
</body>
</html>

To be honest, I didn't fully understand your questions, but I'll try to answer anyway:

I don't see a problem linking with a database, since there is nothing related to a DB on your code...
CSS is just mostly visuals, so it won't alter the functionality of your code if you change it.
In this case, the error is in both CSS and HTML.

Anyway, hope this can help you.

thank you so muchive been going at it for hours trying to find out what was wrong with the css and focused so much on it that i didnt even realize there could be a mistake in the html, ive been learning how to code css in code academy and thought i would give this a try, i also did go over the html but the mistake was so basic i skipped over it without noticing because who misspells class.

Jon P · Accepted Answer · 2018-06-20 05:42:44Z

0

before i even say anything, its <link rel="stylesheet" href="style.css"> and not <link rel="stylesheet" type="text/css" href="style.css"></link>. You've closed the tags. That's probably why it isn't working. Anyways, here's another solution.

I found this answer on stackoverflow that fixes your issue:

You have to surround the CSS with a tag:

<?php include 'header.php'; ?>
<style>
<?php include 'CSS/main.css'; ?>
</style>

...PHP include works fine with .css ending too. In this way you can even use PHP in your CSS file. That can be really helpful to organize e.g. colors as variables.

edited Jun 20, 2018 at 5:42

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

answered Jun 20, 2018 at 3:08

Cephas

3,5952 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

How do I get the CSS file to apply correctly to my PHP/HTML code?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related