Having trouble with CSS styling not applying to the header tag

Take a look at this snippet of HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <link href="css/test.css" rel="stylesheet">
</head>
<p></p>
<h2>Meeting the Old Guard  </h2>
<p>I took on an old man in Vietnam. .</p>
</body>
</html>

Accompanying this HTML is a CSS stylesheet named test.css.

body {
    width: 100%;
    margin-right: auto;
    margin-left: 2cm;
    color: #f0f;
    background-color: #000;
    margin-left: max-width: 1400px; }
}

h2 {
    color: #fff;
    margin-left: 0;
    font-weight: 700;
    font-style: italic;
}

p {
    color: #fff;

}

The body tag sets the text to magenta, while h2 and p tags are supposed to be white. However, the header appears as magenta and the paragraph displays as white. Why isn't the header displaying in white as expected?

Answer №1

There seems to be an additional bracket in your body tag

body {
width: 100%;
margin-right: auto;
margin-left: 2cm;
color: #f0f;
background-color: #000;
margin-left: max-width: 1400px; }

} <----This extra bracket is causing issues

Take a look at https://jsfiddle.net/bryanseven/vvw3k7to/ for the correct display.

Answer №2

Looks like you forgot to include the opening body tag.

You should have:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8> 
    <link href="css/test.css" rel="stylesheet">
</head>
<body>
<p></p>
<h2>Meeting the Old Guard  </h2>
<p>I encountered an old man in Vietnam.</p>
</body>
</html>

Also, there seems to be an extra closing bracket in your body's CSS.

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

Desktop display issue: Fontawesome icon not appearing

Having trouble getting the fontawesome icon to display properly on my website. It appears in inspect mode, but not on the actual site itself. Any suggestions on how to fix this issue? import React, { Fragment, useState} from "react"; import { Na ...

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...

Begin with a Bootstrap non-fluid container and follow with a fluid container

I am currently facing a challenge where I want the lower section of my webpage to be full width within a container-fluid div, while keeping the top part in a traditional container with a set width. Despite my efforts, the following HTML snippet is not ach ...

Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

Looking for help with a jQuery script as I am a beginner in using jQuery. jQuery(document).ready(function ($) { $(".sub-menu").hide(); $(".current_page_item .sub-menu").slideDown(200);; $("li.menu-item").click(function () { if ($('.sub-menu&apos ...

Fonts displayed on websites may look different on Mac compared to Windows

After carefully selecting a Google Web Font to use as the main font for my website, I noticed that it appears slightly different in terms of dimensions and spatial conformations when displayed on both Mac and Windows computers. For more information about ...

Is it acceptable to debut a full-screen iframe widget compared to an embedded one?

My current project involves integrating a custom widget into users' websites for my application. I am considering using an iframe as it seems to be the most efficient option for several reasons: Utilizing the custom framework of the application will ...

Problem with BeautifulSoup table parsing

I've been trying to create a table with expenses, amounts, and actions, but I'm having trouble with the alignment. I attempted to adjust it by changing the width, but that didn't solve the issue. Can someone point out what I'm doing wro ...

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

What is the manual way to activate Ratchet's push feature?

I am facing an issue with a link that triggers a search function. Currently, the link is working as expected. However, I am having trouble getting the search to be executed by pressing the 'enter' button. Here is my code snippet: $('#sea ...

when the window is scrolled a certain amount, use jQuery to scroll back in the opposite direction

Using jQuery for Background Image Position: $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { $(".class").addClass("bgposi"); // $(".top").addClass("fixd"); // $(".logo").addClass ...

The hyperlinks in the navigation bar are leading me to incorrect destinations

I am currently developing an authentication app and facing an issue with the navbar links for register and login. They are not redirecting me to the correct destination. These links work perfectly on the landing index page, but not on any other page. site ...

Animating the Click Event to Change Grid Layout in React

Can a grid layout change be animated on click in React? For instance, consider the following component: import { Box, Button, styled, useMediaQuery } from "@mui/material"; import Row1 from "./Row1"; import React from "react"; ...

Disabling the underline style on a4j:commandLink

Current Software Versions: Apache MyFaces 2.0 Rich Faces 4.3 Migration Challenge: We are in the process of upgrading from JSF version 1.2 to JSF version 2. One issue we have encountered is that there is no native support for sorting in rich:dataTable. ...

Invoking the HTML method from a WCF service

Currently, I am utilizing a callback in my WCF service to receive raw frames from the camera. I am currently working on developing an HTML application that will showcase these frames. However, my current approach involves using a button click event in HTM ...

Three divs are set in place, with two of them of fixed width while the third div is

Looking for a layout with specific positioning and fixed widths: One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space. Any suggestions are appreciated. Thank you! ...

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...

Display issue with positioning user name in navbar on Internet Explorer

The user name appears correctly in the navbar on Firefox and Chrome, but in IE it drops down due to a break tag issue. Is there a way to resolve this in IE so that it displays like in Firefox and Chrome? body { padding-top: 102px; background-colo ...

What is the reason behind the improved performance I experience in Chrome with the Developer Console open?

Currently, I am developing a small canvas game completely from scratch using pure JavaScript. This game utilizes a 2D lighting algorithm that is akin to the one found here. It features only one light source and 25 polygons, resulting in approximately 30,0 ...

What is the reason behind individuals choosing to minify assets instead of minifying the HTML

Have you ever wondered why people emphasize the minification of web assets like CSS and JavaScript, yet rarely mention doing the same for markup? It's interesting to note that CSS and JavaScript are often reused across multiple pages, whereas markup i ...

The HTML code as content

While working on an AJAX project, I ran into this issue: http://jsbin.com/iriquf/1 The data variable contains a simple HTML string. After making the AJAX call, I noticed that the returned string sometimes includes extra whitespaces. I attempted to locat ...