Why is CSS not displaying on my html page (with Apache)?-CodePudding

I am hosting a site at localhost and am trying to load CSS from an external file. The CSS is not displaying and is not being accessed when I check my apache access_log. When I contain the CSS within the html it all works fine.

Also, when I access the CSS directory directly I can view the .css file in the browser.

Here is my html:

<html>
    <head>
        <style>
        <link href="css/mobile.css" rel="stylesheet" type="text/css">


        html {height: 100%;}
        body {margin: 0px; padding: 0px; height: 100%; overflow: hidden;}
        #site_box {position: absolute; margin:0px; min-height: 100%; min-width: 100%; padding:0px;}
        
    
        #centre_column_box {display: block; margin-left: auto; margin-right: auto; max-width: 600px;}
            #title_box {text-align: center; }
                #title_box_title {font-weight: bold;}
            #content_title_box {font-weight: bold;}         
        
        /* */
        .wrapper {margin: 10px; padding: 5px;}
        
         /*Test Wrapper
        .wrapper {margin: 10px; padding: 5px; border-style: solid; border-color: black;}
        /* */


        /* For desktop */
        @media (min-width: 1200px){
            
            #top_row_box {display: none;}
            #top_row_divider_box {display: none;}
            
            #left_column_box {float: left; min-height: 100%; max-width: 200px;}
                #profile_picture_box {width: 50px; height:50px;}
                #menu_title {font-weight: bold;}
            #left_column_divider_box {float: left; padding: 5px; height: 100vh; max-width: 5px;}
                #left_column_divider {min-height: 99%; border-color: black; border-style: solid;}
        }
    


        
        </style>
    </head>
    <body>
             <!-- html stuff here -->


        </body>
</html>

and CSS:

/* For mobile */
@media (max-width: 1200px){
    #menu_list_box > ul > li {margin: 10px; display: inline-block; border-style: solid; border-color: black; padding: 10px;}
    #top_row_divider_box {padding: 5px; width: 95%;}
        #top_row_divider {min-height: 99%; border-color: black; border-style: solid;}
    #left_column_box {display: none;}
    #left_column_divider_box {display: none;}
}

The html file is in the document root and the css file is in the sub directory /css/.

Things I have tried so far:

Clearing chrome cache
Placing CSS in the document root ( so at / instead of /css/ )
Trying Firefox
Loading CSS via an absolute path so /srv/apache2/htdocs/css/

None of these presented the CSS or recorded an access in the apache access log.

What is going wrong ?

Help is appreciated !

CodePudding user response：

Most likely because you put inside the element. Try putting it outside of that and it should work

CodePudding user response：

You should include a reference to the external style sheet file inside the head section, and not in style section. hier is an example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>