Using information found in a CSS stylesheet

Currently, I am delving into the world of css and html as I attempt to teach myself the basics. To kick things off, I decided to create a stylesheet and divide it into various elements such as background images and cursor styles. The issue I'm facing is that after referencing the entire css file in my main html document, the application displays nothing but a blank screen. Can anyone point me in the right direction? Below you'll find a snippet of my code starting with the stylesheet.

html, body
{
    overflow: auto;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#background
{
    background-image: url("../Assets/Graphics/background.jpg");
    background-color: #cccccc;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
}

#mycursor
{
    cursor: url(../Assets/Graphics/cursor.cur), auto;   
}

Next up, here's the snippet from the html file:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Destiny Saga</title>
    <link rel="stylesheet" type="text/css" href="Style/style.css" />
    <link rel="shortcut icon" type="image/x-icon" href="Assets/Graphics/title.ico" />
</head>
<body>
</body>
</html>
htmlcss

Answer №1

Here is a revised version of your code:

html, body {
    overflow: auto;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#background {<--It is not recommended to name an ID "background"... consider using a different name such as "div" instead.--> 
    background-image: url("../Assets/Graphics/background.jpg");
    background-color: #cccccc;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
}

#mycursor { <---you could simply add cursor styles to the above div for consistency-->
    cursor: url(../Assets/Graphics/cursor.cur), auto;   
}
And here's the updated HTML file:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Hello World</title>
        <link rel="stylesheet" type="text/css" href="Style/style.css" />
        <link rel="shortcut icon" type="image/x-icon" href="./Assets/Graphics/title.ico" />
    </head>
    <body>
<div id="background">
<h1> Hello World</h1>
        <div id="mycursor">
</div>
</div>
        <script type="text/javascript" src="./Javascript/Main.js"></script>
    </body>
    </html>

Answer №2

Things that are absolutely incorrect:

  • The img tag is missing the required src attribute
  • The selector #mycursor is targeting an element with id="mycursor", not id="#mycursor"
  • The ruleset for #background does not match any existing element

It is possible that there are other issues present, such as incorrect URLs.

In summary, your HTML code lacks any visible effects and none of the applied styles will change that outcome.

Answer №3

Modification:

<img id="#mycursor">

Adjust to:

<img id="mycursor">

In HTML, you do not need to include the "#" symbol when specifying an id attribute, unlike in CSS where it is required.

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

Employing the <object> element to incorporate SVGs and utilizing inline CSS within HTML for adjusting fill properties

Looking to replace a flash object that utilizes a single swf file (map of USA) and flash vars in the html for dynamically changing state colors. Hoping to use one file across multiple pages. I've now designed an SVG file with each state having an ID ...

javascriptjqueryhtmlcsssvg

Rendering of a drawer within an AppBar component

I set a container width limit of 600px on my app, but this caused the drawer to display incorrectly. Instead of rendering next to the page content, it appears inside the app bar. When the screen width exceeds 600px (the designated limit), the drawer ends ...

cssreactjsmaterial-uisidebardrawer

Develop various Checkboxes using JavaScript

I am attempting to dynamically create multiple checkboxes using JavaScript. I have written the following code: var response= data; var container = document.createElement('div'); var checkboxContainer = document.createElement(&apo ...

javascriptjqueryhtmltwitter-bootstrapcheckbox

Tips for avoiding variable overwriting while utilizing it in a for loop to color objects

I am looking to enhance the efficiency of my function in creating HTML objects using native JS script. The current function paints text, but I want it to optimize. When running the function, I expect different iterations of text to be written in HTML thro ...

javascripthtmlweb

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

javascripthtmlcss

Creating a webpage with a layout that features three full-length columns using

body { background-color: blueviolet; } .leftcolumn { width: 30%; height: 100%; float: left; background-color: brown; } .middlecolumn { float: left; background-color: yellowgreen; width: 60%; height: 100%; } <body> <div class= ...

htmlcss

Unlimited icon carousel crafted with CSS

Currently, I have a set of 10 icons that are scrolling horizontally from right to left. However, I am encountering an issue where at the end of the icon loop, there is a space causing the icons to jump back to the beginning. I am looking for a solution to ...

htmlcssinfinite-scroll

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

I have come across some solutions, but I am struggling to incorporate them into my code as some require elements that are not compatible with my project. Let's get to the question: I need help making an existing CSS drop-down menu accessible for key ...

htmlcssdrop-down-menuaccessibilitykeyboard-navigation

Why is jQuery button function only functioning for the first button?

I'm encountering an issue with my table of records. Each row in the table has a submit button that triggers an AJAX request to the server when clicked. Strangely, the first button works perfectly and sends the request as expected. However, subsequent ...

javascripthtmljquery

Restrictions on webpage components within code

Is there a maximum limit to the number of HTML elements that a webpage can load on a browser without including CSS or scripts? ...

htmlcssbrowser

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

htmlcss

Applying a CSS stylesheet to an HTML element once the page has fully loaded can be achieved using JavaScript

I have encountered an issue with a div I create on my page using javscript when the mouse hovers over a specific area. It seems that this newly created div does not adhere to the styles defined in my css sheet, despite assigning it an id. Is there a way to ...

javascripthtmlcssdynamic

Rendering the HTML5 canvas within a console environment

I am looking to create images of humans on the console using nodejs. In order to achieve images of higher quality, I require a library or module that can facilitate drawing images in the console. Some options available include imaging and console-png. How ...

javascriptnode.jshtmlcanvas

javascript doesn't execute the php script

Hello everyone, I've been working on a project for quite some time and I’ve encountered an issue that I can't seem to solve. Hopefully, you can help me out with this. I have a digital LED strip controlled by an Arduino, which in turn is control ...

javascriptphphtml

Struggling to display blob URL on "pdf-viewer" component with "ng2-pdf-viewer" in Angular version 10

I am facing an issue with an API that returns uploaded files as blobs. When trying to bind the src with a blob URL, nothing is shown. However, if I bind it with a direct URL, the PDF file is displayed successfully. Below is my code snippet. My TypeScript ...

htmlangulartypescriptapipdf

What is the optimal HTML tag for showcasing chat text conversations?

To create a text window with fixed width and length that automatically wraps long texts without a horizontal scroll bar but with a vertical one, you can use HTML and CSS. The preview window on SO's ask question page is a good example of this. It is si ...

htmlcss

Achieving a floating audio layout on a webpage using CSS

Attempting to align all three audio elements to the right using CSS has been a challenge. I can't seem to figure out what I'm doing wrong. I've tried changing the 'audio' selector to .audio and #audio, as well as renaming it to &a ...

htmlcss

What is the process for showcasing ImageGridFSProxy in an HTML file?

I am facing an issue with displaying images stored in MongoDB on a web page using Flask. The records have a binary field named "payload". class BinaryFile(mongo.Document): created_at = mongo.DateTimeField(default=datetime.datetime.now, required=True) ...

htmlmongodbflaskpymongogridfs

Tips for locating the previous sibling of an HTML tag using only CSS

What is the method for locating adjacent elements in HTML using only CSS? <div class="form-group"> <label for="userID">User ID</label> <input id="userID" type="text" class="form-control" placeholder="Enter User ID" tabindex="1"/ ...

csscss-selectors

Calculate the Pythagorean Theorem with HTML and JavaScript

I'm currently attempting to create a Pythagorean theorem calculator using HTML and Javascript. The goal is for the calculator to determine any side when given two side values. I've implemented if statements in my code, but for some reason, it doe ...

javascripthtmlpythagorean