Can you terminate a css style sheet

I have 2 include files with its own CSS. The are headers and footers.

So it’s like this:

-----header include----

Separate html pages here

-----footer include-------

The header includes several CSS styles and I would like to terminate the style so it doesn’t bleed into the next separate page.

I know you can do classes but would like a way terminate the css at the bottom of the header include so I don’t have to change several pages. I want the information between the includes to stand on its own merit.

I appreciate your help.

Is your page wrapped in sonething you could use as a css match?

for example, if the page is

<div class="page1">
...
...
<img class="icon" src="...">
 ..
</div>

you could apply specific overrides to your img by saying .page1 .icon {

but a css applies to the whole current page.

Edit: When you say includes… are they iframes? cause thats a different kettle of fish.

You can access stylesheets in JS

It returns an array-like object. Examining the styleSheet object it does have a disabled setter. So for instance if the styleSheet you want to exclude is the second stylesheet

<body>
  <script>
    document.styleSheets[1].disabled = true
  </script>
  ...

In the quick tests I have done, it seems to work.

edit: A more complete script

// exclude these urls
const hrefs = [
  'https://.../stylesheet-02.css',
  'https://.../stylesheet-03.css'
]

const styleSheets = Array.from(document.styleSheets)

styleSheets.forEach((styleSheet) => {
  if (hrefs.includes(styleSheet.href)) {
    styleSheet.disabled = true
  }
})

I dont… think the intent is to outright disable it? I think they’re trying to do container-level CSS…IE let the css apply, but only to its containing element.

3 Likes

Agreed - It sounds like they’re asking for container queries, which are coming but aren’t fully supported yet.

not sure if that’s going to work, going to give it some more though. Thanks for your reply.

Yes, no iframes.

Not sure if I understand that. What I have is:

<!--#INCLUDE FILE="header.asp"-->

Separate page with html and its own css between these includes

<!--#INCLUDE FILE="footer.asp"-->

So I want to contain is the css in the header include to just what’s in the header include.

Are you talking about styling the same element different ways depending on which include it’s in? So a div that’s generated out of the header.asp would have a blue background, and a div generated out of footer.asp would have a green background? That’s what you mean?

If so, that’s almost impossible to answer without knowing the generated html. You can’t do something like this

  • generate css file for header (all div backgrounds = red)
  • generate header
  • generate css file for body (all div backgrounds = white)
  • generate body
  • generate css for footer (all div backgrounds = green)
  • generate footer

That won’t work because the html is generated and served all at once and the css is applied to the end product. The browser never sees header.asp or footer.asp. They are rendered and served to the browser as one large document

HOWEVER, you can setup your includes so they generates elements which can be specifically styled. You can do that with classes or through semantic html (there are header, footer and main elements just for this purpose. This is a great reference site for semantic html: https://developer.mozilla.org/en-US/docs/Glossary/Semantics

I’m guessing your header.asp has something like this

<html>
<head>
    <title>Page Title</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<!-- header stuff here (logo/navigation/etc)
</div>
<div>
<!-- start of content -->

and your footer has something like this

<!-- start of content -->
</div>
<div>
<!-- footer content here -->
</div>
</body>
</html>

What the browser sees is

<html>
<head>
    <title>Page Title</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<!-- header stuff here (logo/navigation/etc)
</div>
<div>
<!-- start of content -->
<div>Main Content 1 Here</div>
<div>Main Content 2 Here</div>
<div>Main Content 3 Here</div>
<div>Main Content 4 Here</div>
<div>Main Content 5 Here</div>
<!-- end of content -->
</div>
<div>
<!-- footer content here -->
</div>
</body>
</html>

But if you use the semantic elements appropriately, your includes would be more like

<html>
<head>
    <title>Page Title</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- header stuff here (logo/navigation/etc)
</header>
<main>
<!-- start of content -->

and

<!-- end of content -->
</main>
<footer>
<!-- footer content here -->
</footer>
</body>
</html>

and your css becomes

header div { background: red; color: white;}
main div { background: white; color: black;}
footer div { background: green; color: white;}  

A REALLY quick and dirty example:

1 Like

Thanks for the reply. Let me look at this and see if I can apply it.

The lincludes have text, tables, etc and not colors as you ask.

I figured that. It was an overly simplified example. The point I was trying to make was if you’re trying to style the same type of element different ways, you need a way to differentiate them. Classes are one way, tweaking the html to use more semantically correct elements is another.

Very close. It’s like this and I am not using divs

```
<html>
<head>
    <title>Page Title</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header stuff here (logo/navigation/etc) **header content has its own css that I don't want to apply to content.**

<!-- start of content -->

<!-- footer content here -->

</body>
</html>
```

So wrap them - it makes the css that much easier. Anything you want to apply to just the header add it to the selector

.stuff { background: white; } /* will apply to all instances of elements with the class of stuff */
header .stuff { background: red; } /* will only apply to elements with the class of stuff IF they are contained within the header element */
footer .stuff { background: blue; } /* will only apply to elements with the class of stuff IF they are contained within the footer element */
1 Like

A little confused how to do that. I have this style at the top of my header include. What follows is a lot of asp code that draws from the database information where I only want this style to apply to:

<style type="text/css">
	.header{
		font-family: Verdana;
	    font-size: 12px;
		font-weight: normal;
		text-decoration:none;
	    color: #414141;
	}
	.header td, .header p, .header a {
		font-size: 12px;
		font-family: Verdana;
		text-align: right;
	    vertical-align:top;
	    line-height: 17px;
	    color: #414141;
	}
	.header img{}
	.header.name{
		font-family: Verdana;
	    font-size: 13px;
	    color: #414141;
	}
	.header.coName{
		font-family: Verdana;
	    font-size: 13px;
	    color: #414141;
	}
	.header span{
	    line-height: 17px;
	    padding:0px;
	    text-align:right;
	}
</style>

Now I’m confused. You already have a class there. So only those objects with class=“header” (or have a parent with the class on it) on them will get those styles. I’m really not understanding what you’re looking for.

1 Like

I hear you!

It seems like it’s bleeding through to the content below, even though there is no class to it. That’s why I was looking for something to at the bottom of the header page to stop the css.

Then you’re missing a closing tag on one of your elements which is causing your stylings to go where you don’t want it to. Validate your page, and see if that tells you anything.

Can you show us your actual header code? Might make things easier. Something tells me your code’s going to throw a lot of stuff from the validator.

1 Like

will do, thank you

It has way too much database code to do that. But will try to validate. Thank you.