I have some css that looks like this:
<style type="text/css">
.dogname {
margin-left: 100px; width: 750px; height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #7a522a;
}
@media screen and (max-width: 1024px){
body {
width:100%;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}
body,td,th {
font-size: 20px;
font-family: "Times New Roman", Times, serif;
}
/* added ========================zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz dp */
/* Style The Dropdown Button */
/*hdivs added by me after dropdown*/
.hdivs {
float: left;
margin-top: 3px;
}
.dropbtn {
font-family: "Times New Roman", Times, serif;
background-color: #436fac;
color: white;
padding: 2px 2px;
font-size: 1.8em;
border: none;
cursor: pointer;
font-size: 1.8em;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #7D9FB8;
/*background-color: #f9f9f9;*/
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
font-size: 2.0em;
padding: 2.0em;
margin: 1.0em;
width: 220px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #4d8add
}
/* added ======================================zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz======= dp */
#wrapper {
margin-left:5px;
margin-right:auto;
/*margin:auto;*/
width: 100%;
}
.dogname {
margin-left: 10px; width: 95%; height: 3.0em; word-wrap: break-word;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #7a522a;
}
#header {
width: 105%; height: 3em; overflow: visible;
float: left;
padding: 5px;
background: #12407f;
color: #fff;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: 2px solid #436fac;
}
#header a {
color: #fff;
background: #436fac;
padding: 4px;
text-decoration: none;
font-size: 1.8em;
font-weight: bold;
}
#header a:hover {
background: #4d8add
}
div#tbl-container {
width: 100%;
overflow: auto;
scrollbar-base-color:#CFCFCF;
font-size: 1.5em;
font-weight: bold;
}
.dogtable
{
width:95%; background-color: #F7EFE7; margin-left: 10px; margin-right: auto;
/*width:825px; background-color: #F7EFE7; margin-left: 10px; margin-right: auto;*/
font-family: "Arial Black", Gadget, sans-serif;
font-size: 1.2em;
}
.image
{
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
/*height: 100px;*/
border:7px solid #d0a070;
}
.imgtd
{
width: 15%;
}
table.dogtable th {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 1.0em;
font-weight: bold;
text-align: center;
border: solid thistle;
}
table.dogtable td {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 1.2em;
border: solid thistle;
}
.dname
{
width:20%;
}
.dsex
{
width:10%;
}
.dogcomment
{
width:50%;
}
.pagination li {display:inline; margin:4px; padding: 10px 10px;
font-size: 1.4em;
font-weight: bold;
height: 2.0em;
color:#F90;
}
.pagination a {
border: 1px solid #D5D5D5;
color: #666666;
font-size:1.4em;
font-weight: bold;
height: 2.0em;
padding: 10px 10px;
text-decoration: none;
margin:2px;
}
.pagination a:hover, .pagination a:active {
background:#C0C0C0;
}
.pagination span.current {
background-color: #687282;
border: 1px solid #D5D5D5;
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
height: 2.0em;
padding: 10px 10px;
text-decoration: none;
margin:4px;
}
.current {
background-color: #687282;
border: 1px solid #D5D5D5;
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
height: 2.0em;
padding: 10px 10px;
text-decoration: none;
margin:4px;
}
.pagination span.disabled {
border: 1px solid #EEEEEE;
color: #DDDDDD;
margin: 4px;
padding: 10px 10px;
}
.cf {
content: ".";
/*display:table;*/
width: 100%;
display: block;
clear: both;
height: 2px;
font-size: 0;
line-height: 0;
visibility: hidden;
overflow: hidden;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
* html .cf {
zoom: 1;
}
/* IE6 */
*:first-child + html .cf {
zoom: 1;
}
/* IE7 */
}
</style>
I have the css for desktop loaded the normal way
<link href="<?php echo Resource::asset('css/dogs/style.css'); ?>" rel="stylesheet">
The part in the style is mainly for mobile.
Now question, the top portion of the css varies per page, but the bottom portion is the exact same, this part
is the exact same on many pages.
.pagination li {display:inline; margin:4px; padding: 10px 10px;
font-size: 1.4em;
font-weight: bold;
height: 2.0em;
color:#F90;
}
.pagination a {
border: 1px solid #D5D5D5;
color: #666666;
font-size:1.4em;
font-weight: bold;
height: 2.0em;
padding: 10px 10px;
text-decoration: none;
margin:2px;
}
.pagination a:hover, .pagination a:active {
background:#C0C0C0;
}
.pagination span.current {
background-color: #687282;
border: 1px solid #D5D5D5;
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
height: 2.0em;
padding: 10px 10px;
text-decoration: none;
margin:4px;
}
.current {
background-color: #687282;
border: 1px solid #D5D5D5;
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
height: 2.0em;
padding: 10px 10px;
text-decoration: none;
margin:4px;
}
.pagination span.disabled {
border: 1px solid #EEEEEE;
color: #DDDDDD;
margin: 4px;
padding: 10px 10px;
}
.cf {
content: ".";
/*display:table;*/
width: 100%;
display: block;
clear: both;
height: 2px;
font-size: 0;
line-height: 0;
visibility: hidden;
overflow: hidden;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
* html .cf {
zoom: 1;
}
/* IE6 */
*:first-child + html .cf {
zoom: 1;
}
/* IE7 */
}
I did an experiment, I put the part that repeats into another file and include it like:
<?php echo \Yii::$app->view->renderFile(Yii::getAlias('@app') . '/views/layouts/pag.php'); ?>
</style>
Where pag.php contains the css that is the same on many pages.
Now, this all works perfect, no errors. My question is that fine to include it that way?