Linking to External CSS files

HTML-CSS
1

I continue to have problems with external CSS files. I’m certain there is something I don’t understand about using the link tag in HTML. I think it’s with the pathname. I’ve created test index.html and test -page.css files to try and master this lesson. File structure takes the form DRIVE LETTER/ROOT/Subfolder/file.

The W3School lesson shows the link tag declaration as
<link rel="stylesheet" type="text/css" href="filename.css">where, in my case, “filename.css” would be “test-page.css”. This doesn’t work.

In another post here, the solution I found was to change the link tag to be written as <link rel="stylesheet" href="/Style/filename.css". That works for me in another case but not in this test.

In the other case, by incuding part of the path (the subfolder name, Style) following the syntax, href="/Style/filename.css I got the result I wanted, but I can’t repeat that syntax and get results I want.

I can’t seem to break through a conceptual barrier in my mind. Can someone please point me to wiki on this issue, or simply explain to me what I obviously misunderstand? I think it has to do with declaring path information, but I’m obviously not getting it right. As I understand it, because the CSS file is within a subfolder that is within the root folder that also contains the HTML file, by including the subfolder name (Style), preceded by a forward slash (/) in the href qualifier, the browser should find the CSS file and style results accordingly.

What am I getting wrong?

The CSS file:

.test-page 
  {
    width: 1220px;
    height: 525px;
    border-style: ridge;
    border-width: 7px;
    border-radius: 20px;
    border-color: brown;
    background-color: rgb(234, 217, 201);
  }

The HTML file:

<!DOCTYPE html>
<html lang="en">
  
  <head>  <!--  BEGINNING OF HEAD SECTION   -->
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <title>Test</title>
    
    <link
    rel="stylesheet"
    type="text/css"
    href="/Styles/test-page.css">

  </head> <!--  END OF HEAD SECTION   -->



  <body>  <!-- BEGINNING BODY SECTION 
               (PAGE CONTENT) -->
  
    <div class="test-page.css"></div>    
    <div>      Display this content     </div>
  
  </body> <!--  END BODY SECTION
                (PAGE CONTENT)  -->

</html>

VS Code Explorer ss:

VSC Explorer
VSC Explorer474×374 12.3 KB

![Windows iIle Explorer|690x205](upload://tNzOcVDBU98zyJlFJZoMPFnOpjG.png)
3

the class doesn’t match the one in your css file

1 Like
4

So, the problem was with my declaration in the <div class="test-page.css"></div> <div> Display this content </div>
code. In declaring the class I leave off the file extension.

Another micro lesson learned.

Thanks.

5

you can’t use the period inside a class name

and when you want to apply styling using a class, the class name needs to match between the html file and the css file, otherwise the code doesn’t know where to apply things

2 Likes