Influence of External Style Sheet not reflected in HTML

Just as the title suggests, I have an external style sheet connected to my HTML document, and it appears that the footer element may be incorporating the changes, but none of the other content is. Being new to this, I'm trying to pinpoint where I went astray.

Here is the snippet of the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House and Live Music</title>
<meta charset="utf-8">
<link href= "javajam.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>JavaJam Coffee House</h1>
<nav>
    <a href="index.html">Home</a> &nbsp;
    <a href="menu.html">Menu</a> &nbsp;
    <a href="music.html">Music</a> &nbsp;
    <a href="jobs.html">Jobs</a>
</nav>
<main>
  <h2>Relax at JavaJam</h2>
  <ul>
    <li>Specialty Coffee and Tea</li>
    <li>Bagels, Muffins, Gluten-free Pastries</li>
    <li>Organic Salads</li>
    <li>Music and Poetry Readings</li>
    <li>Open Mic Night</li>
  </ul>
  <div>
    12010 Garrett Bay Road <br>
    Ellison Bay, WI 54210 <br>
    888-555-5555 <br> <br>
  </div>
</main>
  <footer>
      Copyright &copy; 2018 JavaJam Coffee House <br>
      <a href = "mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7929a969e9bb7929a969e9bd994989a">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfaaa2aea6a38faaa2aea6a3e1aca0a2">[email protected]</a></a>
  </footer>
</body>
</html>

And here is the excerpt from the external style sheet:

body {background-color: #FCEBB6;
      color: #221811;
      font-family: verdana;}
      
header {background-color: #D2B48C;
        text-align: center;}
        
h1 {line-height: 200%;}

nav {text-align: center;
    font-weight: bold;}
    
footer{background-color: #D2B48C;
      font-size: .60em;
      font-style: italic;
      text-align: center;}

Answer №1

After separating the HTML and CSS content into index.html and javajam.css files, I tested the styles by opening index.html in Chrome. The styles were successfully applied. It is important to ensure that the HTML and CSS files are located in the same folder as siblings. If they are not, you will need to specify the path to the CSS file relative to the HTML file for proper styling.

Answer №2

RECOMMENDED SOLUTION

I suggest updating the tag-selector in your stylesheet to something like <header>, since there is no <header> tag in your html.

body {background-color: #FCEBB6;
      color: #221811;
      font-family: verdana;}
      
h1 {background-color: #D2B48C;
        text-align: center;}
        
h1 {line-height: 200%;}

nav {text-align: center;
    font-weight: bold;}
    
footer{background-color: #D2B48C;
      font-size: .60em;
      font-style: italic;
      text-align: center;}

You may also want to reorganize some of the code for better structure.

 h1 {background-color: #D2B48C;
     text-align: center;
     line-height: 200%;}

ALTERNATIVE OPTION

An alternate solution could be to wrap the 'h1' tag in your html within a 'header' tag.

<header><h1>JavaJam Coffee House</h1></header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choose tag using position in a sequence

I am working on updating the label text "E-mail" to say "User Name" in this HTML markup. The only tool I have access to for this task is jQuery. <div class="foo" style="border:1px solid #444"> <span class="field-with-fancyplaceholde ...

The mat-table fails to populate with data retrieved from the rest service

I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...

What is the best way in jQuery to display a particular div with a unique id when a link is clicked?

I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...

What is the appropriate title for the css class?

When creating a stylesheet for a website, should the CSS style names be related to the website or its content? For example, if my website is about web development, would it be correct to use style names like: #web-development-header .web-development-comp ...

Creating geometric designs on an image and storing them using PHP

I am attempting to retrieve an image from a specific location on my server, draw lines on it, and then save the modified image back to the same location. Below is the code I am using: function drawShapes($src_path, $json) { echo "---inside dra ...

Is it possible to transfer the style object from PaperProps to makeStyles in Material UI?

I am working with a Material UI Menu component and attempting to customize its border. Currently, I am only able to achieve this customization by using PaperProps inline on the Menu element. However, I already have a makeStyles object defined. Is there a ...

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

Arrange a stationary child in relation to the grandparent element

I created a small window within a browser window, containing an even smaller window with auto-scrolling text. However, I need some text in the smaller window to remain static and not scroll. Therefore, I used position_fixed which is absolutely related to ...

Is there a way to retrieve the values of a checkbox from a location outside the form where it is initially defined?

After successfully developing a script that deletes rows from a table when a checkbox is selected, I encountered an issue where the values of the checkboxes were not accessible outside of the form action they were placed in. The checkboxes and correspondin ...

Tips for replacing the default pointer image

Is there a way to change the default image for cursor: pointer to a custom image without having to create a new class for every element? Creating a class and specifying the hover value for cursor is not an ideal solution as it would require adding the cla ...

Is it possible to set a single Tailwind breakpoint that will automatically apply to all CSS styles below it?

Responsive design in Tailwind is achieved by using the following code snippet: <div className="sm: flex sm: flex-row sm: items-center"></div> It can be cumbersome to constantly include the sm: breakpoint for each CSS rule. I want ...

Ensuring validation with Javascript upon submitting a form

Hey there, I'm looking to validate field values before submitting a form. Here's the code I have: <table width="600" border="0" align="left"> <tr> <script type="text/javascript"> function previewPrint() { var RegNumber = docum ...

Translucent tonal backdrop hue

Is there a creative solution to dynamically increase the width of a border up to a certain point, using the thickness of the border as a progress bar indicator while reusing defined colors in stylesheets? Currently, I have the element with the border nest ...

JavaScript - Delayed Text Appearance with Smooth Start

I want to create a landing page where the text appears with a slight delay - first, the first line should be displayed followed by the second line. Both lines should have an easing effect as they appear. Below is a screenshot of the section: https://i.sst ...

Is there something I'm overlooking in my image navigation? It doesn't seem to be interactive

Looking for assistance regarding the issue below. I can't seem to make my image clickable, and I'm not sure what's causing this problem. <img src= "makeup.html.jpg" alt= "Make up by Lauren Evans logo" title= "Make ...

Move the cursor to the bottom of a div that can be edited

I have been struggling to position the cursor at the end of the next or previous editable content tag if the current one is empty. However, when I try to set focus, it always ends up at the beginning of the text instead of the end. I've tried various ...

Tips for positioning Bootstrap form labels and input fields in alignment

Currently, I am enhancing bootstrap-4 forms that consist of multiple input fields and labels. The form is functional, but I aim to elevate its visual appeal and user-friendliness. Working Snippet <link rel="stylesheet" href="https://stackpath.bootst ...

Mysterious CSS "manifestation" perplexes Chrome while evading Firefox's gaze

There seems to be an issue with the jQuery plugin on this demo page: If you access it using Firefox, you'll notice that the social sharing buttons are visible and functioning properly. However, in Chrome, there appears to be a peculiar CSS computatio ...

Tips for identifying HTML tags that include a specific attribute automatically

Is there a way to automatically identify an HTML tag that contains a specific attribute like data-wow-delay? This query revolves around wow.js. The goal is to have the classes wow bounce added automatically to any HTML tag that has this particular attribu ...

Experiencing issues with creating HTML using JavaScript?

I'm a JavaScript novice and struggling to figure out what's wrong with my code. Here is the snippet: var postCount = 0; function generatePost(title, time, text) { var div = document.createElement("div"); div.className = "content"; d ...