make an html page with unique css/ ignoring most the universal app css

Question

Most of the html follow aa basic layout but one page needs to be a timeline, but it conflicts with current universal app css and as a result the timeline is scattered across screen. Is it possible to just make a new css for just the one page? I the timeline portion is a code snippet so as once I add in the ebr it doesn't need to touched at all.

Answer 1

Maybe you can wrap the page in an element styled like this:

.wrapper {
    all: initial;
}

.wrapper * {
    all: unset;
}

This will reset all styles of all elements inside the wrapper

Answer 2

Yes you can create a css style file for that page then, just put the styles you need to be different from the others, then import both styles to the html file but the special styles bellow the general styles ie:

styles.css

h1{
    font-size:2em;
}

specific.css

h1{
    font-size:1,5em;
}

specific.html

<link href=“styles.css” />
<link href=“specific.css” />

So in this order the second style file will override the first one, Hope it helps.