Custom css without preceding class

user_2743486 0
Viewed 47

How would I do the following (convert my idea into something that works)?

(I know @media is limited to screen, all etc.)

I want to have 1! .css file and have multiple definitions for html ... ->

In this example I am defining a css-rule-set (background: red) for the page and I only want it to work when I set the media tag of html. I do not want to go through all css and set a special .special_only_this_site .classXthat_already_was_here for each and every tag ...

<html media="frontpage">
 <body> ... ... </body
</html>

and then address it as ?

/* this css is only for html with media tag frontpage */
@media only frontpage {
    html {
        background: red;
    }
}
media-queries css
2 Answers

I don't think it's possible with vanilla CSS.

But that's what SCSS is for. There you could just do this:

.frontpage {
  body {
    background: red;
  }
  a {
    color: blue;
  }
}

<html class="frontpage">
   <body> ... ... </body
</html>

which compiles to:

.frontpage body {
  background: red;
}
.frontpage a {
  color: blue;
}
user_145451600

If you are willing/able to add a single, differant class to the html/body tag of each seperate page/site then you can just use css custom properties.

Simply create a new class and apply overwriting variables to that class. You can create as many themes as you wish and will only have to change the variables within the class at the top of your master stylesheet.

/*Default Theme*/
:root {
  --colorBackground: #ffffff;
  --colorPrimary: #000;
}


/*Theme 2*/
.frontpage {
  --colorBackground: red;
  --colorPrimary: #fff;
}

body {
  background: var(--colorBackground);
}

h1,
h2,
h3 {
  color: var(--colorPrimary);
}
<body class="frontpage">
  <h1>Custom theme</h1>
</body>

THEME SWITCHING EXAMPLE

document.getElementById("btn").onclick = function() {
  document.body.classList.toggle("frontpage");
}
/*Default Theme*/

 :root {
  --colorBackground: #ffffff;
  --colorBackgroundOn: #53575c;
  --colorFrameAlpha: rgba(255, 255, 255, 0.5);
  --colorPrimary: #16848f;
  --colorPrimaryOn: #ffffff;
  --colorSecondary: #72c253;
  --colorSecondaryOn: #ffffff;
  --fontPrimary: Arial, Helvetica Neue, Helvetica, sans-serif;
  --fontSecondary: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}


/*Theme 2*/

.frontpage {
  --colorBackground: #121212;
  --colorBackgroundOn: #eeeeee;
  --colorPrimary: #bb86fc;
  --colorPrimaryOn: #121212;
  --colorSecondary: #03dac6;
  --colorSecondaryOn: #121212;
  --fontPrimary: Consolas, monaco, monospace;
  --fontSecondary: Copperplate, Copperplate Gothic Light, fantasy;
}

body {
  background: var(--colorBackground);
  color: var(--colorBackgroundOn);
  font-family: var(--fontPrimary);
}

h1,
h2,
h3 {
  color: var(--colorPrimary);
  font-family: var(--fontSecondary);
}

input {
  border: 3px solid var(--colorSecondary);
  height: 30px;
}

input[type="submit"] {
  background: var(--colorSecondary);
  color: var(--colorSecondaryOn);
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h1>Custom theme</h1>
  <input type="text" value="example input" />
  <input type="submit" id="btn" value="Switch theme" />
</body>

user_21202610
Related