Unique CSS for each page?

3240d7bb18564933b26125d731b62237.png
Such situation:
a master page index.html on which the links link1.html, link2.html, link3.html.
Each page has a container that is replaced by ajax depending on the open page.
The problem is that every page must be kastomiziruet: to change the background colors, Hadera and futter, and the code in head, body, header, footer located only on index.html.

Question — how to write unique css for each page?
Know what method to write each link1.html, link2.html, link3.html
code <style>...</style> is wrong and dirty, even though it works successfully.
I'm not very strong in the code, so asking for your help.

Just in case here is the script
the <script>
 function get_content(adress) {
$.ajax({
 url: adress,
 success: function(data) {
$('#page_content').html(data);
},
 error: function() {
 alert("Error! Page is not available");
}
});
}

 </script>
July 8th 19 at 15:50
3 answers
July 8th 19 at 15:52
the css file should be the one that each page of your class list in the body for example through a short cascade customize.
I agree, just change the class of the Body or main container... o2label.ru here I did change themes) - Ollie.Stant commented on July 8th 19 at 15:55
the problem is that I don't have any pages except index.html class body

I have used this script wemarus.ru/jquery/255-ajax-eto-prosto-smena-inform... - samanta_Braun74 commented on July 8th 19 at 15:58
um... I'm not talking about the class talked about the body element... are you afraid to ask with layout generally dealt with? - Angelica.Bradtke commented on July 8th 19 at 16:01
had but very small — only landing page simple and without any frills typeset. Can you please throw a link to an example of some, where it is implemented? I looked above in the comments, there using data-value is somehow spelled out - samanta_Braun74 commented on July 8th 19 at 16:04
Alexander Bulgakov @alebul
why data-value? You have multiple pages, well, add to the body element of type classes -

.style1
.style2
...
.styleN

And write styles for each page we need rules in the form
.style1 need selector need a rule
.style2 need selector need a rule - Angelica.Bradtke commented on July 8th 19 at 16:07
: so only worked when each page was the body element. now the container is changed, therefore, load only part page, where there is no body.
on the left side here index.html and on the right a separate page that contains only the contents of the container images.vfl.ru/ii/1465357214/bb584297/12950699.png
I know that is very blunt, apparently
but I want to understand - samanta_Braun74 commented on July 8th 19 at 16:10
:
var availableStyles = ['style1', 'style2', 'style3'];
...
var style = 'style1';// in the address determine which style you need
...

success: function(data) {
$('#page_content').html(data);
 for (i=0; i<availablestyles.length; i++) { document.body.classlist.remove(availablestyles[i]); } document.body.classlist.add(style); },< code></availablestyles.length;>
- Lulu_Zulauf71 commented on July 8th 19 at 16:13
July 8th 19 at 15:54
If you have access to server side, then substitute the variable in the link:

<?php
 $split_uri = split("/", $_SERVER["REQUEST_URI"]);
 $page_name = $split_uri[count($split_uri) - 1];
 // Modificeres name as needed and...
 $css_name = $page_name;
?>





 <link href="/css/<?=$css_name?>" rel="stylesheet">




July 8th 19 at 15:56
Know what method to write each link1.html, link2.html, link3.html
code is wrong and dirty, even though it works successfully.

Who told You that? It is not correct from the point of view of minimization of the code. But in Your case it is justified. Will make the total in 1 css file. And override a number of settings to style inside the page.
You can also set the class for the body, write 1 css and js to change the class body.

Find more questions by tags JavaScriptHTMLCSSLayoutAJAX