Within the body class, text appears with a subtle shadow effect, however, the links within the body also inherit this shadow

I'm encountering a problem in my CSS:

body.transparent {background-color: transparent;color:#ffffff;text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;}

The text-shadow was intended to apply only to simple, non-formatted text. However, it is also affecting the links.

How can I prevent the links on this body class from having a shadow? (Note that it should only apply to this specific body class and not others.)

Answer №1

body.transparent a {text-shadow: none;}

Answer №2

To implement a style for the included 'a' tag, it is necessary to create a specific style or one for all descendants of transparent, which will override the default settings.

For instance:

.transparent * {background-color: none; color: #000000; text-shadow: 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

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...

How to create an HTML hyperlink in CakePHP version 2.2.1 and above?

Is there an easy way to create an HTML link using the HtmlHelper class in CakePHP 2.2.1? Let's say I have a route set up that maps /finest-perfumes-ever-2012 to the Perfumes/Index Controller/Action. I want the generated link to be: somedomain.com/f ...

The text exceeds the maximum width of the table column

Currently, I am working with a table and utilizing the <col> tag to define column widths. However, I have encountered an issue where one of the columns, set at 5% width, contains a title that is 16 characters long, wider than the allocated 5%. As a ...

Assistance needed in restructuring code to eliminate white space between Divs

I am looking to combine two divs in the header section of my website. Both divs should have a black background with no white space between them. Can anyone provide advice on this? Additionally, I would appreciate any recommendations on how to structure my ...

Tips on increasing video size upon visiting a website. HTML, JavaScript, and potentially jQuery can be used for video animation

Is there a way to create a video pop-up in the same window when visiting a website? I want the video to increase in height from 0 to a specific height and move slightly upwards. Are there JavaScript or jQuery functions that can achieve this effect? I wou ...

What is the best way to add spacing between the fields within a Bootstrap 4 form row that spans across 2 rows when viewed on small displays?

Trying to create a bootstrap 4 form with fields in one row for larger screens and two rows for smaller screens. The attempt was made using the following code: <div class="form-group row"> <label class="col-sm-2 col-form-label">File:</lab ...

CSS stylized horizontal navigation bar completed

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; wid ...

Stop VueJs RouterView's Transitions from triggering on carousel initialization

As I dive into the world of VueJs (3), I've implemented a transition effect on my routes to give my pages a smooth appearance. Everything seems to be working well, but there's one issue - when I refresh the page (F5) or on first load, the transit ...

What is the best way to incorporate a unique font with special effects on a website?

Is there a way to achieve an Outer Glow effect for a non-standard font like Titillium on a website, even if not everyone has the font installed on their computer? I'm open to using Javascript (including jQuery) and CSS3 to achieve this effect. Any sug ...

Adjusting the height of an element as you scroll will activate the scroll event

One issue I'm facing is with adding a class to my header. The goal is to reduce the height of the top part of the header when the user scrolls down and then remove the class when they scroll back up. While this functionality is working, there is an un ...

Converting HTML Form Data into CSV with Multiple Rows

I currently have a form that generates a CSV file with data from select elements in the HTML form. The columns in the CSV correspond to the selected options in the form, but I need to extend this functionality to populate multiple rows in the CSV. Expecte ...

.toggleClass malfunctioning inexplicably

I've been struggling to make a div box expand when clicked and revert to its original size when clicked again. It seems like a simple task, but no matter what I try, I can't seem to get it right. I'm not sure where I'm going wrong, as t ...

Leveraging AngularJS to enhance the dynamic HTML content within Datatables

My angular application includes a Datatable where I alter cell content to include HTML elements. In the given code snippet, I specifically modify the cell content of the 5th column to incorporate links. Additionally, I intend to implement a tooltip featur ...

Is there an animation triggered by hovering the mouse over?

I've implemented a bounce animation that is triggered by mouseover on an image. Currently, the animation only happens once, but I want it to bounce every time the mouse hovers over it. Here is the HTML code: <div class="hair"> <img src= ...

Struggling to customize checkbox design using HTML and CSS

Why am I unable to style HTML checkboxes with CSS? No matter what I try, the appearance of the checkboxes remains unchanged: Here is the HTML code: <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /> <nput type="checkbox" id ...

At times, the Kendo UI Tooltip may linger on screen longer than expected, failing to disappear as

I've been experimenting with this issue for quite some time now, but I'm stumped. Whenever I quickly move my mouse cursor over a series of links, occasionally a tooltip will linger on the screen even after the cursor has moved away from the link. ...

Tips for getting rid of the glowing effect on MUI slider thumbs when they are in focus

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

Having trouble pinpointing the CSS/jQuery conflict and resolving it

Take a look at this page: At the top right of the website, you'll find a search box. However, it appears to be poorly designed. On this page, you can see the normal and desired behavior: (click on 'advertenties' to view the jquery effect). ...

Is there a table that allows users to input percentages?

Looking for help with a table that has 2 columns: "Activities" and "Average % of Time". Users need to input a % value for each activity in the "Average % of Time" column. There are 7 rows for activities. The goal is to ensure that the sum of the % values f ...