What could be causing my HTML homepage to not be connected to my CSS file?

I have been researching this issue and none of the solutions I found have worked for me. My HTML page is unable to locate my CSS page even though they are both in the same folder. I am using Dreamweaver but coding from scratch.

Below is my HTML code:

<!doctype html>
<html>
<meta charset="UTF-8">
<title>home</title>
<head>
<style type="text/css">
<link rel="stylesheet"
<href="style.css"
type="text/css" />
</head>

<body>
<div class="background"></div>
</body>

</html>

And here is my CSS code:

@charset "UTF-8";
/* CSS Document */
.background {
    background-color: rgba(0,0,0,0.98);
    background-image: url(images/me_atsunsetbackground.JPG);
    background-repeat: repeat-y;
    margin-left: 50px;
    margin-top: 200px;
    margin-right: 50px;
    margin-bottom: 200px;
}

Answer №1

Follow these steps:

<html>
    <meta charset="UTF-8">
    <title>my page</title>
    <head>
         <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div class="background"></div>
    </body>
</html>

Answer №2

<header>
<link type="text/css" rel="stylesheet" href="your_custom_style.css">
</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

Align two containers centrally using absolute positioning inside a division

I am looking for a way to centrally align two "boxes" within a div using CSS. These boxes are positioned absolutely. For reference, here is the JSFiddle link: http://jsfiddle.net/p4sA3/8/ Is there a method to achieve this alignment without specifying spe ...

The next/prev buttons on the carousel and scrolling functionality are malfunctioning

The Bootstrap Carousel component is not functioning as expected. It does not scroll automatically and the next/prev buttons are not working. Despite checking the order of Jquery/Bootstrap dependencies and using the carousel code from the Bootstrap document ...

What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with ...

Center the panel on the page and decrease its width using Bootstrap

I recently incorporated a Bootstrap panel above a search results table - my first experience working with Panels. This panel contains a form with a select menu, allowing users to filter the list of search results based on their selections. Currently, the ...

What could be the reason for the <ul> and <li> tags showing up on my website's DOM?

I'm attempting to showcase cards on my webpage, but the text I'm displaying contains some code snippets like the one illustrated below: <div class="app"> <h1> All Fishes and Their Photos</h1> <ul v-for="(fi ...

Is it considered a bad habit to utilize custom CSS on Bootstrap classes?

Imagine I have the following code snippet in my index.html file, and I am utilizing Bootstrap: <head> bootstrap stylesheet main.css stylesheet ... <button class="btn btn-primary">Button</button The class "btn-primary" is used to style the ...

Trouble with background images appearing on screen

My folder structure looks like this: main directory index.html css image(directory) I have attempted to use the following code: background-image: url("../images/vegies.jpg") no-repeat; ("images/vegies.jpg") no-repeat; ...

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native. Is there a way to implement this example using react-native bootstr ...

Sending Data via Ajax

I am currently working on implementing an ajax invitation script that allows users to invite their friends to an event. The javascript code I have used in other parts of the website works perfectly, but for some reason, it is not functioning correctly in t ...

Issue with Bootstrap 5 dropdown menu extending beyond the viewport on the right side

The user dropdown in my code is cut off, even though I'm using Bootstrap 5. I came across an older article on stackoverflow suggesting to add .dropdown-menu-left or .dropdown-menu-right to the </ul>, but that didn't solve the issue for me. ...

Modifying the background color using highcharts.js

I am attempting to customize the background colors of a highcharts scatter plot. While I can easily change the color of a specific section using the code provided, my goal is to apply multiple colors to different ranges within the same plot. Specifically, ...

The "placeholder" attribute effectively populates the form input in HTML, but when using Angular 2+, the "value" attribute does not fill the input field as expected

Within my Angular UI, I have implemented an edit button that allows users to transform a member's name heading into a form for editing and updating the name. The challenge lies in ensuring that the form is pre-filled with the current name. My issue a ...

What is the best way to flip the pentagon shape made with CSS?

I need assistance in creating a downward-pointing pentagon shape. However, I am unsure of how to define the points on the shape. #pentagon { margin:70px 0 5px 20px; position: relative; width: 110px; border-width: 100px 36px 0; border-style: solid; ...

Issue with Bootstrap Table Column Width Not Adjusting as Expected

Table columns are not adjusting width properly with the table-responsive class. I want to specify the width of the column containing Well Type to be 200px. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="st ...

Tips on positioning the search icon to the right

Does anyone know how to position the font awesome search icon to the right of the "Sign Up" text? Check out this screenshot of my navigation bar for reference: https://i.sstatic.net/vIGzP.jpg I've looked through various tutorials online, and they a ...

Having trouble adjusting the appearance of the dropdown menu in Angular Material's Select component

I've been attempting to adjust the style of the overlay panel within an Angular Material's MdSelect component in order to change the default max-width property of 280px. I have tried various methods, such as using '!important' to overr ...

The area available for clicking does not align correctly with the visible display of the div element

Is it possible to create clickable, animating sprites without relying on Flash? I want the sprites to show a bubble popup when clicked or touched, and then dismiss when the screen is clicked again. However, I'm facing an issue where the clickable area ...

Having difficulty retrieving/binding the correct Entity Id in JQuery, consistently retrieves the first item Id from the iteration

Within my PartialView, I am looping through a Collection of Entities and displaying them in an Html Table. In one column of this table, there is an element with a font awesome class (fa fa-times-circle). I am setting the "id" property of this to the "I ...

Mapping form fields to database objects is an essential step in ensuring seamless data integration

I am curious about the process of building edit forms using modern frameworks such as express with mongo db. To elaborate on my question, I aim to create an application that allows users to edit certain fields of objects stored in Mongo. Each time a form ...

What is the best way to finish up the JavaScript code below?

Having just started learning JavaScript, I am struggling to figure out how to use JavaScript to clear the text in a text box and move it below the box when a user starts typing. I've been watching this tutorial http://codepen.io/ehermanson/pen/KwKWEv ...