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

Unable to navigate through select2 dropdown if fixed div is present

I am facing an issue with select2 in my fixed div popup that acts like a modal. The problem is that when the select2 dropdown is open, I am unable to scroll the div until I close the dropdown. This becomes problematic on smartphones because the keyboard e ...

Unforeseen box model quirks found in modern browsers when styling <table> elements

Here is a sample HTML document that demonstrates the issue: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; ...

Unable to conduct this search with Python using Selenium on a website

I have written a script to search for books on a webpage using Selenium: from selenium import webdriver from selenium.webdriver.common.keys import Keys import time PATH = "C:\Program Files (x86)\chromedriver.exe" driver = webdriver.Chrome(PATH) ...

Set the webpage to a fixed width

Is there a way to make my webpage fixed-width instead of liquid? I've tried changing the container size to pixels but the text still collapses when I resize the browser. Any suggestions on how to keep it at a fixed width? <!DOCTYPE html PUBLIC "-/ ...

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

Tips for overlaying text onto a MaterialUI icon

https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...

What is preventing the addition of links to the navigation bar when using a sticky navigation bar?

Currently, I am in the process of developing a blog website using Django. One of the features I have successfully implemented is a sticky navigation bar. However, I am facing a challenge with adding links to the menu on the navigation bar due to existing ...

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

JavaScript has encountered a syntax error

When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...

Getting the x-axis points on Google charts to start at the far left point

I have integrated the Google API for charts into my application and am using multiple charts on the same page. However, I am facing an issue with setting padding for the charts. When I include more data points, the chart area occupies more space in the div ...

Verify the placement within the text box

Are there methods available in JavaScript or any JavaScript framework to determine the position within a textbox? For example, being able to identify that figure 1 is at position 2 and figure 3 is at position 3. Figure 1 Figure 2 ...

Discover the magic of unlocking XML content with the power of XSL!

Hello, I am currently working on transforming an XML archive using an XSL archive. My goal is to generate a table displaying the content of the XML, but I am encountering difficulties in showing the values of two columns named "complexity" and "subject". B ...

The onClick event is not executing my function

Having trouble triggering the onclick() event when trying to modify table data using ajax. Here's the code snippet: (the onclick() event is located in the last div tag) @{ ViewBag.Title = "Edit_Room"; Layout = "~/Views/Shared/_LayoutAdmin.csh ...

Optimal method for passing a variable to external PHP code

I have encountered difficulties in getting my code to work, and I am seeking guidance on the correct approach to take. The issue lies within a page that contains a dynamically generated select box populated with names from a MySQL database. The select box ...

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...

The text entered in the textbox vanishes after I press the submit button

When a user selects a value in a textbox and clicks the submit button, the selected value disappears. <div class="panel-body" ng-repeat="patient in $ctrl.patient | filter:$ctrl.mrd"> <form> <div class="form-group"> ...

Play framework fails to apply style attributes correctly

When working with play-framework 2.3.x, I am in the process of creating a form and would like to show/hide it based on a model attribute. Typically, setting the style attribute manually using style = "display: none" and style = "display: block" works fine. ...

Viewing HTML web pages using Mozilla Firebox

Printing an HTML table with lots of content has been a challenge for me. Google Chrome didn't work, so I switched to Mozilla Firefox. However, now Firefox is breaking the page inside the table. My question is how can I trigger print preview in Firefox ...

Which of the dynamically-generated submit buttons has been selected?

In a hypothetical scenario, imagine a webpage with multiple submit buttons generated through a PHP loop. Each button is named after the loop value, resulting in HTML code like this: <input type="submit" name="0" id="0" value="click me"> <input ty ...