Managing Stylesheets in a Multi-Page Website

I'm trying to design a multi-page website. I finished styling my index.html page and now it's time to add a new page, contact.html. I then duplicate the index.html file and rename that new file to "contact.html". I notice that all of the styles associated with that index.html file are also copied over to contact.html. I am able to edit contact.html's HTML without the changes affecting index.html, but that isn't the case when editing the styles. Both pages are affected by the changes.

I'm unable to edit the <head> of the HTML to pick and choose which stylesheets are added to the files because <head> is locked.

How do I manage where stylesheets are applied so that I can have a multiple page website with different styles on each of those pages like I would without bootstrap studio?


You can't, and it's strange that you would want separate CSS files for each page anyways really. If you don't want all the CSS and all the JS files connected to every page (yes, this is a pet peave of many of us who have asked for the ability to set this up so we can tell the app what CSS and JS goes with each page) you will need to edit that after export, or you can create an Export script and set that up in the Settings of the project. You'll have to get help elsewhere on how to do the script, not my forte unfortunately.

Other than that, the whole point of creating CSS was so that it could be applied to all pages and make editing easier. I would suggest you brush up on your CSS in order to learn how to adjust class names and add new classes to make things different in each page. Typically you would alter a class name and change the attributes as needed, this way you don't have one class 'always' affecting all pages.

Hope that helps.