Why HTML and CSS doesn't work?

Question

Currently I'm learning HTML and CSS on W3Schools and now I've stuck at this chapter. Beforehand I want to say that I'm learning it at my Samsung Galaxy Note 4 (with Android 5.1.1). I'm using the AWD - IDE For Web dev, Total Commander, Samsung Internet Browser and Google Chrome.

My problem is, that I don't know why my HTML and CSS doesn't work.

When I'm trying to define the CSS-Styling in a extern file I get this.

So there are two questions I have. Where does the ÁÁ come from and why the HTML-Document is'nt designed as in CSS definded.

When I'm trying to define the CSS-Styling intern I get this.

Then the background just changes but the heading and the paragraph doesn't.

The code that I'm used at my phone is a one-to-one copy from the chapter from W3Schools. I've also tried this with other Browsers and editors, but still doesn't work. I've also noticed that when I save the extern css-file in a own folder css/styles.css that I get the same result as the css-stylesheet intern.

But my final question is: What's wrong with that?

Here is the project folder from this problem.

Does this have anything to do with Android besides you are testing it on an Android phone? — codeMagic, May 16 '16 at 17:37
@I'm doing this on android because its more confortable, I'm learning webdevelopment by the way in the subway ;-) — User378423905723845, May 16 '16 at 17:47
*Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve].* — BSMP, May 16 '16 at 18:24

score 1 · Answer 1 · edited Sep 20 '21 at 03:25

1

I'm assuming that the odd characters are caused by some sort of improper character encoding which could be caused by your IDE.

this is what I see when I open your styles.css file in the firefox dev tools page inspector. Clear that up and the external sheet should work properly.

You should also declare a !DOCTYPE as well as encoding. It helps to ensure that the browser renders the type of html you're expecting. A more thorough explanation can be found here.

i.e. <!DOCTYPE html> and <meta charset="UTF-8">

edited Sep 20 '21 at 03:25

Nimantha

6,405
6
28
69

answered May 16 '16 at 18:05

finesse.png

53
1
6

The `index.html` file provided in the zip doesn't include a link to the external stylesheet either. (The ` – BCDeWitt May 16 '16 at 18:10

score 0 · Answer 2 · edited Sep 20 '21 at 03:25

Check out this thread - you're probably experiencing the same thing: https://stackoverflow.com/questions/1461907/html-encoding-issues-%C3%82-character-showing-up-instead-of-nbsp[enter link description here]1 tldr: There's a non-printing character that isn't getting encoded as you'd expect and it spits out this odd character. It should disappear if you set your character coding explicitly using .

score 0 · Answer 3 · answered May 16 '16 at 22:09

0

Remove the space between the element declaration and the keys.

Ex.:

body{background-color:red;}
h1{color:blue;}
p{color:green;}

answered May 16 '16 at 22:09

Wesley

92
1
3
9

Why HTML and CSS doesn't work?

3 Answers3