Can't link two html documents to the same stylesheet

https://www.codecademy.com/workspaces/61be6d53e8251449415fabd6

This project i originally wrote on VS Code and the CSS style sheet links an image from my laptop as a background-image: url()
Now i want to use the same CSS file to style a similar HTML document, that will use many of the same attributes and that will be linked to the original HTML as a part of the same website (Psalm 2, for example), the first difference would be a different background image. That’s why i gave the body element a specific id.
I can’t linked the second HTML to that same CSS. I used identical syntax: link href="style.css" type="text/css" rel="stylesheet" /
Is it even possible?

Yes. The thing to do is build up the site using only the default theme throughout and be sure to be able to browse the site seamlessly. Make the style sheet as simple as possible to achieve the most basic of goals. Every page will load the same CSS.

When you begin to section off parts of the site, each section can be given its own custom style sheet to either override the main styles that would be affected, and/or include additional style rules that will only apply to that section.

link rel="stylesheet" href="sitewide.css"
link rel="stylesheet" href="custom.css"

Be sure they load in that order.

1 Like

i’m afraid i still don’t understand. In your solution it seems you’re proposing that i link two different css files: href="sitewide.css" and href="custom.css".

i have only one css file, let’s call it sitewide.css and i want my two or more html files access it, differentiating some elements of html with id attribute where necessary.

Every page should have enough common elements to render them from a mains style sheet. There is no rule that says ALL styles should be in the same file. Hardly. The main file should apply to the entire site, every page, and be supported by a template on the server if it’s a dynamic site.

Features and sections can have their own CSS file to overlay the site styled page.

link rel="stylesheet" href="sitewide.css"
link rel="stylesheet" href="thispage.css"

In other words, don’t use the main style sheet to do custom styles. Let the custom style sheet override the main styles where needs be. No different IDs, the same id, with the same selector in the custom sheet. That will take precedence since it is lower in the cascade (loaded later).

1 Like

so i need multiple style sheets, a main one and several little ones for specific html sub pages. fine.
not the solution i was hoping for, namely one single style sheet for all html sub pages, but since no ID needed, because the “lower” style sheet overrides the “higher”, i guess it’s still straightforward enough. I’ll do that when i get a chance, thanks again.

1 Like

Say you have a site wide header image, but on certain pages you want a different background. Simply use the same selector rule in the custom style sheet.

sitewide.css

header {
  background-color: #789;
  background-image: url(sitewide_header_bg,png);
  /* other declarations */
}

custom.css

header {
  background-image: url(thispage_header_bg,png);
}

The override ruleset only needs declarations that intentionally override the site ruleset. The ones the stay the same don’t need to be written here.

1 Like

strange, but still not working.
this is a code from main html:

 <head>
        <title>Psalm 1</title>
        <link href="./Psalms/Psalm_1.css" type="text/css" rel="stylesheet" />
    </head>

this is from main css:

body {
    
    background-image: url(/home/krzysztof/MyProject/Psalms/images/slub.jpg);
    background-size: cover;
}

this is from secondary html:

<head>
        <title>Psalms</title>
        <link href="./Psalms/Psalm_1.css" type="text/css" rel="stylesheet" />
        <link href="./Psalms/Psalms.css" type="text/css" rel="stylesheet" />
    </head>

and this is from secondary css:

body {
    background-image: url(/home/krzysztof/MyProject/Psalms/images/new_cross_gate.jpg);
    background-size: cover;
}

so the secondary html doesn’t use neither attributes from main css, nor from secondary one. just opens plain html web page.

That absolute URL is starting at the root of your current volume. We can see the Psalms directory, so maybe peel back the URL…

./Psalms/images/...

Which link should load first, Psalm_1.css or Psalm.css?

Aside

Web resources, file names, image names, folder names should be written in lowercase, as is the convention. Capitalization only adds to the potential for errors.

i guess issue is something else, because the secondary html (psalms.html) won’t open any css at all, i tried with secondary css (psalms.css) only and still nothing.

peelong back to Psalms nade all ny styles dissapear, but pealing back all the way to images worked as previously (i’m talking about the main html, the secondary wouldn’t work in any configuration).

noted.

by the way, Psalm_1.css should load first.

1 Like

Given the css is in the ./psalms/ folder, the path the images would be,

./images/...

it works now, instead of href="./psalms/psalm_1.css" i did:

href="./psalm_1.css" and `href="./psalms.css"`
1 Like