change the appearance of a link within an html div

I have a specific div where I want to customize the link style, overriding the global settings. In my code, I have two different styles for links - one is global and the other is specific. Here's how it looks:

A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}

#macrosectiontext
{
    position:relative;
    font:Arial, sans-serif;
    text-align:center;
    font-size:50px;
    font-style: bold;
    margin-top:245px;
    opacity: 0.6;
    background-color:transparent;
}

#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}

When using the div ID like this:

<div id="macrosectiontext"><a href="www.google.it">bla bla bla</a></div>

It appears that my customization doesn't take effect as expected. The div continues to inherit the global link style.

csshtmlhyperlinkstylesheet

Answer №1

CSS operates based on inheritance, so it's best to only override the properties you need to modify.

It's recommended to always write HTML & CSS in lowercase, although your current HTML and CSS are correct.

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none; 
  color: #f00;
}

#macrosectiontext {
  position: relative;
  font:Arial, sans-serif;
  text-align: center;
  font-size: 50px;
  font-style: bold;
  margin-top: 245px;
  opacity: 0.6;
  background-color: transparent;
}

#macrosectiontext a:link {
  color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
  color: #fff;
}

To demonstrate that your code is functioning properly, I have created a fiddle for you (I changed the hover color for demonstration purposes)

Answer №2

  1. To enhance the CSS, it is advisable not to rely on the id "#macrosectiontext a:link..." for the link code but instead opt for a class ".macrosectiontext"

  2. Consider using a lowercase "a" rather than an uppercase "A" in the link style

  3. If you only intend to use the style a few times, enclose the link within a span tag and reference your style from the span tag instead of the div.

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

Hide or show list items in an unordered list using jQuery

I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script: HTML <ul id="myList"> <li>One</li> <li>Two</li> <li> ...

javascriptjqueryhtmlcsslist

Tips for integrating Shopify CDN into Bootstrap

Hello everyone, I'm a beginner in web development and recently got a project to create an ecommerce website for a client. The client wants something similar to www.gallerydept.com. However, when I inspected the site, I noticed that it uses Shopify&apo ...

htmlcssbootstrap-4shopifye-commerce

Video player for Angular 2

Hey there! I am currently exploring Angular 2 and attempting to create a video playlist feature. My goal is to showcase my favorite videos in a table layout, where clicking on a row will lead to the playback of the selected video. Right now, I am passing t ...

javascripthtmlangular

Navigate to a specific section in an Accordion with the help of jQuery

I currently have 2 pages: page1.html, which contains a series of links, and page2.html, where an Accordion is located. The Query: I'm wondering if it's feasible to link directly to a specific section within the Accordion. For instance, if I want ...

javascriptjqueryhtmlcss

Switch between dark and light themes on the Tradingview widget

I have integrated a TradingView widget into my website and I am working on adding a dark/light mode switch to the site. I would like the widget color to change along with the background in the switch. See Widget Screenshot TradingView Widget - Widget sour ...

javascriptcsswidget

Stop transparent icons from being covered by the background color

My current setup includes an icon within a button, where I want the icon to be transparent and the button background color to be white. However, the white background color is obscuring the transparency of the icon. Is there a workaround for this issue? Be ...

htmlcssreactjsweb

Incorporate a single md-switch to control various other md-switches within an HTML/JS setup

I am looking to implement a feature that allows users to toggle entire group sections on and off. When a group section is toggled off, I want the individual sections within that group to also be disabled. Conversely, when a group section is toggled on, I w ...

javascripthtmlangularjs

Issue with PHP's exec() function not behaving as desired

<html> <head> ...

phphtmlexec

A guide on utilizing Xpath to reference a tag within a class

Trying to obtain the website link by using xpath and selenium with a reference to the class pv-contact-info__contact-type ci-websites. [Here is the html snippet being referenced][1] sel = Selector(text=driver.page_source) website = sel.xpath("//*[@class= ...

htmlxmlseleniumxpathweb-scraping

Troubleshooting issue: Bootstrap mixins not functioning properly due to LESS nesting

Recently I've been experimenting with Bootstrap and LESS, attempting the following: LESS: .class1 { .jumbotron; div { .container(); color: white; } } Here is the relevant part of the HTML code: <div class="class1"> <div> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3less

Suggestions for incrementing a button's ID every time it is clicked

I am working on a button functionality that increases the button id when clicked. Below is the HTML code for the button: <input type="button" id="repeataddon-1" name="repeataddon" class="repeataddon" value="add" > Accompanied by the following scr ...

javascripthtmlyii2

Loading a page with a subtle fade-in effect using jQuery

Looking to add some jQuery functionality to my navigation menu in order to have the page wrapper fade in and out when a main nav link is clicked. While the code itself is functioning properly, I am encountering a couple of issues: There is a brief flash ...

javascriptjqueryhtmlcssscope

Create dynamic animations using AngularJS to transition between different states within an ng-repeat loop

Here's a simplified explanation of my current dilemma: I have an array containing a list of items that are being displayed in an Angular view using ng-repeat, like... <li ng-repeat="item in items"> <div class="bar" ng-style="{'width ...

javascriptcssangularjscss-animations

Unable to implement Bootstrap 5 Hamburger Animation - Looking for solutions

SOLVED I successfully resolved the issue :) The challenge was: $(function () { $('.navbar-toggler-button').on('click', function () { $('.animated-hamburger').toggleClass('open'); //Chrome expert mode ...

htmlcsshamburger-menubootstrap-5

Customize Bootstrap 4 scrollbar overflow with a sticky-top feature

Currently, I have a layout consisting of two rows: the first row is fixed to the top of the screen using sticky-top, and the second row fills the remaining height on the screen with min-vh-100. New content will be added dynamically to the second row's ...

htmljquerycssbootstrap-4

font-family choice in web browsers

My current goal is to configure the browser to utilize the Quicksand font, which I am sourcing directly from a file located in the same directory. When I structure the code as shown below, the browser successfully implements the Quicksand font: @charset " ...

cssfont-family

Arranging content in a horizontal row using div elements

My webpage features two div elements. One of the div represents header content, while the other div displays details content. I want both sets of content to be aligned side by side. Specifically, I need the details content to always appear on the right-han ...

htmlcss

CSS background color using over 20 different shades

I am seeking a way to dynamically change the background color of an object based on a specific value. Specifically, I want to create a percentage bar with 100 different background colors possible, corresponding to each percent (excluding when empty). The w ...

cssbackgroundswitch-statementgradientpercentage

What is the best way to correctly redirect users to different pages based on their user group in Django?

I have implemented a new feature where banned users, those without any group affiliation, are directed to a specific page banned_alert when they try to post content. However, upon testing this feature, Chrome displays an error message saying "This page isn ...

pythonhtmldjangoweb

Ways to modify the color of a particular list item

I am looking to change the color of only the items in a list that contain a number to blue. Specifically, I want to target the first list (the ol li) that starts with a number in it. ol li { color: blue; } <ol> <li>League 1<br> ...

htmlcss