Stylish grey container with crisp white lettering

Just getting started with HTML and I've been working on a project for my class. Here's what I've come up with:

<font style="background-color: grey; color: white; display: block">Black and white copies $.10 per page letter/legal size</font>

 Color copies $.99 per page letter/legal size<br>

<font style="background-color: grey; color: white; display: block">Transparencies $1.98 per page full color</font>

Transparencies $.61 per page black and white<br>

Everything looks good in the browser, but when I try to validate the file with WC3 Validator, it gives me an error message that says : "Line 33 and 37, Column 71: The font element is obsolete. Use CSS instead."

How can I incorporate that grey box with reverse text into my CSS stylesheet?

I appreciate any guidance you can provide! Greg

css

Answer №1

Replace the font tag with a block tag - utilize <div> and eliminate display:block, as it is no longer necessary.

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

Tips for designing a pre-selection process

I've been considering the idea of implementing a temporary screen that allows users to choose between different options before proceeding to a specific page. For instance, on the contact page, users would be prompted with a question like "Are you loo ...

javascripthtmlcss

Switch between input and the input is not displayed inline

I've been struggling to align the Toggle button with the input box for quite some time now. I really need them to be inline so that they form a grid properly as everything is dynamic. I have experimented with using a Div on its own instead of a label ...

htmlcss

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

htmlcsstext-alignmenttext-align

What is the process for implementing a unique Angular theme across all components?

I created a unique Angular theme called 'my-theme.scss' and added it to the angular.json file. While it works with most Angular Elements, I am facing issues getting it to apply to certain HTML Elements inside Angular Components. For example: < ...

cssangularscss-mixinscustom-theme

Tips for keeping divs in place when hovering over a changing-sized element above them

Looking for some help with my website design. Whenever I hover over the "Problem" and then move away, the div underneath it shifts up and down. The same issue occurs when interacting with the "Solution" section. Any suggestions on how to prevent this movem ...

css

Creating parallel lines utilizing pseudo elements

Can someone assist me in drawing double lines under my paragraph using pseudo elements only without using display block? Here is my code snippet with display block: p:after { content: ""; display: block; width: 40px; margin: 20px auto 0; bord ...

csspseudo-element

Utilizing the CSS Flex property to position one element in the center and align the other element to either the left or right side

What is the best approach to center one element inside a container with CSS flex properties and align another element to the left or right? Even when I set ChatGPT's recommendations of margin-left and margin-right properties to auto for the right-ali ...

htmlcss

Enhance the appearance of React.Fragment with custom styling

When working with React, my components adhere to a specific file structure schema: - componentName |- componentName.tsx |- componentName.scss Some of these components are wrapped with a <React.Fragment>, like this: render() { return ( &l ...

javascriptcssreactjs

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

javascriptjqueryhtmlcssjson

The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

cssiosmaterial-uiwebkit

Switch up the Background using .css and jCarousel

I am attempting to create a dynamic gallery using jCarousel and Ajax. The thumbnails are being loaded from a '.txt' file. I am trying to achieve the following effect: When a thumbnail is clicked, the background of the body changes. This action sh ...

cssajaxdynamicbackgroundjcarousel

Creating a grid layout with images encapsulated within a div using HTML

I am struggling to create a grid of images with padding between them inside the main_block div. The issue I'm facing is that I can't get the images to align next to each other using inline block or break them with a because they go in line ins ...

htmlcss

What is preventing Facebook from merging its CSS/JS files together?

I wonder about the reasoning behind Facebook developers' decision not to consolidate their scripts and stylesheets into single files, opting instead to load them on demand through their CDN. Considering the complexity of Facebook as an application, I ...

javascriptcssperformancefacebookcdn

Tips for positioning buttons using HTML and CSS

Looking for some help with my HTML page design. I have a few buttons that I want to style like this: https://i.stack.imgur.com/3UArn.png I'm struggling with CSS and can't seem to get them positioned correctly. Currently, they are displaying "bel ...

htmlcss

flex child moves outside parent when available space shifts

My dilemma involves a flex container (A) containing two or more flex items stacked in a column. The top flex item (B) is a Bootstrap Collapse panel, while the bottom item (C) consists of two horizontal divs (D and E). The problem arises when the collapse p ...

htmlcsstwitter-bootstrapflexbox

Tips for enclosing the "body" element using a background image

Hey there! I'm a newbie web developer with a casual approach to coding. I'm trying to jazz up my menu by adding a background image, but no matter what I do, it keeps showing the default white background. Can anyone lend me a hand? If you're ...

htmlcss

The margin-bottom CSS class is integrated within Twitter Bootstrap

Is there a standard margin bottom class that can be used? I attempted to use bottom5 like this: <div class="col-lg-2 bottom5"></div> However, it did not have the desired effect. ...

csstwitter-bootstraptwitter-bootstrap-3

Utilize Bootstrap-Vue to ensure that an element expands to occupy the available space

In my Bootstrap-Vue application, I have set up the following hierarchy: <b-navbar.../> <b-container > <b-row align-v="center" style="min-height:100vh"> <b-col style="align-items:center"> <h1>404 Error&l ...

htmlcsstwitter-bootstrapvue.jsvuejs2

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

The HTML button with Google's material-icons appears noticeably small when displayed on mobile devices

Looking to design a basic HTML page with a button placed in the lower right corner? Check out the code below: <!DOCTYPE html> <html> <head> <title>Sample Page</title> <style> /* Styles for the container * ...

javascripthtmlcss