Apply Stylesheet to One Product Page Section

Technical Q&A
1

Good Afternoon

I’ve put together some code (with the support of W3) that gives me a nice and simple gallery slider with buttons on either side of the image (on the product page) that works a charm.

However, because of the stylesheet reference to w3schools CSS file, it changes the look and feel of the entire product page - which isn’t good! This line is required in order for the buttons to appear properly on the images, so is there a way I can isolate the reference to the CSS file to enable the image gallery to work, but without affecting the rest of the page?

Code as follows:


  
![IN_HP_Essence_9523_7075_EssenceMaze_7071_001.jpg?v=1619534078|1500x844](upload://fG9u8xD1Q2YYwuyQxJ0UnXK1mOI.jpeg)

  
![IN_Essence_9926_EssenceMaze_9505_003.jpg?v=1619534078|1500x844](upload://81RVpNEfpspHAQ2nCJU1fZZV1ZY.jpeg)

  
![IN_Essence_8012_9504_EssenceStructure_7511_001.jpg?v=1619534078|1500x844](upload://ar8YcgBYMXO59N5MGMv6VOWCpcT.jpeg)

  
![IN_Essence_6408_7075_2925-2915_EssenceMaze_7071_9107_001.jpg?v=1619534078|1500x844](upload://ilcD1Xcr4P04CyftPT9v3B4YykD.jpeg)

  

    
❮

    ❯

If I remove the line that references the CSS file, then the buttons don’t render properly :disappointed_face:

I simply add this code to the very bottom of the product page, and it works nicely - just need to resolve this formatting issue!

Thanks for any help!
Lee