The underline persists despite the text decoration setting being applied

Despite setting text-decoration to none, I am still seeing an underline on the h1 element. For the full CSS code, you can check it out here. I'm a beginner in CSS and just modified some code I found online, so I apologize if the issue is obvious. If the problem isn't within the code below (where I suspect it might be), I will include any other relevant code.

You can view the page where this is happening here

#pagetop h1 , a:visited
{
    display:block;
    float:left;
    line-height:90px;
    color:#FFFFFF;
    text-align:left;
    font-size:27px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    float:left;
    margin-left:23px;
    text-decoration:none;
}

Answer №1

The h1 tag has a link with text decoration applied. To remove the text decoration, use the following CSS style:

h1 a
{
text-decoration:none;
}

Answer №2

By specifying your CSS selector as #pagetop h1 , a:visited, you are indicating that you want to style both an h1 and a visited a. However, the comma in this code actually signifies separate selectors rather than a combined one.

To target an a element that is a descendant of an h1 within the #pagetop container (without affecting all h1 elements), you can modify your selector like this:

#pagetop h1 a { text-decoration: none; }

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

Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS fil ...

Can someone provide guidance on incorporating a checkbox into my WordPress site?

I've created a toggle switch and now I want to incorporate it into my website, but I'm unsure of how to do so. The site uses the bbPress plugin on WordPress, and I would like users to be able to click the toggle switch when leaving a comment, wit ...

Adjust the line height of the paragraph class using Bootstrap customization

Currently, I am working with Bootstrap V4 and I am facing an issue where I need a customized paragraph to have a line-height of 1. However, I have been unsuccessful in overriding the default Bootstrap setting of approximately 1.5. <p class="ptim ...

beginning the process of aligning the select element with the label in a form

.surveyform-class { background: yellow; margin: 0 25%; width: 50%; border-right: 40px solid yellow; } .main-div{ background: lightgrey; width: 50%; height:100%; margin: 0 25%; border-right: 20px solid yellow; border- ...

What is the best way to make a scrollable `div` that is the same height as my `iframe` with Material-UI?

I am developing a responsive Video Player with an accompanying playlist designed for Desktop and larger screens. The playlist has the potential to contain a large number of items, possibly in the hundreds. To view my progress so far, please visit https:// ...

Troubleshooting an issue with Laravel's Bootstrap 5.2 dropdown functionality

After setting up a pre-configured navbar from the Bootstrap website, I noticed that the dropdown feature is not working. This issue arose with the latest version of Bootstrap 5.2 which was integrated into my Laravel project without any modifications to the ...

Can you tell me the Bootstrap 4 equivalent class for '.well'?

While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...

What is the process for loading my new fonts into an HTML document?

I am trying to incorporate two specific fonts, bigsmalls-bold and lft-etica-web, into my CSS and HTML code. Unfortunately, I have been unable to find a way to download these fonts directly. The only information I found was a JavaScript code snippet on I a ...

JavaScript code that activates several hovering elements

I am a beginner in the world of JavaScript and I'm attempting to create a simple function that will activate multiple div hover effects. I have tried various approaches so far, but I believe this code is closer to the solution. Any assistance from som ...

Guide on submitting a pre-filled form with data pulled from an array of objects using vue

My current school project involves creating a web app for dog walkers. I am currently working on a form to update the information of dogs owned by a user. This data is stored in an array of objects, where each object represents a dog's information. I ...

Optimizing web content for iOS Safari with min-height media queries

I'm currently working on a Bootstrap-based photo browser that needs to have a responsive 4:3 aspect ratio. To achieve this, I have implemented the following approach: #carousel { width: 320px; height: 240px; ... } Additionally, I utilize media ...

What is the best way to equalize the size of mismatched images in CSS?

My Objective https://i.sstatic.net/KgK0F.png I aim to align images of different sizes and shapes within the same frame using only CSS. The image size should adjust proportionally as the browser window is resized. Current Progress JSFiddle Curr ...

What is the best method to remove the gap between my two horizontal div elements?

Is there a way to eliminate the small space between my two horizontal sections here? I've already attempted using margin: 0px; and padding: 0px; on the container, but it doesn't seem to be effective. Any assistance would be greatly appreciated! ...

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

Looking to place the bootstrap menu icon on the right side of the page

I have a bootstrap menu item on my website and I want to move the menu icon to the right corner of the page. How can I modify the code to achieve this? #menu { position: relative; color: #999; width: 200px; padding: 10px; margin: auto; font-fa ...

Acquire the content of a nested element using jQuery

I have a navigation list with separate headlines and text for each item. The goal is to switch the main headline and paragraph of text when hovering over a navigation item. CodePen Example Currently, my code displays all text. I only want to display the ...

What is the best way to make sure every HTML element on this page is perfectly centered on the screen?

To center the dropdownlist and the three textareas on the screen instead of sticking to the left, you can adjust the CSS by adding the following styles: Add "text-align: center;" to the parent container to center align the elements. Add "display: inline- ...

What is the best way to showcase a half star rating in my custom angular star rating example?

component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { projectRating ...

Mobile-responsive website design with spacious margins and prominent fonts showcased on visual design mockups

Working on a project where the font-size ranges from 25px to 80px and the margins seem excessively large. Upon testing the layout in the Chrome mobile emulator, the fonts appear unusually large. Is there a specific reason for using such large font values ...

Bootstrap Collapse Plugin allows you to toggle the visibility of

Is there a way for all the multicollapses to automatically close when a new one is opened? I specifically want the "Accordion Item # 2.1" to collapse when I click on "Accordion Item # 1" or "Accordion Item # 3". Currently, my code only closes "Accordion It ...