The background color displays correctly in index.html, however, it does not show up in user

I encountered an issue in the index.html file where my code was not displaying the background color as intended. Here is a snippet of the code that worked:

 <!DOCTYPE html>
    <html>
    <head>
    <body style="background-color: #A8E4A0;">
    <meta charset="utf-8" />
    <title>Demo</title>

While discussing this with my partner, they suggested keeping the background-color setting in our user-interface.css file. However, when I tried to implement this change, it did not work as expected. Instead of showing the specified background-color, the page remained white.

* Universal Settings */
    .body{ 
            background-color : AE8E4A0;
            font-family: Arial;
    }
    /* Search bar */
    .heading {
            font-size: 30px;
            padding: 16px 0;
            color: #444;
            text-align: center;
    }/*Container*/`enter code here`

If anyone has any insights on what could be causing this issue, your help would be greatly appreciated.

Thank you, Scott

htmlcss

Answer №1

Your code has a small mistake that needs correction. It's important to note that the dot (.) should not be used in front of 'body' as it is an element, not a class name. The same applies to the 'heading' element. Your updated code should look like this:

/* Universal Settings */
    body{ 
        background-color: #AE8E4A0;
        font-family: Arial;
    }
    /* Search bar */
    heading {
        font-size: 30px;
        padding: 16px 0;
        color: #444;
        text-align: center;
    }

<!DOCTYPE html>
<html>
<head>
    <link href="cssfilename.css">
    <body style="background-color: #A8E4A0;">
    <meta charset="utf-8" />
    <title>Demo</title>

Additionally, ensure that you link your CSS file to your HTML file. Remember to replace "cssfilename.css" with the actual filename of your CSS file and make sure they are located in the same directory.

Answer №2

Applied #A8E4A0 as the background-color in my CSS and confirmed that the link in my HTML was accurate.

Answer №3

Check out this code snippet:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />    
    <title>My first Website!</title>
    <style>
        body {
            background-color: #A8E4A0;
            font-family: arial;
        } 
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>This is a paragraph!</p>
</body>
</html>

If you prefer to have the style in a separate .css file, here's how to do it:

/* style.css */

/* Save this file in the same folder as your .html file. */

body {
    background-color: #A8E4A0;
    font-family: arial;
} 

p {
    color: green;
}
<!-- Index.html -->

<!DOCTYPE html>
<html>
<head>
     <link rel="stylesheet" href="style.css" />
     <meta charset="UTF-8" />    
     <title>My first Website!</title;
</head>
<body>
    <p>This is a paragraph!</p>
</body>
</html>

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

Is it possible to overlay two divs on top of a current website layout?

I am currently attempting to overlay two divs on top of an established website, similar to the layout shown in the image: While I am able to achieve this successfully in browsers like Firefox and Google Chrome, I am encountering difficulties when trying t ...

csshtml

What is the best way to display JSON responses from AJAX in separate divs with identical class names?

I've been going through a whirlwind of confusion lately, unable to find a solution after spending over 100 hours on this. I'm reaching out for help in hopes that someone can guide me in the right direction! UPDATE: To clarify my issue and seek a ...

javascriptphpcssajaxhtml

Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows: <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="description" content="description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li ...

htmlcssbootstrap-4

What steps can I take to make sure Google Password Manager saves the accurate field as the username?

My Background Being a freelance web developer, I recently worked on creating a web app for a client who owns a successful meal-planning business. This web app was designed to help her clients easily access and view their personalized meal plans. The Issue ...

htmlgoogle-chromepasswordspassword-manager

Preventing users from entering past dates in Angular 6 - A step-by-step guide

Here is my current code snippet: ngOnInit() { let now = new Date(); this.date = formatDate(now, "dd/mm/yyyy",'en-US'); console.log("dateFormat :",this.date); } This is the html part of my code: <input type="date" [min]={{da ...

htmlangulardateangular6

Tips for setting up a popup menu when clicking a button on a webpage

I am currently working on developing a popup menu with a greyed-out background that appears when the user clicks on a button in React. My code implementation is as follows: // The ifButtonClicked function is called when another button is clicked // Some ...

javascripthtmlreactjs

Can a radio group be made read-only in Angular?

Is it possible to set a radio group as read-only in Angular? ...

htmlangular

Customize the yellow background color of Safari's autofill feature by following these simple

When I open this image in Safari, this is what I see: https://i.stack.imgur.com/KbyGP.png However, this is the code I have: https://i.stack.imgur.com/4wEf0.png References: How to Remove WebKit's Banana-Yellow Autofill Background Remove forced ye ...

javascripthtmlcsssafari

What are some techniques for concealing user input within xml files?

I don't understand, if the html code looks like this: <input type="hidden" value="123"> What would be the equivalent code in xml? I'm new to xml and I'm struggling with this element, if in html it uses type="h ...

htmlcssxmlxml-parsingxmlhttprequest

Stop horizontal scrolling caused by 100vw

When an element is set to width: 100vw; and a vertical scrollbar appears, the width of the element will include the viewport width plus the width of the scrollbar. Is there a way to prevent this behavior? Is it possible to avoid this without disabling ho ...

cssscroll

Show different values in Array arranged in Table format with the help of Ajax code

Check out the code I have attempted below: <script type="text/javascript"> $('#doctorselected').on('change', function(e){ console.log(e); var doctorid = e.target.value; var url = '{{URL::to('getdoc ...

htmlajaxlaravel

Error: content within v-html directive not displaying as expected

The v-html content is not rendering correctly for me. Interestingly, when I remove the v-html in the first list item, it works fine. Take a look at my code below: <div> <br> <li v-html="`a`"> <ul> <li ...

htmlvue.js

The Bootstrap 5 collapse feature fails to function properly upon clicking the toggle button

I am having an issue with the collapse feature not working when I click on the toggle button. Below is my code snippet. Can you help me identify what changes are needed for it to function properly? <!DOCTYPE html> <html lang="en" dir=& ...

htmlcsstwitter-bootstrapbootstrap-5

Contrasts between Flash and HTML5

Now that YouTube has transitioned from flash to HTML5, what are the unique features and functionalities of HTML5 that set it apart from flash? I am also curious to learn a more in-depth and intriguing aspect of HTML5 beyond what can be found through a sta ...

htmlflashadobe

What steps should I follow to update the template and seamlessly carry on with writing the function

Hey there! I've set up a function in my views.py file to send an email to the user, and then prompt them to input the body of that email. However, I'm facing a bit of confusion on how to proceed with integrating the email_confirmation.html templa ...

pythonhtmldjangowebdjango-views

In this scenario, why is the `position: fixed` property anchored to the document rather than the viewport?

I have a gallery set up with a custom lightbox feature that I designed. The lightbox is styled with position:fixed and top:0, so theoretically it should stay in the same position regardless of scrolling. However, I am experiencing issues where this is not ...

htmlcss

Adjust the styling of the minimized file input to work like a download button when the window is resized

I successfully minimized the fileInput function by removing the upload area and loading bar, giving it a similar appearance to a downloadButton. However, I'm facing difficulties in determining which part of the CSS code needs to be modified to make it ...

cssrshiny

Is there a way to reveal the full contents of a cell when hovering the mouse, even if it has overflow hidden?

I am facing an issue with tables that contain long strings as values. Is there a way to display the entire content of a table cell if the overflowing content is hidden? I thought about expanding the cell while overlapping adjacent cells without displacing ...

htmlcss

Can you increase all px measurements in Notepad++ by a factor of X?

Looking for help with a large HTML image map that contains over 3000 lines of images with specific top/left pixel positions. I'd like to replace these images with larger ones, which would require increasing all the pixel references by a certain amount ...

javascripthtmlreplacenotepad++

What is the best way to store an array of file names in a single column in a database table?

I have a table named t1 with two columns: id and name. I want to insert file names in the name column. <input type="file" name="files[]" multiple></br> <input type="submit" name="submit" value="ADD"> Table: id | name 1 | e1.jpg, e2 ...

phphtmlmysqldatabasemysqli