Having trouble with basic HTML/CSS functionality not functioning properly

It appears that the stylesheet is correctly linked, but it seems like there might be an issue with the HTML/CSS code. I haven't worked on HTML/CSS in a while, so I could be missing something obvious. Can you help figure out what's wrong?

.box {
        width: 100px;
        height: 100px;
      }

      .box #1 {
        border: 1px solid red;
      }

      .box #2 {
        border: 1px solid blue;
      }
      
    
<!DOCTYPE html>
      <html>
      <head>
        <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      <body>
      The content of the document......
      <div class = "box" id = "1"></div>
      <div class = "box" id = "2"></div>
      </body>

      </html>
      
    

Answer №1

Your css styles should target any nested ids within your div elements. For example:

.container#1 {...}
.container#2 {...}

Answer №2

Your CSS border selector should target the IDs directly instead of nesting them inside a container with a specific class.

Instead of:

.box #1 {your css properties;}

try:

#1 {your css properties;}

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

I am experiencing issues with the background image not displaying correctly on Safari when accessing from my

I recently uploaded my simple website, but I encountered an issue when viewing it on my phone using the Safari browser. The background image at the top is not displaying properly. I attempted solutions from this and this, but unfortunately, none of them re ...

Challenges with Selenium Web Scraping

I'm currently in the process of creating a web scraper that extracts data from the Beatport top 100 chart. However, I've encountered an issue where some items are successfully located while others result in errors. def scrape_beatport(): user ...

Creating a Functional Dropdown Menu with CSS and HTML

I recently created a test site without a drop-down menu, and here is how it looks: Check out my site here: Now, I want to add a simple drop-down menu for "serwery". Can anyone help me figure out what's wrong with my code? Here's the HTML: < ...

Looking for assistance with implementing touch gestures on an HTML website?

I am in the process of developing a web application, and I have implemented a menu bar that shifts when a user clicks on an arrow. Each click activates a new menu option. Currently, I am looking to provide users with the ability to swipe over the screen t ...

Comparing background-color using .css() in jQuery/Js

I've been experimenting with creating angled divs on a webpage, where each basic panel is separated by an angled break. The idea is to have the background-image of one div flow smoothly into the background-color of the next div. Since I couldn't ...

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...

Tips on keeping a div element in a fixed position until triggered by jQuery

I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essenti ...

keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy! I'm looking to have each button change color when clicked, and stay that way until another link is clicked. Here is the c ...

What could be the reason for my onChange event not functioning properly?

The issue I'm experiencing involves my onchange event not properly copying the text from the current span to the hidden field. Any ideas on why this might be happening? Check out my code at this link. ...

The CSS styles are not being applied to the header and footer sections in the PDF file created with

When I try to add a header and footer template to the PDF generated by puppeteer, I am facing an issue where the CSS I added is not being fully applied. await page.pdf({ path: filePath, format : 'A4', printBackground : true, margin : { t ...

Unveiling the secrets to retrieving JSON array objects in HTML with the help of Angular!

Looking to display a JSON file in HTML, but struggling with syntax for deeply nested objects. { "questions": [ { "question": "Qw1", "answers": [ { "answers": "An1", "value": 25 }, { ...

HTML - lunar phases - update link based on user interaction

Reason: I am aiming to include tide times on my website as a minor feature rather than the main focus. Objective: As part of this tide times feature, I want to offer users a dropdown menu to choose a location and have the default tide times update based o ...

Stop the stream coming from getUserMedia

After successfully channeling the stream from getUserMedia to a <video> element on the HTML page, I am able to view the video in that element. However, I have encountered an issue where if I pause the video using the controls on the video element a ...

Appropriate application of section, article, and heading conventions

Recently, I created a complex liquid slider that serves as the header for my website. This slider contains various important content elements like heading tags (h-tags), paragraph tags (p-tags), and images. I found myself pondering whether each individua ...

CSS styling is not being applied to buttons within Ionic 2

I'm completely new to Ionic and hybrid apps as a whole. I've been experimenting with a test app, but for some reason, none of the CSS seems to be working. Could someone please help me figure out what mistake I might have made? Here are my files: ...

How can I show the real width of an image on a mobile device?

I have integrated the infinite slide plugin from jQueryscript.net into my website. While it works perfectly on desktop with background images, I am facing an issue on mobile devices where the image width needs to be displayed in full. I attempted to adjust ...

Remove the <select> highlight specifically for Internet Explorer

Looking for a way to remove the blue highlight in Internet Explorer. I am working with a select tag and whenever an option is chosen from the dropbox, the blue highlight shows up. Unfortunately, I don't have access to IE on my Mac so I can't test ...

Please maintain the previous file attached if no changes have been made to the input file

Is there a way to prevent the selected file from disappearing when a user clicks on input['type="file"'], browses for files, but does not select one and closes the dialog? ...

Could you show me how the easyrtcid is generated in the demonstration of audio-only chat? I would appreciate a step-by

Currently, I am utilizing the easyrtc webpage to test out the audio only chat demo and everything seems to be running smoothly. However, when connecting, the easyrtcid variable is automatically assigned a random string. I was wondering if there is a way t ...

steps for eliminating specific words from an input field

In my form, I have 13 input boxes where users can only type text and numbers. I am using the following script to enforce this rule: RESTRICT INPUT TEXT $(function() {//<-- wrapped here $('.restrict').on('input', fun ...