The CSS root variable is failing to have an impact on the HTML element's value

I'm in the process of changing the text color on home.html. I've defined the color property in a :root variable, but for some reason, it's not appearing correctly on the HTML page.

Take a look at my code:

home.scss

:root {
--prim-headclr : #004c3f;
}

/* heading */
.phead_clr{
    color:var(--prim-headclr);
}

home.html

    <div class="col-md-12 phead_clr">
        <h1>Build an online business—no matter what business you’re in</h1>
    </div>

Can anyone explain why the color specified in the root variable isn't being applied to the HTML side?

htmlcsstypescriptsass

Answer №1

Apply the 'phead_clr' class to h1 tag.

<div class="col-md-12">
    <h1 class="phead_clr"> create a successful online business—regardless of your industry</h1>
</div>

*** If the css is being overridden by other variables or default variables, you can also use !important.

:root {
  --prim-headclr : #004c3f !important;
}

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

Using React with Typescript: How to pass a function as a prop to a child component and call it from within

I am trying to pass a function as a prop to a child component so that the child can call it. Here is my parent component: interface DateValue { dateValue: string; } const Page: React.FC = () => { const dateChanged = (value: DateValue) => { ...

typescriptreact-nativeionic-react

Angular does not display results when using InnerHtml

I'm currently in the process of creating a weather application with Angular, where I need to display different icons based on the weather data received. To achieve this functionality, I have developed a function that determines the appropriate icon to ...

cssangularinnerhtml

Guide to organizing elements in an array within a separate array

Our array consists of various items: const array = [object1, object2, ...] The structure of each item is defined as follows: type Item = { id: number; title: string contact: { id: number; name: string; }; project: { id: number; n ...

javascripttypescript

Chrome Flexbox Hacks: Controlling the Size of Nested Items

How can I ensure that an element nested within a flexbox member in Google Chrome is limited to the size of its container? For example, consider the following scenario: <div style="display:flex; flex-direction:column; height:100vh;"> <div style= ...

htmlcssgoogle-chromeflexbox

Eliminate extraneous space with the clearfix:after pseudo-element

Could use some help figuring out how to remove the unwanted whitespace caused by clearing the float (specifically after the tabs). Any suggestions on how to fix this issue? Take a look at the code snippet below (jsfiddle): /* Clearfix */ .clearfix:af ...

jqueryhtmlcss

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

javascriptjqueryhtmlcss

Two-column layout with consistent height vertically, but varying heights on individual rows

By using JavaScript, I am able to ensure that two columns have equal height. The left column contains user input which can vary in length, causing some columns to have more content than others. My current issue is that there are multiple rows instead of ju ...

javascriptjquerycss

What is the most reliable php form mailer out there right now?

Having focused on CMS systems in my recent years of work, I haven't had the need for a form mailer in quite some time. Now, however, I require a straightforward PHP form mailer - preferably with a responsive web form. I can handle the design aspect my ...

phphtmlemailresponsive-design

Attain three images with precise dimensions using CSS

Having trouble fitting 3 images in the same row? The issue arises when the images have different sizes, causing everything to shift. Any advice on how to address this problem? Thank you. HTML: <div class="first-slot"> <di ...

cssbootstrap-4

``Is there a way to retrieve only a specific portion of an HTML

Greetings everyone! Here is a snippet of my sample code: <?php $html = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x ...

phphtml

Guide on utilizing a module in TypeScript with array syntax

import http from "http"; import https from "https"; const protocol = (options.port === 443 ? "https" : "http"); const req = [protocol].request(options, (res) => { console.log(res.statusCode); }); error TS2339 ...

typescriptnode-modules

How to center align an HTML page on an iPhone device

I am currently testing a HTML5 webpage on my iPhone, utilizing CSS3 as well. The page appears centered in all browsers except for the iPhone, where it is left aligned. I have attempted to use the following viewport meta tag: <meta name="viewport" conte ...

iphonehtmlcss

"Error message: TypeORM DataSource encounters a password issue with the client

Here is the content of my data-source.ts file: import {DataSource} from "typeorm"; import path from "path"; import {User} from "./entity/User"; import { config } from "dotenv"; config(); export const AppDataSource ...

typescripttypeorm

Creating an extended class in Typescript with a unique method that overrides another method with different argument types

I need to change the argument types of a method by overriding it: class Base { public myMethod(myString: string): undefined { return; } } class Child extends Base { public myMethod(myNumber: number): undefined { return super.m ...

typescriptinheritanceclass-method

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Let me explain a bit, I have a master page named UserProfile.master which has a content placeholder linked to UserProfileWall.aspx. Now, I am trying to incorporate some additional JavaScript and a second CSS file in the userprofilewall page. However, whene ...

javajavascriptjqueryasp.netcss

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

What are the steps to troubleshoot a Node Package Manager library in Visual Studio Code?

I have created a Typescript library that I plan to use in various NodeJS projects. The source code is included in the NPM package, so when I install it in my projects, the source also gets added to the node_modules folder. Now, during debugging, I want to ...

javascriptnode.jstypescriptvisual-studio-coderedis

How to define a TypeScript recursive object with a defined endpoint?

Welcome to my first question! I am currently facing an issue with defining an object to store strings in multiple languages. I am looking for a flexible solution and have considered using a nested object structure. However, I want the final object to adhe ...

jsontypescripttypesinterface

Arranging elements within distinct div containers

Utilizing Bootstrap 4, I crafted a card-deck containing two cards. Despite the equal height of both cards, the alignment of elements is affected by varying text lengths. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min ...

htmlcsstwitter-bootstrapbootstrap-4

A guide on transferring radio button values to another program and saving them into a database with the help of PHP and jQuery

I have encountered an issue with storing radio button values in a database. Specifically, I want to assign the value of 1 for "Yes" and 0 for "No". To accomplish this, I am utilizing two scripts - a.php and b.php. The former obtains the radio button values ...

javascriptphpjqueryhtmlmysql