Simple CSS issue

Hey, I’m not sure why this is happening, but I’m pretty sure it’s a simple fix:

my site is here:

And I want the background to be:


But for some reason, (in my chrome editor), it shows that it is linking to a stylesheet that is not the default style.css. Instead it just shows the home page url…



You have this in html, starting from line 88:

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;

A quick fix is to make it:

body {
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;

But, if you want to make a better web page, loose all the <style> elements in <head>.

nice, thanks. Switching all these themes, sometimes I forget about that stuff.

No problem :slight_smile:

But, if you want to make a better web page, loose all the <style> elements in <head>.

Really? I have heard many arguments on this. I used to use in head styling and links to stylesheet.

Then i developed this bad coding habit of inline styling. I know although it is convenient, it is bad practice

And now i am just using in head styling.

If you have links to stylesheets, does that increase the numbers of header requests and slow the load speed for your page?

The main value of CSS is the ability to link to external style sheets, to which every page in the site can link. Repeating styles on each page is hugely inefficient. The only time it’s reasonable to place styles in the head is if they will only ever apply to that page alone.

Normally, once an external stylesheet has been downloaded it gets cached, so it shouldn’t have to be requested more than once.

It is possible the way examples are often given here, on SP forums, to confuse you, team1504 :slight_smile:

But, I, for example, resort to this strategy (put style in the <style> element, in the <head>) only because it’s makes for a compact example, quick to test and easy to follow.

On a final page, style belongs to external stylesheet. And so does any scripting, it has to be placed in an external file and linked.

I completely forgot how inefficient that would be. :lol: :blush:

But since I am testing and developing, not publishing the projects yet, I agree with noonnope that once I have all the styling and scripts done to link them

Thanks for the clarification :slight_smile:

Also, for CMSs (like Wordpress) that usually use a header.php for all pages, there is no way of using <style> tags in the head to style just a specific page.

Everything is put into the external stylesheet, and body class names allow you to style specific pages differently.

Sometimes when I’m just starting a site, I’ll have a single document with <style> tag in the <head>, just because I don’t have much code, I’m saving changes to a single document, and it’s all roughing-in everything.

Once I’ve gotten to the point where I’m actually looking at the results in a browser (so after major boxes are written and styled and after content is filled the boxes mostly), I pull the styles out to an external sheet because then I’m usually starting the next page.

For one-page demos, the styles in in <style> tags for the reasons noonope mentioned: one document with all th code there to show an example, not to show that’s how you’d do it on a production page.

I purposely didn’t mention pages in production, as anything goes there really, and I too use styles in the head for such purposes. Inline CSS etc wouldn’t exist if it didn’t have a purpose. I figure the real issue is how things are set up on the final site.