Why does external and internal CSS not work within HTML for me?

Question

I am using the following HTML/CSS code on our company's Intranet webpage

<div class="hello">hello</div>

<style>
.hello {
  color: blue
}
</style>

After loading the HTML I get the following result in the inspector:

enter image description here

After inspecting the HTML code I notice that my CSS code suddenly vanishes and I have no idea why. I tried other methods e.g. importing it via stylesheet but every CSS related code vanishes.

Except for inline CSS:

When I use

<h1 style="color: blue;">A heading 
</h1>
<p>A paragraph.</p>

rhe Code works properly.

you are not inspecting the div with the class hello in your screenshot. — cloned, Mar 12 '21 at 12:06
Any errors in the console? Is the cms system stripping inline css? — Professor Abronsius, Mar 12 '21 at 12:12
what cms system is it? Check the web - there may be info on that. From a corporate point of view maintaining a particular look/style is important so if you can add your own custom css you can potentially change the entire look so the dev / sys admin might have forbidden inline css — Professor Abronsius, Mar 12 '21 at 12:15
@ProfessorAbronsius We are using Jive. There are not css restrictions. — Valentin Franke, Mar 12 '21 at 12:19

score 2 · Answer 1 · edited Mar 12 '21 at 12:49

2

Put <style> inside <Head>

 <html>
 <head>
    <style>
      h1 {color:red;}
      p {color:blue;}
    </style>
</head>
<body>
    
    <h1>A heading</h1>
    <p>A paragraph.</p>
    
</body>
</html>

edited Mar 12 '21 at 12:49

Martin

22,212
11
70
132

answered Mar 12 '21 at 12:13

Dreamer

517
1
4
11

Thank you, but unfortunately it's not working. The css vanishes here too. – Valentin Franke Mar 12 '21 at 12:17
Do you have live link for page? – Dreamer Mar 12 '21 at 12:18
No sorry, it's a company webpage only visible through vpn. – Valentin Franke Mar 12 '21 at 12:19
First try CTRL+ F5 and try again. Second can you see any css files links in ? – Dreamer Mar 12 '21 at 12:49
@ValentinFranke by "vanishes" do you mean the "browser inspector" doesn't show it? There are a number of reasons this might occur intentionally... ask your company tech admin if they've got anything that will do this. If you "View Source Code" on your HTML the style should be in there? – Martin Mar 12 '21 at 12:50
@Martin Not only this, but when I save the HTML and reopen it the css is gone. – Valentin Franke Mar 12 '21 at 13:02
Well how bizarre! – Martin Mar 12 '21 at 13:37
This problem can be only if you have override for page .. do you have ? – Dreamer Mar 15 '21 at 19:00

score 0 · Answer 2 · 2021-03-12T16:04:02.377

0

 <html>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</body>
</html>

It's visible to me...

Look at following link

Stackoverflow 2 3

edited Mar 12 '21 at 16:04

answered Mar 12 '21 at 12:20

It does work of course but not for me and I dont know why! When I copy paste your code, save and reopen all that remains is:
A heading

A paragraph.
. When I use '
A heading

A paragraph.
it works'.. – Valentin Franke Mar 12 '21 at 13:05
@ValentinFranke I have edited my question(I added some link look at them...). – Mar 12 '21 at 16:04

score 0 · Answer 3 · answered Mar 12 '21 at 12:36

0

<style></style> tag must be included inside the <head></head>. Refer the MDN doc

answered Mar 12 '21 at 12:36

Naveen Vignesh

1,351
10
21

Why does external and internal CSS not work within HTML for me?

3 Answers3

A heading

A heading