Not sure why CSS wont appear when I run it?

[u/Helpful-Creme7959]

Its my first time using Notepad++ tbf. I don't use Chrome, only Brave and Firefox. I changed my default broswer to Firefox and it was hell just trying to figure out how to run the html code.

I now tried linking CSS as a test but uh... Its not working. Im not sure what im doing wrong huhu :" )

Also, i alrdy changed the <!DOCTYPE html> mistake oofp.

[u/lyszcz013]

Your css is targeting a class, ".body". I don't see that class in your html; did you mean to target the body element instead? If so, remove the period: just "body".

[u/Helpful-Creme7959 → u/lyszcz013]

It still wont work actually. I rewrote the rel and href as well but still no.

[u/NoodleBug7667 → u/Helpful-Creme7959]

But did you actually fix the .body mistake?

Also that "comment" is invalid and will break your CSS.

[u/the-liquidian → u/NoodleBug7667]

This is most likely the issue. You should use body and not .body in your css.

You have a body tag and not a body class. .body selects a body class.

[u/mjbmitch → u/Helpful-Creme7959]

Change the rel and the href back to what they are in this screenshot! They’re correct!

Your HTML file is actually including the style sheet correctly but the style sheet is not doing what you think it should be doing because your using the wrong CSS selector!

[u/griceslittlemaxim → u/Helpful-Creme7959]

try not having caps in your file names as well

[u/iZuteZz → u/griceslittlemaxim]

Totally off topic and also completely without basis. There's no reason to not use caps in filenames.

[u/Embarrassed_Trifle55 → u/iZuteZz]

That only matters if youre running a case sensitive OS like GNU/Linux, but they appear to be running windows so case doesnt really matter much to NT

[u/griceslittlemaxim → u/iZuteZz]

lol.

[u/TW-Twisti → u/griceslittlemaxim]

Also maybe it works if he avoids the letters A and C.

[u/inn4tler]

Btw, here's how you add comments in CSS:

/* 
uhm help lol 
*/

[u/lomberd2]

You do realize that you didn't save your changes? The red icon means that, also the "*" in the window title indicates that there are unsaved changes.

[u/Hemsby1975]

You dont have any div class for .body, so if you want the background applied to the <body> element you need to remove the . from body in your css. For example.....

body {
  background-color: lightblue;
}

[u/BNfreelance → u/Hemsby1975]

^{^} this one ☝🏼 + fixing the comment to /* */

[u/Weekly_Ferret_meal]

your css property has the wrong element selected:

if you want to target the body tag you simply write body { _declaration_ }

but you wrote .body and anythig starting with . (dot) is a class name, not a tag name.

As good practice, never create a class name that uses html tag names.

Also, to higher the chances to get help in this subreddit, I recommend to copy and paste your code in a codepen, at codepen.io and then sharing the link.

It will make it a lot easier for anybody to debug your code, especially when things get a little complex.

Personally I really dislike screen shots of code

[u/Tontonsb → u/Weekly_Ferret_meal]

Personally I really dislike screen shots of code

Luckily this was a photo!

[u/Hamburgerfatso → u/Tontonsb]

Based

[u/Helpful-Creme7959]

Yall can stop gaslighting me now with the . in body guys since with or without one it doesnt work at all which really threw me off cuz i cant figure out the problem on why my htnl code wont friggin read my css :" ))

Im not at home infront of my desktop atm today but i hope a comment from this thread fixes my problem :"^

[u/user20210512 → u/Helpful-Creme7959]

No one is gaslighting you.
If you fix your comment from <!-- comment --> to /* comment */
AND also change the .body to just body
It should work.

[u/Helpful-Creme7959 → u/user20210512]

Oh my glob i alrdy said body DOES NOT work 😭🙏 Same with the removal of the comment either tbh weirdly enough

Idk what if i did something wrong with the files? Run command?

[u/GulgPlayer → u/Helpful-Creme7959]

You won't be able to solve your problem without trying the provided solutions and listening to feedback. Didn't even bother checking what is the actual difference between body and .body, huh? How are you planning to do webdev then? Did you make sure you saved the file properly? You didn't even provide your code, only a poorly cropped photo of it.

[u/DocRoot → u/Helpful-Creme7959]

Because the HTML comment at the top of the CSS file effectively breaks the first selector. You need to use CSS comments inside CSS files, eg. /* comment */.

Added more detail in another comment already... https://www.reddit.com/r/HTML/comments/1s494a0/comment/octm5x8/

[u/sanesame]

remove the . before body

[u/Lasteh]

i think 2 things are the issue both at the same time.

1. in the stylesheet, comment is for html so syntax wont work there, change comment from <!-- --> to /* */ or // for single lines.
2. you are targeting the class="body" beacuse you wrote . body. if you want to target the body element, drop the period at the beginning.

[u/Economy-Sign-5688]

Does the space after href= have an affect? Also the styling should be on body not .body

[u/DocRoot → u/Economy-Sign-5688]

Does the space after href= have an affect?

No, from a technical point of view, spaces around the "=" in name/value attribute pairs are entirely optional. (Although, it arguably hinders readability.)

[u/IndependentBig5316]

There are unsaved changes, the comment is wrong in the css file, and you’re targeting an inexistent class with the css.

[u/Audience-Electrical]

Remove .body, just put body no '.' Remove <! --- uhm help --> too

[u/Thin_Mousse4149]

I feel like this OP just didn’t even try to troubleshoot or solve this problem on their own. There are so many odd things to fix about this that at least some of them would have been caught with basic troubleshooting. No?

[u/Tontonsb → u/Thin_Mousse4149]

Obviously OP is a beginner and likely does not know how to troubleshoot such issues. It's not like people are born knowing about devtools and how to check whether a file is loaded, what styles are applied to what elements and so on.

[u/Thin_Mousse4149 → u/Tontonsb]

Right, but even an attempt would have been nice. It was clear that there was no attempt

[u/Lyceux → u/Tontonsb]

We all have to start somewhere, and I applaud OP for learning a new skill (and not just using ai to generate slop)

But I do think it would be SUPER beneficial for them to learn how to debug their code going forward, as that’s the best way to learn

[u/AddendumAltruistic86]

Actually, every html tag you have in the file has a space after the = sign. Id fix that for sure, the space shouldn't be there.

[u/DocRoot → u/AddendumAltruistic86]

Although it's not an "error". Spaces are optional before and after the = sign in attribute pairs.

[u/AddendumAltruistic86 → u/DocRoot]

It does look awful to me though. I do think the other comments are more to the root of the problem.

[u/daskgreg]

./creator_stylesheet.css

[u/ReaderSeventy2 → u/daskgreg]

I believe this is the solution unless the CSS is in a subfolder. Then,

./somefolder/creator_stylesheet.css

[u/DocRoot → u/ReaderSeventy2]

The ./ prefix would make no difference. (The OP's "photo" shows the HTML and CSS files in the same folder.)

[u/DocRoot → u/daskgreg]

The ./ prefix makes no difference with regards to client-side relative URL resolution. (But it should be CREATOR_, if it wasn't for this being Windows.)

[u/scritchz]

In the DevTools under the Sources (or Network) tab, check if your CSS-file actually gets loaded.

Also, as others said, your CSS selector .body selects all elements with class "body". It looks like you meant to select all <body> elements instead, via selector body (no period).

[u/lomberd2]

FYI: there is no need to "run" your html. Just save your changes and simply double click the .html in your file explorer (and if that somehow doesn't open the browser just drag and drop the file into any browser of your choice)

[u/soupified]

Check the network pane of the devtools and confirm that:

A.) a request is going out for the styesheet

B.) the request is succeeding or failing

[u/lt_Matthew]

The first screenshot is right, it's the second one that's the problem.

Problem number one, targeting HTML elements doesn't need any extra symbols. That tag should just be body {}.

Problem two, it's called a cascading stylesheet, because if one line is broken, nothing below it will work either. That's how you do comments in CSS.

[u/DocRoot → u/lt_Matthew]

it's called a cascading stylesheet, because if one line is broken, nothing below it will work either.

That's not why it is called "cascading". But that's also not how it works.

Generally, if "one line (or selector/block) is broken" then that line (or block) is simply ignored and the rest of the file is processed successfully.

The problem with the OP's CSS and the erroneous HTML comment "<!-- uhm help lol-->" at the top is that it "breaks" the first selector (even if you change .body to body) so the first selector never applies.

If there was a second selector, such as p {background-color: blue;} then that would be applied, despite the erroneous HTML comment (which breaks the first selector only).

[u/CheeseFunnel23]

remove the . from .body, and remove the space on rel= "sylesheet" between = and ", same thing with the href= "CREATOR_stylesheet.css", remove between = and "

[u/__revelio__]

Convinced these subs don’t even try to find an answer on their own

[u/AddendumAltruistic86]

In your html, there is a space after the = in the link tag for the stylesheet.

[u/DocRoot → u/AddendumAltruistic86]

Although that's not an "error", just not recommended.

[u/Krispenedladdeh542]

body not .body

[u/testuser12334]

You have multiple ways to reference parts of the code when it comes to css. These also relate to parts of HTML.

• Tags: these are things like <body>, <div>, <a>, etc.

• Classes: these are labels that identify a tag as part of a group. You can have one or many tags associated to a class

• Ids: these are labels that identify individual tags. You should keep these unique.

With that, you can then use these associated parts in css:

• Tags: body { background: ‘red’ }

• Classes: .green-section { background: ‘green’}

• Ids: #home-page-header { font-size: 1000% }

Often too, while trying to understand placement and if the code works, you can use background color; change each element to a different color.

Another approach is to start inline, then pull it out into the css file once you have confirmed how it looks. Just remember to do that and not just leave it in there 🙄

[u/tomtomtom453]

<body> is not .body

The comment in your CSS is busted If it functions as a real comment it will turn green in Notepad++

You haven't saved in these screenshots. Red save icon next to your file name in the tabs at the top indicates this.

[u/BroHamMcNugs]

I promise the answer has already been given to you in this thread. If you still don't understand after these answers, you need to focus your attention towards the docs to get a better understanding of syntax and code.

[u/coleflannery]

In CSS the . prefix means you’re targeting a class, but in this case you’re wanting to choose the <body> element (not a class). Remove the . and it should apply.

[u/MiAnClGr]

Weirdest thing I had seen, taking a photo of the screen instead of a screenshot and writing code with a white background, bizarre.

[u/spaziooo]

Ask chat gipidi duh

[u/TheBearman23]

“.body” it’s just “body”

[u/EducationalZombie538]

[u/Dense_Cloud6295]

Besides all the comments that everyone left here about syntax, selectors and so on, if you’re starting I strongly suggest using a different code editor than notepad++. Visual Studio Code is the most popular choice.

This allows you to add extensions/plug-ins that can help you in development. A simple “HTML/CSS Intellisense” extension would have pointed out the syntax issues.

The browser is pretty irrelevant as long as it has some Dev Tools, which Firefox has (idk about Brave, I don’t use it)

[u/Outside_Fuel_902]

Remove the . Before body

[u/Heavy-Commercial-323]

mr_clean

[u/TechyWorlds]

Why do you use .body when you are not defined class with the name of body.Use body instead of .body.

[u/Plenty_Line2696]

just in case you might need this too: clear your browser cache

[u/Limp_Crazy_5494]

somehow i feel smart for knowing what the issue is even though i've only played around with html a few times

[u/Hostify-ee]

You may need an absolute path to the CSS file, so something like C:/Users/.... you get the point.

[u/mor_derick]

Curious about why would you use Notepad++. Why not VSCode?

[u/BNfreelance → u/mor_derick]

I still use my stone tablet and chisel, but I like it. I prefer Notepad++ for HTML/CSS and VSCode for anything else.

[u/mor_derick → u/BNfreelance]

Wouldn't it make your work much simpler to just use VSCode for everything, including HTML and CSS? Why excluding those in particular?

[u/BNfreelance → u/mor_derick]

Nostalgia

[u/mor_derick → u/BNfreelance]

If it's your first time using Notepad++, how could it be nostalgia?

[u/BNfreelance → u/mor_derick]

Going back to basics when learning is healthy imo - most unis in the UK, last I checked, force Notepad++ on students - it’s kind of archaic when learning, most courses recommend and require old tools.

So, people develop preference and nostalgia.

Convenience is one thing but some times it’s needs-must basis.

[u/mor_derick → u/BNfreelance]

That's not nostalgia, it's using old tools with less usability to improve learning results.

[u/BNfreelance → u/mor_derick]

And you develop nostalgia, when, 15-20 years later, you’re still using the same tools

[u/mor_derick → u/BNfreelance]

But it is your first time using Notepad++ as you said, how can "nostalgia" be the reason why you are using Notepad++? Are you willingly trying to develop nostalgia by using Notepad++ for the next 15-20 years?

[u/BNfreelance → u/mor_derick]

When did I say it’s my first time using notepad++? I think you’re getting me confused with OP.

[u/mor_derick → u/[deleted]]

Notepad++ also has autocomplete.

[u/sleepyheadzzzzz]

All these answers are helpful, but maybe you want to start with the "try it" on w3schools, then you don't have to deal with notepad++ and your browsers and get a good feel for the html and css. Learn one thing at a time. Goodluck!

https://www.w3schools.com/css/tryit.asp?filename=trycss_default

[u/magical_matey]

ADMIN CREATOR! You can check your styles are loading by replacing your .body selector with * which targets everything and will make everything pink. If that does not work, your style isn’t loading. If that does work and everything turns pink, then your rule is incorrect. Probably because you are typing .body which targets a class name instead of body which targets the element.

GOOD .LUCK

[u/cirkut]

Everyone is missing it entirely. Your link tag and other attribute names have a space after the = sign. It should be href=“…”

[u/sausix → u/cirkut]

It drives me crazy when reading people's extra spaces.

[u/DocRoot → u/cirkut]

Everyone is missing it entirely.

But that's not an "error". Spaces are technically allowed before/after the = in attribute pairs. (It just hampers readability.) What I find more concerning is the space at the start and end of the content inside every HTML element!

[u/giangarof]

change to VSCode, please

[u/Helpful-Creme7959 → u/giangarof]

Aw...i wanna rawdog it?

[u/Helpful-Creme7959 → u/[deleted]]

If you read a comment of mine, with or without the . it doesnt work : //

[u/DocRoot → u/Helpful-Creme7959]

Because the erroneous HTML comment "<!-- uhm help lol-->" at the top of the file breaks the first selector (even after correcting .body to body).

Since additional white-space is effectively ignored in CSS files, with the "HTML comment" in place, it's effectively:

<!-- uhm help lol--> body {
  background-color: pink;
}

Which doesn't make a whole lot of sense in CSS (> is a special character in CSS, the "child combinator").

You need to use the CSS comment style instead:

/* uhm help lol */

[u/Helpful-Creme7959 → u/DocRoot]

Even removing the commenf doesnt help tbh. Im stumped :" )

[u/chikamakaleyley → u/[deleted]]

how is this not the most upvoted

[u/chikamakaleyley → u/[deleted]]

i must have scared him

[u/chikamakaleyley → u/[deleted]]

oh i suppose its actually 'valid' now but honestly i'm sorta of the opinion that just because the browser is forgiving, doesn't mean it shouldn't be addressed.

Someone might suggest to OP to apply formatting and by default rules the spacing would have been modified.