Why aren't the CSS rules I am writing being applied?

Question

For some strange reason, I cannot edit or apply styles to html in Sublime Text 2. I cannot do internal styles or link to external styles. However, if I take code that I have done into Dreamweaver or Notepad++, the styles are applied and editable? How can I get sublime Text 2 to allow me apply and edit styles?

I have Windows 7 and I'm new to HTML and CSS. I'm trying to learn different code editors, but it's quite difficult when the editors won't work :(

Thanks!

ETA: When I mean styles I mean css. I can't view any css styling on my html page on Sublime text 2. Only when I use notepad++ or dreamweaver. I can't see css in a browser when I use sublime text 2.

Here's my code:

<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Untitled Document</title>
</head>

<style> 
    body{
        background: orange;
    }

</style>

<body>
</body>
</html>

What exactly do you mean with _styles_? the code highlighting? — ConcurrentHashMap, Jan 25 '13 at 20:30
when you say it won't let you edit html, do you mean the file won't open? That you can't enter input? That the content won't show up? Or are you talking about syntax highlighting — Ben McCormick, Jan 25 '13 at 20:30
paste you entire code here so we can see what is your mistake — Панайот Толев, Jan 25 '13 at 20:31
_"When I mean styles I mean css. I can't add any"_ What _exactly_ are you trying to do? And what _exactly_ happens instead? — Alex Wayne, Jan 25 '13 at 20:45
I want to add a simple background color, like orange for example, but I all I get is the default white. I can't change the background in sublime Text two, but I can in Notepad++ and Dreamweaver. — Addy, Jan 25 '13 at 20:47
You also have a closing apostrophe after utf-8, but no opening apostrophe — BBagi, Jan 25 '13 at 21:02
Yeah, I noticed that too, so I added the closing apostrophe and it still didn't work in Sublime, sadly. The code worked in Notepad++ however and I got my orange background color I wanted. When I use Sumblime I just get the default white. — Addy, Jan 25 '13 at 21:06
So since the code is working now, this is a "how to use Sublime" question? — Sparky, Jan 25 '13 at 21:07
What happens if you run `dir` on the command line? Does the file have the file name (including extension) that you expect? — Quentin, Jan 25 '13 at 21:07
What happens if you View > Source the non-working document? Does the HTML look like you expect? — Quentin, Jan 25 '13 at 21:08
What browsers are you testing with? Does this problem show up in only one browser, or is it a consistent problem across different ones? — Quentin, Jan 25 '13 at 21:10
Another possibility: Since you specify `charset="utf-8"` in the document, have you made sure the file is actually saving as UTF-8? (File > Save with Encoding > UTF-8) — Jonathan Lonowski, Jan 25 '13 at 21:20
It does have the file name I expect. This is unregistered version (Does that matter?) and I tested the file with Chrome and Firefox. Can you elaborate on "View > Source"? I don't have that option. And no, I did not save with UTF-8. I'll try that. — Addy, Jan 25 '13 at 21:33
I did the encode with UTF-8 and that worked! ^_^ Thank you very much! I guess I was so used to Dreamweaver doing that for me I didn't think to actually do it manually. Thank you, thank you, thank you! — Addy, Jan 25 '13 at 21:37

Jonathan Lonowski · Answer 1 · 2013-01-25T21:00:33.337

5

You're issue isn't with the editor; it's likely that there are some errors in the document.

You're currently missing the opening <html>, <style> elements should be inside either the <head> or <body> rather than between them, and the charset attribute should have a 2nd quotation to surround the value:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>

    <style> 
        body{
            background: orange;
        }

    </style>
</head>

<body>
</body>
</html>

edited Jan 25 '13 at 21:00

answered Jan 25 '13 at 20:47

Jonathan Lonowski

121,453
34
200
199

It is also best practice to write the type in the style tag – Chris Bier Jan 25 '13 at 20:49
5

@ChrisB. — No, it isn't. In HTML 4 the type attribute was required. HTML 5 has given up on the idea of giving equal weight to all style and script languages (CSS and JavaScript have won) and made the type attribute optional. Using it has two effects: It gives you the chance to make a typo and have the script/style not apply and it makes the file slightly bigger. There are only negatives to using the type attribute for CSS and JS. – Quentin Jan 25 '13 at 20:51
Man I was so distracted by the red herring, I didn't even notice that. So obvious in hindsight! – Alex Wayne Jan 25 '13 at 20:54
I pasted this in and it didn't work for me in Sublime, it worked in Notepad++ however. Thank you so much though. – Addy Jan 25 '13 at 20:58
What do you mean it didn't work in Sublime? What isn't working? – BBagi Jan 25 '13 at 20:58
1

The start tag for the HTML element is optional. Browsers will error recover from an incorrectly placed style element. – Quentin Jan 25 '13 at 20:59
The adding of a background color isn't working. Or any css for that matter. I just got the default white background. – Addy Jan 25 '13 at 21:01
@Addy How are you viewing the document? If you're attempting to view it within Sublime Text, are you using a particular plugin? AFAIK, Sublime Text does not offer a feature-full "Preview" option out-of-the-box. – Jonathan Lonowski Jan 25 '13 at 21:10
It's just a text editor... what does the text look like? Does the source code get changed somehow? – Sparky Jan 25 '13 at 21:12
When I first got the editor, I did change a user preference. That change made it error and made it difficult for me to open the application, but I've since fixed that. It opens fine and everything works excepts I can't style my html with css. – Addy Jan 25 '13 at 21:26
@Jonathan Lonowski I have no plug-ins on Sublime. I've dabbled in it a few times but my main code editor was Dreamweaver. I decided to switch to sublime fully, but then I hit this little snag >_ – Addy Jan 25 '13 at 21:28

Chris Bier · Answer 2 · 2013-01-25T21:02:49.210

1

The issue is not the text editor, it must be your code. You may be opening an outdated file and looking for the changes in there. Make sure that you are saving the file in the correct location and opening the correct file when looking for changes.

Also, make sure that you are saving it as .html, Sublime Text 2 will not automatically give your files an extension like Dreamweaver or other editors might.

edited Jan 25 '13 at 21:02

answered Jan 25 '13 at 20:48

Chris Bier

14,183
17
67
103

I saved this file on my desktop because it was just an assignment I gave myself to create a simple webpage. I can save this code on the desktop and view on the browser fine when I use notepad++. I get my colored background and anything else I've applied. However, if I do the same with Sublime (with the same code), it won't work. Is there a certain folder I must save my files to when using Sublime? Thank you! – Addy Jan 25 '13 at 20:56
Nope, you don't have to save it in any particular folder but just make sure you are saving it with a .html extension as well. – Chris Bier Jan 25 '13 at 21:01
Thank you, I checked my extension and it is html. – Addy Jan 25 '13 at 21:09

Why aren't the CSS rules I am writing being applied?

2 Answers2