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

Question

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 class="top">
        <div class="top_content">
            <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 class="top_sub-content">
        <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%;

        }
    }
}

Answer 1

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"/>

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

Question

1 answers

solution1
1 2023-02-01 00:29:34

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

Question

1 answers

solution1 1 2023-02-01 00:29:34

solution1
1 2023-02-01 00:29:34