I'm having trouble getting CSS to apply to my HTML file. Any idea why?

I conducted tests in both Chrome and Firefox, ruling out any browser-related issues. My CSS has been validated and is error-free. However, when I validate my HTML code, an error message pops up stating "Bad value “stylesheet” for attribute rel on element link: The string “stylesheet” is not a registered keyword." which leaves me puzzled. Below is the snippet of my code:

HTML

<!DOCTYPE html>
<html>
<head>
<link rel =“stylesheet” href=“javajam.css” type=“text/css”>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
</head>
<body>

<h1>JavaJam Coffee House</h1>

<nav><b>
<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>&nbsp;
</b></nav>

<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday</li>
</ul>

<dl>
<dt>54321 Route 42</dt>
<dd></dd>
<dt>Ellison Bay, WI 54210</dt>
<dd></dd>
<dt>888-555-5555</dt>
<dd></dd>
</dl>

<br>

<footer><small><i>
Copyright © 2016 JavaJam Coffee House
</i></small></footer>

</body>
</html>

CSS

body {
color : #2E0000;
background-color : #F5F5DC;
}

h1 {
background-color : #D2B48C;
}

footer {
color : #000000;
background-color : #D2B48C;
}

Answer №1

Here's a better alternative:

<link rel="stylesheet” href="javajam.css" type="text/css">

I made some adjustments to the quotation marks for clarity.

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

Discovering the second value with a matching CSS class using Selenium WebDriver

How can I select the second value from a list item that appears as a drop-down on a web page? In this case, the second value is 'Bellevue'. Refer to the screenshot below: I am implementing Page Objects and trying to locate elements using @FindBy ...

Images that have been resized on Android appear blurry when viewed on the second page

Customizing the Toolbar: #main_bar { background: url(../images/logo.jpg) 99% 50% no-repeat; background-size: auto 80%; } The original size of logo.jpg is 220x266px The toolbar has a fixed height of 46px Therefore, the background image appears t ...

Creating a persistent footer in a modal: A step-by-step guide

I'm currently working on a react-modal that slides in from the bottom of the screen with an animated effect. The challenge I am facing is getting the footer of the modal to stay fixed at the bottom of the browser window. Despite using the standard CSS ...

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

Exploring Data in a Tree View Format on a PHP Website

Looking for advice on displaying categories and corresponding subcategories on the left side of my website (built using Php and Javascript). I would like the tree to be movable, similar to the functionality featured on this link: Any suggestions on how I ...

Ways to compel divs underneath aligned divs

There are six divs numbered 1 to 6. I want divs 2, 4, and 6 to be positioned below divs 1, 3, and 5 respectively. Is it possible to achieve this layout? Sorry if my explanation is not very clear. Thank you. http://jsfiddle.net/LkGV8/ <body> <d ...

Using the Firefox API to determine if a tab is currently active

I remember hearing about a feature that was introduced in some recent versions of Firefox allowing developers to check if a tab is active or not using JavaScript. However, I am having trouble finding more information about it online. Can you share the li ...

When two elements overlap, adjust their CSS positions to ensure responsiveness

Is there a way to adjust the position of an element when it comes into contact with another? Check out this example http://jsfiddle.net/mZYR8/1/ In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide unde ...

What is the process for running a Template.HTML file within an Index.html file?

After downloading the template from this link, I made changes to the template.html file located in the src folder. Now I'm trying to figure out how to run the template.html file within index.html so that I can deploy it successfully. Simply copying th ...

Is there a way to modify existing code in bootstrap4 using CSS?

Is there a way to customize the CSS in Bootstrap, specifically when it comes to changing the fonts and colors in the carousel component? If you have any insights on this, please share! ...

Is there a way to expand this embedded video so that it spans the entire width of the screen

I have a code snippet with one row and two columns. I would like to embed a video from Vimeo in the first column so that it fills the entire column without any padding. Additionally, I want the two columns to be right next to each other with no space betwe ...

Issue with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

What is the best way to display data retrieved through Ajax, jQuery, and JavaScript on an HTML page

I have successfully used the script below to fetch data from an api endpoint and populate my charts. Now, I want not only to display the data in my charts but also directly output it in my HTML code using something like the document.write() function. How ...

Stop flexbox list items from altering the width of their parent container when the children are hovered over

In my project, I am dealing with a series of list items where some have child lists containing sub navigation links. To create a hover effect using CSS, I set display: none on the child <ul> and then change it to display: block when hovering over the ...

Resize a circle upon hovering while keeping the same thickness of the border

I'm working on creating a circle with just a border (no background) that scales on hover. Here's the code I have so far: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesh ...

Link functioning properly for one item but failing for another

I am facing an issue with my index.html file that contains the following code: <li> <a href="imprint.html#imprint-link"> <div class="main-menu-title">IMPRINT</div> </a> </li> Clicking on the "IMPRINT" link loa ...

I am having trouble with my 'SELECT DISTINCT' command, it's not functioning correctly

When I attempted to populate my drop down menu with values from the database using 'Select DISTINCT', it only retrieved some of the data instead of all of it. Below is my PHP code: <? $sqlretrive = mysql_query("Select DISTINCT type from ...

Responsive Iframe设计

My website has an issue with making the iframe responsive. The map displays correctly on a computer, but is invisible on mobile phones. I am currently using Bootstrap for the layout. <div class="container d-none d-sm-block mb-5 pb-4"> <d ...

"Exclusive Mui sx styles will be applied only when a specific breakpoint

As I update my old mui styling to utilize the sx attribute, I've noticed the ability to specify styles for different breakpoints using sx = {{ someCssProp: { xs: ..., md: ... and so on. Prior to this, I had been using theme.breakpoints.only for some ...

Is there a way to align the input and button side by side using Bootstrap v5?

Is there a way to make my input textbox and button appear side by side without using the d-flex class in the div? I want to center align the content but removing the class messes up the alignment. Any suggestions on how to accomplish this? <!DOCTYPE htm ...