The div is identified by an ID and a class, but the class is not being utilized by the div

Can someone please explain why the font size, background color, and font weight are not applying to the content in the "welcome" class in this simple HTML/CSS code below?

The DIV has both an ID and a class, yet the styles are not being reflected. Any insights on this issue would be greatly appreciated.

<html>
<head>
  <style>
  .welcome {
   font-weight: bold;
   font-size: 50%;
   font-style: oblique;
   background-color: yellow;
  }

  a:hover {
   font-size: 500%;
  }

  #greeting {
    position: absolute;
    top: 200px;
    left: 100px;
    text-align: left;
  }

  p {
    color: green;
  }
  </style>

</head>

<body>
<div id="greeting" class=”welcome”>

 Sample Text
 <p>Thank you for coming here!</p>
 <p>Welcome to <a href=”ltu.html”>La Trobe</a></p>
 <p>Thank you for coming here!</p>
</div>
</body>

</html>

Answer №1

It seems like the code you have may have been copied from another source, and the quotation marks used are not the correct ones.

For example, instead of

class=”header”

it should be

class="header"

The same applies to the other parts of the code as well.

Answer №2

It appears that you have mistakenly used the wrong character to define your class. Instead, you should use either double or single quotes as shown below:

<div id="greeting" class=”welcome”><!--This is incorrect-->
<div id="greeting" class="welcome"><!--Use this--> 
<div id="greeting" class='welcome'><!--Or this one-->

Answer №3

Consider using single quotations (') in place of double quotations ("). It appears that this could be the issue at hand.

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

Developing my React application with Material UI. The fonts I've implemented don't appear consistent on Mac operating systems

Why does the font change in Mac and iOS platforms, and how can I ensure consistency across all devices? Here is an excerpt from my index.css file: body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto&apos ...

Struggling to align nested grids in the center

I'm currently following a mobile-first approach in designing my website. The entire website is contained within one main grid, and I also want to include smaller grids that will serve as links to other HTML pages. I created a sample nested grid but am ...

Issue with form not capturing information from dynamically generated fields

I'm working on creating a dynamic form for user input of on/off instructions in pairings. The HTML code defaults with one pair, and the user can add additional pairs using a button. However, upon form submission, Angular is only reading the values fro ...

Creating a dynamic table in HTML and Angular is a simple process that involves utilizing the

How can I create an HTML table dynamically without knowing the template of each row in advance? Sometimes it may have 2 columns, sometimes 4... I am looking for something like this: <div> <h1>Angular HTML Table Example</h1> < ...

The sorting icon cannot be substituted with jQuery, AJAX, or PHP

Currently, I am working on implementing "sort tables" using ajax, jquery, and PHP. The sorting function is functioning correctly; however, I need to show/hide the "sorting images". At the moment, only one-sided (descending) sorting is operational because I ...

What steps should be taken to create this specific layout using Vue-Bootstrap?

Currently tackling a web project and aiming to design two rows that resemble the following layout: https://i.sstatic.net/tLv1h.png Details of the screenshot (such as icons) are not necessary, but rather focusing on the arrangement of aligning two rows bes ...

Comprehending the importance of a selector in a dropdown menu

Trying to figure out how to create a drop-down menu from CSS tricks, I found this code snippet: <nav role="navigation"> <ul> <li><a href="#">One</a></li> <li><a href="#"&g ...

Combine words into lowercase in JavaScript variable

I'm struggling to understand why the data from a form field input is not being stored correctly in a SharePoint column data collection. Currently, when someone inputs a name into a form field, it should automatically populate a SharePoint list: http ...

Accepting user input in a PHP for loop

Almost there, but I'm having trouble with a loop in my PHP code. The issue is that the code doesn't wait for user input and continues on. I've included my code below. The Excel spreadsheet starts at row 4 with multiple choices. Once a choice ...

send a variable across multiple web pages at the same time

Currently, I have a variable that needs to be passed through multiple PHP pages. The code below effectively sends the variable to one page (index.php). echo "<a href='index.php?PHOTO=".$i."'>select</a>"; However, I am wondering how ...

Minimize the size of the MUI date selector widget

I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...

Creating a Form Right in the Middle

I'm new to web development and I'm trying to figure out how to center my form on the page using CSS and HTML. Can someone help me out? <form action="login.php" method="post"> username: <input type="text" id="txtusername" /><br /&g ...

Avoid prolonging lines in React Styled Components

I am encountering an issue with the lines between the OR. I need to ensure that they do not extend beyond their specified boundaries. To view the code on codesandbox, please visit HERE EXPECTED OUTPUT https://i.sstatic.net/IIslv.png CODE const OR = sty ...

Is there a way to fill the remaining height of the parent with the middle item when sandwiched between two others using CSS?

I am facing a design challenge with a parent container that has 3 children arranged vertically. The top and bottom children are wide (600x200), while the middle child is tall (200x600). The parent container itself is much smaller (100x200) as I want to ens ...

Having trouble with my intricate-box and grid layout - the images are all overlapping!

Could you please take a look at the image below and tell me what I might be doing incorrectly? When the page initially loads, pictures appear like this. However, if I refresh the page, the issue is resolved. https://i.sstatic.net/hIyA4.jpg If I remove th ...

Why isn't my HTML list showing up on Firefox mobile browsers?

I am using jQuery mobile version 1.4.2. Here is the code snippet from my page. HTML <ul data-role="listview" class="ui-nodisc-icon ui-alt-icon"> <li><a href="#" >Real Estate in San Jose</a></li> </ul> CSS .ui-list ...

What is the best way to ensure that all rows in flexbox have the same number and dimensions as the first row?

My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean: If there are 3 sections, the center of the text in each section should be at fifths of the webpage width. This is ...

What is the best way to initiate a Bootstrap carousel so that it begins with the first image every time a modal window appears

I am in the process of creating my own portfolio to showcase my work. I have implemented a feature where clicking on an image opens up a Bootstrap carousel. However, I'm facing an issue where the carousel doesn't always start with the first imag ...

Attempting to create a custom web user interface tree from the ground up

I noticed that yahoo ui uses div for each node in the tree structure. Is this the best practice, considering that every node, even the leaf nodes, are heavily nested with div, table, tr, and td elements? Is there a more efficient way to achieve the same re ...

The dimensions on Next.js pages exceed those of the viewport by a significant margin

I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...