Why isn't my HTML reflecting the CSS changes I've made?

My CSS code is not applying to the HTML in general, only to h1 and h3. I have used similar looking code before and it worked fine.

html {
    text-align:center;
    border:25px dotted #ff5c33;
    background-color:#00b300;
    color:#ff5c33;
    font-family:Arial;
    }
h1 {
    background-color:#ff5c33;
    color:#00b300;
}
h2 {
    background-color:#ff5c33;
    color:#00b300;

}

I have checked my HTML code but I couldn't find any errors in it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Official Volleyball</title>
<link href="VolleyB/CssforVB.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Official volleyball team score</h1>
<h3>Wins:1 Losses:0</h3>
<h2>Number of spikes by Shawn</h2>
<h4>Spikes:3</h4>
</body>

</html>

Answer №1

Your CSS is currently targeting the html element when it should be targeting the body element instead.

Update your CSS code to target the body element to ensure that the styles are applied correctly.

body { /* Update html to body */
  text-align:center;
  border:25px solid #ff5c33;
  background-color:#00b300;
  color:#ff5c33;
  font-family:Arial;
}

h1 {
  background-color:#ff5c33;
  color:#00b300;
}

h2 {
  background-color:#ff5c33;
  color:#00b300;
}

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

The :before element is not displaying when using jQuery's slideToggle() method

When using only CSS, the .nav-main:before{} element is displayed, but with jQuery, it does not toggle that element and always keeps it hidden. Disclaimer: This issue has been observed on mobile devices (tested in Android Chrome). jQuery $('.menu-to ...

Ways to reduce the size of the background image in a select element?

Utilizing the bootstrap form-select select element : <select class="form-select listbox_length_menu_datatable" <option value='5'>5</option> <option value='10'>10</option> <option value ...

The behavior of Django Admin is rather peculiar

My Django app is running smoothly, but I've noticed some strange behavior in the Django Admin interface. When I click on a model, instead of being taken to the list of records for that model, I'm redirected to the same model list but with a pecul ...

Nested Classes in JQuery

Looking for help with fading in text using jQuery. Despite setting everything up, it doesn't seem to be working. Can someone assist me with this issue? Here is my current code: .nav ul li { opacity: 0; padding: 0px 50px; transition: opacity 2s ease-i ...

Is there a way to customize the background color of Material-UI MenuItem when hovering over it through AutoComplete props?

AutoComplete utilizes the Menu component to display MenuItems as demonstrated in the documentation on those respective pages. I am looking to modify the backgroundColor of a MenuItem when it is hovered over. While I have been successful in changing the co ...

I've encountered an issue with adjusting certain property values for an SVG component within my React project

I'm experiencing an issue where the pointer property is working, but the fill property isn't having any effect. When I inspect the elements in the browser console, I can manually change the element.style to affect the styling of the SVG component ...

"Add a touch of magic to your webpage with text effects that appear

I am looking to create a glowing text effect, and I stumbled upon this resource. http://jsfiddle.net/karim79/G3J6V/1/ However, the client prefers the text effect to appear after the page loads, rather than on hover. Unfortunately, I do not have experien ...

Tips for concealing the check mark within a checkbox upon selection

I have checkboxes arranged in a table with 23 columns and 7 rows. My goal is to style the checkboxes in a way that hides the check mark when selected. I also want to change the background image of the checkbox to fill it with color when marked. Can someone ...

Reorganize items that extend beyond the list into the next column using Bootstrap

I have a row with two columns, where Column 1 currently contains 7 list items under the ul tag. However, I want to display only 5 list items in Column 1 and automatically move the remaining items to the next column (i.e., Column 2). Is there a way to ach ...

Issue with JQuery event handlers becoming unresponsive upon resizing the window

JSBin link: http://jsbin.com/4QLDC/6 Here is the JS code snippet that I have written: var toggleContent = function (event) { $(event.target).siblings().toggle(); }; var showOrHidePanels = function () { var windowHeight = $(window).height(); v ...

Ensuring Your IMG is Perfectly Centered in DIV Across all Browsers

I have tried all the tips from the top Google results, but I am still struggling to center an image within a div. For example, the popular tricks mentioned in this link: or http://www.w3.org/Style/Examples/007/center.en.html do not seem to work in IE 8. ...

Challenges with implementing CSS transitions

I've been delving into CSS3 transitions, and I'm encountering some confusion. I can't tell if I'm misunderstanding something or if it's the browsers causing issues. Initially, I believed Opera had transition support starting from ...

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

The appropriate use of spacing after text in the context of HTML and

Why is it that when I add padding or margin, no extra space is created after the text? Here is the output: https://i.sstatic.net/1MwjE.png I have tried adding padding and margin after the Stay Tuned text, but it seems to be not working. Any insights on ...

Implement a JavaScript and jQuery code that alternates between fading in and fading out every two items in a

Can someone help me figure out how to create a loop that fades in and out every 2 items from an unordered list using jQuery? I've been trying to do this, but my loop only processes one item at a time. <div> <ul> <li>item1</li ...

Transform CSS into React.js styling techniques

My current setup involves using Elementor as a REST Api, which is providing me with a collection of strings in React that are formatted like this: selector a { width: 189px; line-height: 29px; } Is there a tool or library available that can conver ...

Issues with adjusting the height using CSS transformations are not being resolved

There seems to be an issue with animating the height property of an element as it is not animating at all. Check out the fiddle where the animation is attempted. Here is the HTML: <ul> <li> li 1 </li> <li> ...

Refresh an image on my webpage using jQuery

There seems to be an issue on my page where one of the images only displays after reloading the page. Initially, the image only loads partially. The reason behind this behavior is still unclear to me. I've been attempting to reload only the image on ...

The elements in the navigation bar stay in view for a short period of time even after the collapsible navbar has been

After collapsing the navbar, the navbar items remain visible for a short period of time, as shown in the second image below. Here is the HTML code: <nav class="navbar navbar-dark fixed-top" style="background-color: transparent;> <a class="navb ...

Header Button and Dropdown Divs Alignment

Currently, I am working on creating a three-button system to showcase the collectibles in my game's website. I have the buttons prepared, but the one on the right flies off the screen, and the middle button appears misaligned. My goal is to design a ...