Get Id of razor element to style element with id in css

Question

I'm trying to call an ID of my razor element in my CSS class.
Unfortunately, I do not have much experience with Razor.

So, this is my OverviewPageView.razor:

        <Card ElementId="newSurveyTitle">
            <CardHeader>
                <CardTitle>
                    @localizer["NewSurveyTitle"]
                </CardTitle>
            </CardHeader>
            <CardBody>
                <SurveyPreviewView />
            </CardBody>
        </Card>

This is my CSS:

.newSurveyTitle {
    background: #03625e;
}

Does anyone have a hint for me?

Answer 1

You have an element id but your CSS is selecting by class not by id.

Use:

#newSurveyTitle {
    background: #03625e;
}

Answer 2

Ids are selected with # and you have to use 'id' for that. If you use a dot selector, you would write class="newSurveyTitle". The difference is, that an ID has to be unique, a class can be used multiple times.

    <Card id="newSurveyTitle">
        <CardHeader>
            <CardTitle>
                @localizer["NewSurveyTitle"]
            </CardTitle>
        </CardHeader>
        <CardBody>
            <SurveyPreviewView />
        </CardBody>
    </Card>

Your css:

#newSurveyTitle{
    background: #03625e;
}