What could be causing my css stylesheet to not function properly in Sinatra?

I'm fairly new to this, but based on my research, this code should be functioning correctly. I am attempting to link a CSS stylesheet to an .erb file. Here is the code snippet I am using:

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

I have also attempted

href="./css/stylesheet.css"

and

href="css/stylesheet.css"

Just for clarification, my .erb file and CSS file are located in separate subdirectories within the same main directory. Below is the code from my stylesheet, in case that might be the issue:

body { 
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
  background-color:powderblue;     
}

h1 {
  font-family: verdana;
}

h2 {
  font-family: sans-serif;
} 

Answer №1

When working with a server.rb, ensure it looks like this:

require 'sinatra'

set :public_folder, __dir__ + '/static'

get '/' do
  erb :index
end

Your views/index.erb should resemble this:

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

Hello!

If you have your stylesheet in static/css/stylesheet.css, everything should work fine. Just remember to set the public folder correctly.

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

Python script for connecting to mWebSocket Server using WebSocket client

I am in the process of developing a WebSocket client using python that establishes a connection to an Arduino Uno via an Ethernet cable every second. The Arduino Uno is equipped with a WebSocket server using the mWebSocket library. The operational code for ...

Interacting with the Dropdown feature on the page causes the body of the page to shift

I am encountering an issue with 2 dropdowns in Datatables used to filter content. The problem arises when a dropdown is positioned on the right side of the page, causing a shift to the left by approximately 10px. Conversely, if the dropdown is placed on th ...

Guide to retrieving IDs of images on a canvas during drag and drop functionality

I've developed a finite state machine drawing tool that includes drag-and-drop functionality for different images, such as states and arrows. Each arrow creates a div tag for the transition, with unique ids assigned to every state, arrow, and transiti ...

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

Shift content from side to side with a click

I've been attempting to shift content left and right using an onclick event and I need it to stop at the margins on the left or right. The list-items are generated dynamically. Here's the code I've tried so far, but it's not quite worki ...

Show each item in the list vertically, using a single unordered list but displaying them in

Is there a way to display list items vertically in multiple columns using only a single ul? I need the output to look like: a e i b f j c g d h Any suggestions on how to achieve this would be greatly appreciated. Thank you! ...

TextBox with MultipleLines

I'm looking to add functionality to a text area with formatting capabilities as shown in the diagram. Can anyone guide me in the right direction? Also, whenever I click on the text area, a formatting tool should automatically appear above it. This i ...

Finding all possible pair combinations from a given list using Ruby

How can I use Ruby to generate a list of all possible pairs from a given list of elements, such as numbers? For example: list = [1, 2, 3, 4, 5] The desired result would be: pairs #=> [[1,2], [1,3], [1,4], [1,5], [2,3], [2,4], [2,5], [3,4], [3,5], [4 ...

In JavaScript, alert a message once all images have been clicked

I'm encountering a small issue with my javascript code. I am developing a game for a school project where the objective is to click (remove) fish using a fishing rod. However, the game does not have an end condition set up, so players cannot win. Belo ...

Access a document by selecting a particular page from a designated anchor tag

Seeking assistance from the community on opening a particular page within a file using an anchor tag (<a href=""></a>). The issue arises when trying to pass a parameter through the xls file, as it prevents locating the specified page. Any gui ...

How can you adjust the dimensions of a child div?

Hey there! I've got a div called bat. #bat{ width:50%; height:50%; } Here's the HTML: <div id="bat">dynamic div will appear here</div> When dynamic content is placed inside the div and it's larger than #bat, th ...

The PHP counter conceals the comma upon loading and does not display it permanently

I'm currently working on a PHP counter and encountering an issue with the comma display. I have implemented Number Format in a PHP function to print counter digits with commas every 3 digits, but the comma doesn't remain visible after the page lo ...

Searching for link href and text in a PHP DOM document

Within an html tag, there are the following elements: <ul class="l1nk"> <li class="dir online"> <a target="_blank" rel="nofollow" href="https://sample.com/embed/2882015?ref=7Qc" t ...

Having trouble with the "Cannot POST /contact.php" error message?

Help needed with ERROR "Cannot POST /contact.php". Here is the code: Code from index.html <form action="/contact.php" method="post"> <div class="w3-row-padding" style="margin:0 -16px 8px -16px"> <div class="w3-half"> ...

Execute CSS within jQuery code only when the body class is present

I am attempting to use CSS (display: none;) within a script to hide elements from my menu only if a specific language is active. When the body class changes from one language to another, I want the script to check if the body class of a certain language ...

Possible revised text: "Exploring methods for verifying elements within a div using Selenium

I have a situation where I need to verify elements within a div by using the following xpaths. The xpath for each item is as follows: Item 1:- //*[@id='huc-last-upsell-rows']/div[1]/div[2]/div[1]/div/div/a/img Item 2:- //*[@id='huc-last-u ...

Aligning a bootstrap button group at the center of a container

Looking for suggestions on how to center a Bootstrap button group (btn-group) within an element? For instance, consider the following structure: <div id='toolbar'> <div class="btn-group"> <button type="button" class="b ...

mysterious glitch within my code

Accidentally inserted the following code snippet <style type="text/css"> into my Top_menu.css file due to a copy and paste error, forgetting to remove it. Now trying to delete all the code will crash everything!!! Here is my Top_menu.css file: ...

Utilizing the CSS property "overflow:hidden;" to control the content visibility within nested div elements

Within a parent div, I have 6 nested divs with no border-radius set. The parent div has a border-radius applied, causing the corners of the child divs to spill over the rounded corners of the parent. Even setting overflow to hidden does not seem to solve t ...

Styling with CSS and Angular: Loading background images dynamically with a greyscale effect

Incorporating the image displayed above as a background photo in CSS is my current objective using Angular. My aim is to alter the photo path for each new item added to my list. As it stands, the styles are hardcoded, resulting in a constant image that fun ...