Css is not recognized

Question

0.00/5 (No votes)

See more:

I'm building a small CMS project, some styling is necessary, obviously, and no matter how I try to hook my css to HTML it just does not work. I guess it's a syntax typo, but after going through the files a dozen times I can't find it.

header include:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Junior Task</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="resources\styles\style.css">
</head>
<body class="">
    <div id="wrapper">
        <div class="secondarynav">
            <div id="p_list">Product List</div>
             <a href="<?php echo SITE_PATH; ?>product.php "><button id="add">Add</button></a> 
            <button id="m_delete">Mass Delete</button>
        </div>
        <hr>
    

    <h1><?php echo SITE_NAME; ?></h1>

    <ul class="nav">
        <li class="active">

        </li>
    </ul>

footer include:

        <div id="footer">
            <hr>
            <div id="bottom_txt">Scandiweb Test Assignment</div>
        </div>
    </div>
</body>
</html>

home view file:

<?php include('includes/public_header.php'); ?>

<div id="content">
    <ul class="products">
        <li>
            <form action=""><input type="checkbox" id="mass_delete"></form>
           <div>SKU</div>
           <br>
           <div>Name</div>
           <br>
            <div>1.00$</div>
           <br>
           <div>Type</div>
        </li>
        <li>
            <form action=""><input type="checkbox" id="mass_delete"></form>
           <div>SKU</div>
           <br>
           <div>Name</div>
           <br>
            <div>1.00$</div>
           <br>
           <div>Type</div>
        </li>
        <li class="last">
            <form action=""><input type="checkbox" id="mass_delete"></form>
           <div>SKU</div>
           <br>
           <div>Name</div>
           <br>
            <div>1.00$</div>
           <br>
           <div>Type</div>
        </li>
    </ul>
</div>

<?php include('includes/public_footer.php'); ?>

SASS main file

@import '_header';
@import '_footer';

What I have tried:

I've tried changing back slashes to forward slashes in the link to css. I, also, tried writing style with no SASS, tried changing the imports format in the SASS main file. Double, triple checked for syntax errors. Tried installing and uninstalling any VS Code extensions with custom settings, didn't do nothing...

Posted 29-Dec-20 22:15pm

Demetri K.2

Updated 30-Dec-20 1:52am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2020-12-30T01:52:00

Solution 1

Some bits and pieces:
I'd use

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

so maybe add the type. Probably not the problem, but 'type=' does belong there.

BUT - since you reference style.css and do not give a hint as to what's in it, it could contain any sort of errors and no one reading your question could help you. It's contents are really critical !

Ultimately, especially since you have php in your webpage, is VS really a good place to work from? It's not exactly what Microsoft would want you to do. It's making you jump through hoops (with the imports statements, for example) that are not really necessary for a webpage. Try just plain vanilla to make your page, CSS, etc. and see how that works (which would point to SASS as the problem) or, with SASS truly out of the way, you can find and fix errors. All without the heavy overhead that one probably gets from the VS environment "help".

Posted 30-Dec-20 1:52am

W∴ Balboos, GHB

Updated 30-Dec-20 1:54am

v2

Comments

Demetri K.2 30-Dec-20 8:04am

The actual CSS has the bare-bones lines of code in it. I can show it, but I don't think it's the problem. And I'm using SASS because the company that gave me this task asked for SASS to be in the project.

#bottom_txt {
font-size: 35px;
text-align: center;
color: blue;
}
/*# sourceMappingURL=style.css.map */

W∴ Balboos, GHB 30-Dec-20 8:52am

My sympathy for having a client tell you how to code.

I'd do a typical problem isolation by rolling back to the simplest level and then incrementing forward.
First - put the style in the element via a style= attribute and make sure that works
Second - go back to your sheet but change it from a "#" declaration to "." and then add that class as an attribute to your element first, as a in-file declaration and then via your external style sheet. This also checks your path!
Third, - go back to "#" if you think it necessary.
Finally, when all of the above are satisfactorily settled, return it to SASS.

If it works - done - you probably found an error somewhere. Done.

If it doesn't work, SASS is the enemy. Have you ever used it before? I have not - my editor is not VS, but MS Expressions 4 (obsolete, simple, and obedient). Do you have a simple and working SASS page for comparison?

Just break it down to small pieces and isolate the problem.

Demetri K.2 30-Dec-20 9:10am

I'll try, thanks for a comprehensive answer.

I have used SASS before. it has some quirks to it, but the extra functionality compensates for most of the issues.

W∴ Balboos, GHB 30-Dec-20 9:15am

Now I'll ask you a question!

Extra functionality: does that mean features not part of CSS3 or just different ways to access them? Like jQuery not really adding to javaScript but just wrapping parts of it up as simplified access features?

If it does, indeed, supply unique functionality I'd keep away from it, myself as it would lock me into Microsoft's environment. A beauty of web development is that it crosses O/S boundaries effortlessly.

Demetri K.2 30-Dec-20 9:51am

Yep, jQuery is a good comperison. The main selling point of SASS is its ability to chunk your css file into separate sub-files so you don't have to work with one if your css is extensive. Plus SASS adds variables, mixins (to copy-paste complicated designs) and class and id stacking.