CODEWITHSUNDEEP
htmlcss
gal almighty
gal almighty

Reputation: 91

Overriding a defined CSS definition?

I am pretty new when it comes to CSS, trying to self-teach myself and I have stumbled upon an obstacle.

I took a random piece of HTML code with a CSS style reference sheet attached to it and I have tried to modify and analyze what exactly is going on there.

What I am trying to do override is this method:

#ds_div::before {
    display: flex;
    justify-content: center;
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAABkCAMAAADud0VvAAABYlBMV…7Th8ga23yve+pTdP/XHhwSAAAAAAj6/9oTRgAAAAAAAAAWAbhzwJPM92wRAAAAAElFTkSuQmCC);}

the designated div is <div id="ds_div">. When I looked at the CSS style sheet there was no ::before method mentioned, therefore I did not know how to proceed. This is the only method that I want to change. This is the link To the style sheet.

What I want to know is how do I override only this method, if at all possible?

Upvotes: 0

Views: 101

Answers (1)

JackHasaKeyboard
JackHasaKeyboard

Reputation: 1665

CSS precedence like all code, I guess) is ordered from top to bottom, meaning whatever comes below over-rules what came previously.

The way your browser renders CSS will be over-ruled as soon as it comes across one of your stylesheets. If it isn't working it must be because some other stylesheet is being loaded after yours.

How to rectify this so that your stylesheet is loaded afterwards depends on the platform you're using (if any).

Like @Andrew Ice said, you can append !important onto a line of CSS and it'll over-rule other styles. This is mostly a bandaid solution, though. Try to just load the stylesheet properly if you can.

Upvotes: 1

Related Questions