I simply have,

<div>
    <div>
        <div class="custom-label">
            <lightning input label="enter input"></lightning input>
        </div>
    </div>
</div>

neither external css nor inline css are working, even with !important tag in css not working, the css i applied was:

.custom-label .slds-form-element__label{ 
    font-size:16 px;
    colior:red;
    font-weight: bold;
}

not working

Problem Statement:

I am trying to apply custom CSS to a lightning-input component inside a nested structure. However, neither external CSS nor inline styles seem to work, even with the !important tag.

HTML Code:

<div>
    <div>
        <div class="custom-label">
            <lightning-input label="enter input"></lightning-input>
        </div>
    </div>
</div>

CSS Code:

.custom-label .slds-form-element__label { 
    font-size: 16px; 
    color: red; 
    font-weight: bold;
}

Issue:

The CSS styles I applied are not being reflected in the component. I tried using the !important tag, but it still doesn’t work. Questions:

Why is the custom CSS not being applied to the lightning-input label? How can I correctly apply custom styles to lightning-input labels? What I Have Tried:

Ensured that the CSS file is properly included and linked. Used the !important tag, but it still didn’t work. Additional Context:

I am using this component inside a Salesforce Lightning Web Component (LWC). Is there a special way to apply custom CSS to standard Lightning components?

Thank you!

i simply have,

neither external css nor inline css are working  , even with !important tag in css not working, the css i applied was,

.custom-label .slds-form-element__label{ font-size:16 px; colior:red; font-weight: bold; }

not working

I simply have,

<div>
    <div>
        <div class="custom-label">
            <lightning input label="enter input"></lightning input>
        </div>
    </div>
</div>

neither external css nor inline css are working, even with !important tag in css not working, the css i applied was:

.custom-label .slds-form-element__label{ 
    font-size:16 px;
    colior:red;
    font-weight: bold;
}

not working