如何更改此 div 容器上的 css 样式

Question

I want to overwrite a given styling template:

Based on this example: https://github.com/evilz/vscode-reveal/blob/master/views/logo.ejs

<div id="logo" style="position: fixed; top: 20px; left: 20px; z-index: 1">
    <img src="Logo.svg">
</div>

I've added a custom css form based on this sample: https://github.com/evilz/vscode-reveal/blob/master/libs/reveal.js/3.8.0/css/theme/blood.css

#logo {
  position: fixed;
  top: 100px;
  transform: scale(2.5);
}

The custom theme is loaded, but i does not change the setting on the logo.

Answer 1

The inline styles are interpreted as more important than the ones in the css file so to override them you need to use !important :

#logo {
    position: fixed;
    top: 100px !important;
    width: 300px;
}

It would be better to remove the inline styles if you're allowed to do that.

Answer 2

It's because inline style on HTML takes priority over internal/embedded CSS. So what you can do is to overight the HTML (considered as a bad practice)

<div id="logo" style="position: fixed; top: 100px; width: 300px; left: 20px; z-index: 1">
    <img src="Logo.svg">
</div>

or the best solution:

<div id="logo">
    <img src="Logo.svg">
</div>
#logo {
    position: fixed;
    top: 100px;
    width: 300px;
}