Struggling to connect CSS files to an HTML document

Could someone lend a hand in figuring out why this link isn't working as expected?

I've attempted to adjust margins within the .banner class, but it doesn't seem to be making any difference. I'm also worried because Atom doesn't seem to be recognizing my stylesheet as CSS even though I have specified it correctly.

HTML

<!DOCTYPE html>
 <html>
  <head>
    <title>Interactive Portfolio Builder</title>
    <link rel="stylesheet" type="text/css"
    href="Stylesheet-home.css">
  </head>

CSS

.banner {
  margin-left: 26px;
  margin-top: 26px;
}

Appreciate any assistance!

htmlcsshyperlink

Answer №1

Many responses on this page suggest including 'Stylesheets' in the href as the folder where your .css file is located. However, since you did not mention this in your question, following that advice might not be applicable to your situation.

Have you determined the location of your saved file? Ideally, the href attribute should be structured as 'href="FOLDER-NAME/Stylesheet-home.css"' or, if your CSS file is in the same directory as your HTML file, it can simply be 'href="Stylesheet-home.css"’.

Answer №2

Update the hyperlink to 

<link rel="stylesheet" type="text/css" href="../Stylesheets/Stylesheet-home.css">

Answer №3

To start with, it is important to specify the specific location of your CSS file within the code. In this instance, it should look like this:

<link rel="stylesheet" type="text/css" href="Stylesheets/Stylesheet-home.css">

Answer №4

When linking a file like index.html that has CSS located in a folder named "css," you need to make sure to link it properly:

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

If this method doesn't work, it could be due to the folder structure not aligning correctly with how the CSS is called.

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

Angular 6: Issue with displaying data on the user interface

Hello! I am attempting to fetch and display a single data entry by ID from an API. Here is the current setup: API GET Method: app.get('/movies/:id', (req, res) => { const id = req.params.id; request('https://api.themoviedb.org/ ...

javascriptnode.jshtmltypescriptexpress

Stacked divs needed to be aligned vertically

Is there a way to make the head and main tabs fixed vertically one below the other? Keep in mind that these need to be separate angular components and cannot be combined under another div. The rows also need to be scrollable. .pages { float: left; ...

htmlcss

Implementing ngClass with a dynamic ID in the URL condition

I am attempting to create an ngClass condition that adds an active class to a list element. Specifically, I want it to work for both the URLs '/companies' and '/company/:id'. The issue I am facing is that the current setup does not fun ...

cssangulartwitter-bootstrap

Issue with Bootstrap side navbar not collapsing when clicked on a link

Currently, I'm working on creating a website for a friend. While I used to have some experience with coding in the past, it has been a while and I am a bit rusty. This time around, I decided to use bootstrap for the project. However, I'm struggli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enclosing two smaller boxes within a larger box

I'm attempting to replicate the layout shown in the desired.png file (specifically with an outer box surrounding two inner boxes). Currently, my code doesn't display the expected outer box around the two inner boxes. How can I modify it to achie ...

htmlcss

What could be causing the issue with my css `content:` not functioning across different browsers, and how can I enhance cross-browser compatibility in all cases

Working on my first HTML/CSS project, I encountered a browser compatibility challenge. The code functions well in Firefox, IE, and Edge but fails in Chrome. Specifically, I am trying to make a button display alternating up and down arrows when clicked. Whi ...

javascripthtmlcsscross-browser

Tips for arranging divs in Bootstrap 5 to position one above the other

I have chosen to utilize Bootstrap 5 for my website project with the aim of enhancing its responsiveness on all devices. Specifically, I am seeking a way to ensure that when visitors access the site from a mobile device, the image-containing div appears a ...

htmlcssresponsive-designfrontendbootstrap-5

The functionality of jQuery's $.inArray does not seem to be compatible with ASCII characters

I've demonstrated the issue in this jsfiddle. The scenario involves two black coins - when one black coin is placed on another, it should trigger an alert saying "can't kill your own kind" and return the coins to their original positions. However ...

jqueryhtml

Use the CSS class

To create tables with 3 rows and 2 columns using divs, I have utilized the ng-repeat directive. Within this setup, there are two CSS classes - red and green, that need to be applied in the following manner: - Red class for the 1st column of the 1st row - ...

angularjscsscss-selectors

How can I show a tooltip when hovering over a tab using uib-tab?

Currently facing an issue with HTML/Bootstrap. My tabs are displayed using the uib-tabset directive on Angular Bootstrap (UI Bootstrap). I am trying to implement a tooltip that appears when hovering over a tab that is disabled. Does anyone know how I can a ...

javascripthtmlcssangularjstwitter-bootstrap

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

javascriptjqueryhtmlcss

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...

javascriptjqueryhtmlcssresponsive-design

Extracting the value of *data* from my HTML and displaying it in the console with Javascript

I'm struggling to figure out what's going wrong with this code. I've done some research online and it seems like I should just include the window.onload = function() at the beginning of my code. However, no matter what I try, the value alway ...

javascripthtmlcss

The Ineffectiveness of Social Media Sharing in WordPress

I'm encountering an issue with adding social media sharing buttons to my website's product page. Although I've implemented the PHP code, clicking on the Facebook button only redirects to a page displaying a share button and URL, but it doesn ...

phpcsswordpress

Two vertical divs stacked on top of each other, each expanding to the entire height and width of the browser window

Is there a way to set the width and height of two divs on a webpage to match the dimensions of the browser window, requiring scrolling to view the second div? In addition, how can I ensure that the content within these divs is vertically centered? To ach ...

csshtmlheight

The connection between an HTML form and PHP is not being established

variable-passing.php `<form method="post" action="variable-catching.php"> <input type="text" name="name1"/><br/> <input type="text" name="name2"/><br/> <input type="text" name="name3"/><br/> <input type="te ...

phphtmlforms

Unable to Render Data URI onto HTML5 Canvas

I have been attempting for quite some time and feeling frustrated. I am facing issues with my Data URI image not being able to write to my canvas for reasons unknown .... Here's the code snippet ... function addImage() { var allfiles = $("#postAtta ...

javascripthtmlcanvasfilereader

What is the best way to apply a CSS class to my anchor tag using JavaScript?

I have a good grasp of using JavaScript to insert an anchor element into my webpage. For instance, var userName_a = document.createElement('a'); However, I am interested in adding a style name to that same element as well. I attempted the follo ...

javascriptcss

The issue arises from the fact that the Bootstrap modal fails to open automatically

Having trouble getting my bootstrap modal to open on page load, even though the button to trigger it is working fine. Here is my code: <div id="myModal" class="modal fade" role="dialog"> <div class=" ...

javascripthtmlcssbootstrap-4bootstrap-modal