Can someone help me with my CSS to style a form that does not seem to make any changes to original p-CodePudding

I am very new to HTML and CSS (started yesterday). I was following Traversy Media's CSS crash course when some CSS was not working as it was supposed to be in the video. It was regarding a form and I tried to make sure that the code was the same and making sure that it was saved, but the Chrome page showed that the form was still the same layout as if it was just made with only plain HTML. Everything else in the CSS was working perfectly. I've tried to find solutions on the web but wasn't too sure if other people's situations would apply to mine.

This is the specific CSS that didn't work:

.my-form{
    padding:20px;
}

.my-form .form-group{
    padding-bottom:15px;
}

.my-form label{
    display:block;
}

.my-form input[type="text"], .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form input[type="submit"]{
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
}

Here's my full HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Cheat Sheet</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="box-1">
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="box-2">
            <h1>Goodbye World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="categories">
            <h2>Categories</h2>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>
                <li><a href="#">Category 3</a></li>
                <li><a href="#">Category 4</a></li>
                <li><a href="test.html">Category 5</a></li>
            </ul>
        </div>

        <form class="my-form">
            <div class="form-group">
                <label>Name: </label>
                <input type="text" name="name">
            </div>
            <div class="form-group">
                <label>Email: </label>
                <input type="text" name="email">
            </div>
            <div class="form-group">
                <label>Message: </label>
                <textarea name="message"></textarea>
            </div>
            <input class="button" type="submit" value="Submit" name="">
        </form>
    </div><!-- ./container -->
</body>
</html>

Here's my full CSS:

/*
*{
    margin:0;
    padding:0;
}
*/

body{
    background-color:#f4f4f4;
    color:#555555;

    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:normal;
    /* Same as above*/
    font:normal 16px Arial, Helvetica, sans-serif;

    line-height:1.6em;
    margin:0;
}

a{
    text-decoration: none;
    color:#000;
}

a:hover{
    color:red;
}

a:active{
    color:green;
}

a:visited{
    color:black;
}

.container{
    width:80%;
    margin:auto;
}

.box-1{
    background-color:#333;
    color:#fff;

    border-right:5px red solid;
    border-left:5px red solid;
    border-top:5px red solid;
    border-bottom:5px red solid;
    border-bottom-width:10px;
    border-top-style:dotted;

    border:5px red solid;

    padding-top:20px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;

    /* Same as above */
    padding:20px;

    margin-top:20px;
    margin:20px 0;
}

.box-1 h1{
    font-family:Tahoma;
    font-weight:800;
    font-style:italic;
    text-decoration:underline;
    text-transform:uppercase;
    letter-spacing:0.2em;
    word-spacing:1em;
}

.box-2{
    border:3px dotted #ccc;
    padding:20px;
    margin:20px 0;
}

.categories{
    border:1px #ccc solid;
    padding:10px;
    border-radius:15px;
}

.categories h2{
    text-align:center;
}

.categories ul{
    padding:0;
    padding-left:20px;
    list-style:square;
    list-style:none;
}

.categories li{
    padding-bottom:6px;
    border-bottom:dotted 1px #333;
    list-style-image: url("../images/check.png");
}

.my-form{
    padding:20px;
}

.my-form .form-group{
    padding-bottom:15px;
}

.my-form label{
    display:block;
}

.my-form input[type="text"], .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form input[type="submit"]{
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
}

Any help would be very much appreciated. Thanks in advance!

CodePudding user response：

I think the problem is here - Remove input[type="text"] , and write as below

.my-form .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form {
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
}

Let me know if this works for you or not

CodePudding user response：

I add your CSS into HTML directly and it's working. You can try by this way instead of split into another CSS file.

So I remove <link rel="stylesheet" type="text/css" href="css/style.css"> line. Please let me know if it's working.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Cheat Sheet</title>
</head>
<body>
    <div class="container">
        <div class="box-1">
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="box-2">
            <h1>Goodbye World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="categories">
            <h2>Categories</h2>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>
                <li><a href="#">Category 3</a></li>
                <li><a href="#">Category 4</a></li>
                <li><a href="test.html">Category 5</a></li>
            </ul>
        </div>

        <form class="my-form">
            <div class="form-group">
                <label>Name: </label>
                <input type="text" name="name">
            </div>
            <div class="form-group">
                <label>Email: </label>
                <input type="text" name="email">
            </div>
            <div class="form-group">
                <label>Message: </label>
                <textarea name="message"></textarea>
            </div>
            <input class="button" type="submit" value="Submit" name="">
        </form>
    </div><!-- ./container -->
</body>

<style>
body{
    background-color:#f4f4f4;
    color:#555555;

    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:normal;
    /* Same as above*/
    font:normal 16px Arial, Helvetica, sans-serif;

    line-height:1.6em;
    margin:0;
}

a{
    text-decoration: none;
    color:#000;
}

a:hover{
    color:red;
}

a:active{
    color:green;
}

a:visited{
    color:black;
}

.container{
    width:80%;
    margin:auto;
}

.box-1{
    background-color:#333;
    color:#fff;

    border-right:5px red solid;
    border-left:5px red solid;
    border-top:5px red solid;
    border-bottom:5px red solid;
    border-bottom-width:10px;
    border-top-style:dotted;

    border:5px red solid;

    padding-top:20px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;

    /* Same as above */
    padding:20px;

    margin-top:20px;
    margin:20px 0;
}

.box-1 h1{
    font-family:Tahoma;
    font-weight:800;
    font-style:italic;
    text-decoration:underline;
    text-transform:uppercase;
    letter-spacing:0.2em;
    word-spacing:1em;
}

.box-2{
    border:3px dotted #ccc;
    padding:20px;
    margin:20px 0;
}

.categories{
    border:1px #ccc solid;
    padding:10px;
    border-radius:15px;
}

.categories h2{
    text-align:center;
}

.categories ul{
    padding:0;
    padding-left:20px;
    list-style:square;
    list-style:none;
}

.categories li{
    padding-bottom:6px;
    border-bottom:dotted 1px #333;
    list-style-image: url("../images/check.png");
}

.my-form{
    padding:20px;
}

.my-form .form-group{
    padding-bottom:15px;
}

.my-form label{
    display:block;
}

.my-form input[type="text"], .my-form textarea{
    padding:8px;
    width:100%;
}

.my-form input[type="submit"]{
    background-color:#333;
    color:#fff;
    padding:10px 15px;
    border:none;
} 
</style>

</html>

CodePudding user response：

I tried your HTML/CSS on W3's Tryit Editor but included the css within the html with => https://www.w3schools.com/code/tryit.asp?filename=GUPQJOXYSWB9

Works perfect, what is your result?