The CSS file is connected, however, it is not impacting the appearance of the

Despite linking the css file and seeing it open in the browser inspect mode, it fails to affect the page as intended.

Displayed below is my layout.pug file:

  1 doctype html
  2 html
  3   head
  4     link(href="/stylesheets/app.css", type="text/css",  ref="stylesheet")
  5     block title
  6   body
  7     block content  

Shown next is my index.pug file:

  1 extends layout
  2
  3 block title
  4   title Index
  5
  6 block content
  7   h1 Books
  8
  9   div
 10     a(href='new') New Book
 11
 12   table
 13     th Title
 14     th Author
 15     each book in books
 16       tr
 17         td= book.title
 18         td= book.author
 19         td (show)
 20         td (delete) 

Furthermore, I have an app.css file with the following content:

  1 h1 {
  2   color: blue;
  3 }

Any ideas on why the header failed to change its color?

Answer №1

Ensure to verify the file in your web browser and confirm that the css file is correctly located. In case it isn't, review for any errors in spelling or ensure that the file location is accurate.

Answer №2

Upon closer inspection, I have identified an initial error: The attribute for link should be rel (not ref).

Additionally, there seems to be a potential issue with the href attribute: Is the leading slash accurately placed?

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

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

Populate List Items until Maximum Capacity is Reached and Increase the

Is there a way to make a ListItem fill the list vertically while also being able to overflow it if needed? I'm looking for a solution that would allow me to access the height of the empty space in the list, which I believe would be the minHeight. Som ...

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

My sub menu bar is not working properly, I need to fix it so that it can dropdown correctly

I'm struggling with my sub menu layout and need some assistance in fixing it. I've tried numerous times to adjust it using CSS, but without success. Here is the link to my menu. I'm still learning CSS and could really use some guidance: # ...

Utilizing AngularJS ng-show to conditionally display content based on data retrieved from an

I am facing an issue with implementing the ngShow directive in my code, where I am trying to display data fetched from an API call. However, despite everything else working correctly, the ngShow directive does not seem to be functioning as expected. Here ...

Modify the appearance of a span element when an input is in focus

I am trying to display the word "test" by focusing on a text input. However, when the text input is focused, the z-index of the text should change to 0 but it's not working as expected. I have provided my code below: .text{ position: absolute; ...

What is the best way to delete a single asterisk from the content of an HTML <td> element?

Looking for a way to remove or replace an asterisk from the inner content of a <td> element. I have a block which includes some text and an input field. For this example, let's say <td> == this $(this)[0].innerHTML "*&nbsp;<input ...

Adjust the text size within a div element

I'm having trouble adjusting the font size of the bodytext div. When using the code snippet below on a page with various formatting styles, and nested inside a <div id="bodytext">, it doesn't seem to work as intended. It ends up altering li ...

Creating a wavy or zigzag border for the <nav id="top"> element in OpenCart version 2.3

I'm trying to achieve a wavy/zigzag border on the <nav id="top"> section in opencart v2.3 instead of a flat border. something similar to this example Below is the CSS code I am currently using: #top { background-color: #EEEEEE; borde ...

Display text in front of a relatively positioned image

My image has the CSS property position: relative and it is covering some text content. Is there a way to bring the text in front of the image? I have already tried adjusting the z-index but it didn't work. Below is the code snippet: h2 { paddi ...

Unusual manifestation of the Array

I defined a list array as: list: string[] = []; and added elements to it like this: let infoFile: string = fileReader.result; this.list.push(infoFile); After checking the console log, I noticed something strange [] 0 : "data:image/jpeg;base ...

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

Access the value retrieved from a form on the previous page using PHP

I'm struggling with extracting values from radio buttons on a previous page. Currently, my HTML and PHP code works fine with the search bar, which is the first form below. However, I'd like to add radio button filters below the search bar. <s ...

Is it possible to disregard any spaces within the content of an <option> element?

In my current project, I am facing an issue where a Django server is sending JSON data to a template with Vue.js running on it. The problem arises from the fact that some values in the JSON data have trailing spaces, causing complications. I am looking for ...

The designation is being acknowledged as a <div>

I am facing an issue with a div structure that contains a label and 4 child divs. My goal is to apply CSS and jQuery effects to only the child divs, excluding the label. To achieve this, I implemented the following code: HTML: <div class="score row-fl ...

Creating a unique design for a CSS menu with distinct section dividers and stylish onHover effects

Hey there! I'm currently working on a new menu design using UL and LIs elements. I would really appreciate some advice on how to add lines after each LI and properly indent them with the specific bullet image I have chosen. If you're interested ...

Difficulty encountered when utilizing $_POST with a text area

Having a contact form on a website with 2 text fields, 1 textarea, and 1 hidden field is resulting in an unexpected issue. Despite all the fields posting to a PHP script, the textarea data is not being captured as expected. This is puzzling considering the ...

Fixed positioning of a div causes it to move further away when zooming out

Greetings to all! I am looking to achieve a scrolling effect for a div area as I scroll down the page. To accomplish this, I have utilized the CSS property position:fixed to lock the div area within another div called "page". Below is the corresponding CSS ...

Acquiring Backlinks from an HTML Document

Looking to streamline a workplace process, I have a webpage with around 20-30 links that all begin with specific words: Dim Browser, strOut Set Browser = CreateObject("InternetExplorer.Application") With Browser .Visible = False .Navigate "http://anee ...

What is the method for adding data to a table without utilizing an ID field?

Here is the code I have written: This table contains details of the candidates: <table id="candidates-table" class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Candidate Picture ...