WHy does my HTML doesn't line up with my CSS?-CodePudding

I'm following a tutorial online but I can't my HTML code to CSS (nothing happens when I change the details in css file. I have both files placed in the same folder. My CSS is in style.less file Since I only starting with this, I think maybe the problem is in the syntax but I can't figure out what it is exactly

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <title>1st project</title>
    <link rel="stylesheet" href="./reset.css"/>
    <link rel="stylesheet" href="./style.css"/>
    <link rel="stylesheet/less" type="text/css" href="style.less"/>
</head>

<body>
    <div >
        <div >
            <img src="/base/materials/4.png"/>
            <div>
                <h3>Web Development Course</h3>
                <span> Learn to code with basic paths</span>
                <button>Browse course</button>
            </div>
        </div>
    </div>
    <div >
        <nav>
            <ul>
                <li>Home</li>
                <li>Careers</li>
                <li>Blog</li>
            </ul>
        </nav>
        <img src="/base/materials/5.jpg"/>
    </div>
    <footer>
        <div>
            <img src="/base/materials/4.png"/>
            <h3>Join the list</h3>
            <span>Sign up for the list</span>
        </div>
        <div>
            <div>
                <input placeholder="Enter your email"/>
                <button>Subscribe</button>
            </div>
            <span>We won't spam</span>
        </div>
    </footer>

</body>

</html>

CSS

body {
    width: 100%;
    height: 100%;
}
.top {
    display: flex;

    .top_content {
        flex: 1;
    }

    .top_sub-content {
        background: #33A3EF;
        flex-basis: 40%;

        img {
            max-width: 100%;

        }
    }
}

CodePudding user response：

If both files are in the same location, remove the dot and slash from the beginning of the link

Before

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

After

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

CodePudding user response：

It seems that you are using two different stylesheet formats in your HTML file: CSS and LESS. In your HTML, you are including both the reset.css and style.css files, but also a style.less file.

If you want to use LESS for your styles, you will need to compile the style.less file into CSS before you can use it in your HTML. There are several tools you can use to compile LESS into CSS, such as a task runner like Grunt, or a browser-based compiler like Prepros.

Once you have compiled your style.less file into CSS, make sure to reference only the CSS file in your HTML file. You can remove the line <link rel="stylesheet/less" type="text/css" href="style.less"/> and replace it with <link rel="stylesheet" href="./style.css"/>

If you have any problems with the LESS syntax in your file, I would recommend using a LESS compiler or validator to check for any errors.