External CSS File not Working

HTML-CSS
1

I’m trying to understand the structure and syntax for writing external CSS files. I have an HTML file and a CSS file. The HTML file is in a project folder. That folder also contains things I plan to use that will be put into subfolders that I will link to: Images -for photos, Scripts - for javascipt files, Styles - for CSS files, and Thumbnails - for images, icons, etc that will be clickable to link to other files. My HTML file has what I think is a basic structure for my website. I plan to use DIVs as you can see in the code. In the HTML file I’m posting, much of it is commented out for focus.

I’m using VSCode to edit files. In the code, I’m attempting to make the text “The Hutchins Clan” appear in Comic Sans MS font, without success.

It’s probably evident that I don’t know much about this process. I’m uncertain about what to put in the external CSS file, for example. I’m trying to keep it simple by limiting the HTML/CSS files to simply manipulating some text that will eventually become my web page masthead.

If someone will point me to wiki on a better way to link to my files, I’ll follow that lead. Until then, here they are.

HTML file (hutchins.html)

<!DOCTYPE html>
<html>

<head>
 <!-- <meta charset="UTF-8">
  <meta name="description" content="Hutchins Clan">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Robert H. Hutchins">
  <meta name="viewport" content="width=device-width,  initial-scale=1.0">
  <meta http-equiv="refresh" content="40"> -->



  <title>
    Hutchins Clan
  </title>

  <link 
    rel="stylesheet" 
    href="Styles/masthead.css">
  <!--
    <link 
    rel="stylesheet" 
    href="Styles/search-bar.css">
  <link 
    rel="stylesheet" 
    href="Styles/navigation-column.css">
  <link 
    rel="stylesheet" 
    href="Styles/parents-photo.css">
  <link 
    rel="stylesheet" 
    href="Styles/parents-photo-caption.css">
  <link 
    rel="stylesheet" 
    href="Styles/527-painting.css">
  <link 
    rel="stylesheet" 
    href="Styles/527-painting-caption.css">
  <link 
    rel="stylesheet" 
    href="Styles/family-photo">
  <link 
    rel="stylesheet" 
    href="Styles/family-photo-caption.css"> -->
  
</head>

<body>
 
  <div class="masthead"
  <p>The Hutchins Clan</p>
  </div>

  <!--<div class="search-bar">
menu</menu></menu><!-- Search bar needs border in css style file
  </div>

  <div class="navigation-column">
    navbar
    <!-- Navigation column
  </div>

  <div class="parents-photo">
    Healy & Pa<!-- Healy and Pa Photo
  </div>

  <div class="parents-photo-caption">caption
    <!-- Parents photo caption
  </div>

  <div class="527-painting">527
    <!-- 527 Painting 
  </div>

  <div class="527-painting-caption">caption
    <!-- 527 Painting caption
  </div>

  <div class="family-photo">family group
    <!-- Family Photo
  </div>

  <div class="family-photo-caption">caption
    <!-- Family Photo Caption
  </div> -->


 
  <style>

  </style>

  <script>

  </script>

</body>

</html>

External CSS file (masthead.css)

<!DOCTYPE html>
<html>

<head>
 <!-- <meta charset="UTF-8">
  <meta name="description" content="Hutchins Clan">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Robert H. Hutchins">
  <meta name="viewport" content="width=device-width,  initial-scale=1.0">
  <meta http-equiv="refresh" content="40"> -->



  <title>
    Hutchins Clan
  </title>

  <link 
    rel="stylesheet" 
    href="Styles/masthead.css">
  <!--
    <link 
    rel="stylesheet" 
    href="Styles/search-bar.css">
  <link 
    rel="stylesheet" 
    href="Styles/navigation-column.css">
  <link 
    rel="stylesheet" 
    href="Styles/parents-photo.css">
  <link 
    rel="stylesheet" 
    href="Styles/parents-photo-caption.css">
  <link 
    rel="stylesheet" 
    href="Styles/527-painting.css">
  <link 
    rel="stylesheet" 
    href="Styles/527-painting-caption.css">
  <link 
    rel="stylesheet" 
    href="Styles/family-photo">
  <link 
    rel="stylesheet" 
    href="Styles/family-photo-caption.css"> -->
  
</head>

<body>
 
  <div class="masthead"
  <p>The Hutchins Clan</p>
  </div>

  <!--<div class="search-bar">
menu</menu></menu><!-- Search bar needs border in css style file
  </div>

  <div class="navigation-column">
    navbar
    <!-- Navigation column
  </div>

  <div class="parents-photo">
    Healy & Pa<!-- Healy and Pa Photo
  </div>

  <div class="parents-photo-caption">caption
    <!-- Parents photo caption
  </div>

  <div class="527-painting">527
    <!-- 527 Painting 
  </div>

  <div class="527-painting-caption">caption
    <!-- 527 Painting caption
  </div>

  <div class="family-photo">family group
    <!-- Family Photo
  </div>

  <div class="family-photo-caption">caption
    <!-- Family Photo Caption
  </div> -->


 
  <style>

  </style>

  <script>

  </script>

</body>

</html>
2

Bad form to reply to one’s own post, but I have an update.

Below is a stripped down version of my HTML file and my external CSS file.

I made a change to define my division so that I could reference it and used that qualifier name (.mastheadDiv) in my CSS file. When I first tried it, it worked. I then tried to change the CSS file content and it quit working. I deleted the changes I made to the CSS file but it still doesn’t work.

<html>

<head>
  <title>
    Hutchins Clan
  </title>

  <link 
    rel="stylesheet" 
    href="Styles/mastheadDiv.css">
 
<div class="mastheadDiv">
  <h1>The Hutchins Clan </h1>
  
</div>
  <script>

  </script>

</body>

</html>


/*  MASTHEAD:  THE HUTCHINS CLAN  */

.mastheadDiv {  
  border: 5px outset rgb(64, 1, 1);
  border-style: double,ridge;
  background-color: rgb(237, 228, 215);
  text-align: center;
  color: rgb(168, 26, 26);

}
3

if that is your css file why do you have html in it? or was it a copy-paste error?

do you have a github repo of your project?

4

Thanks for the response.

I do not have a git-hub repo. I’m trying to focus on learning HTML and CSS. When I’m more comfortable with my skill, I’ll try to learn how to use Git-Hub. For now, I’m doing only what I (think) know.

What HTML do you see in my CSS file?

FWIW I discovered that my error was in the HTML. I found this by stepping back to including my stying within the same code as my HTML instead of putting it in an external css file.

5

I see what you posted, and below this header where you mention a CSS file there is html

so I am asking you if it is a copy paste error or if you have html in your css file

1 Like
6

I look and see. I suspect that it’s from not copying and pasteing carefully