Styling multiple links in php - php

Question

I have some php which works on my site to style a link. However, when I try to use the same code to style other links in a different way, it breaks my site.
For example I have:
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.events-dashboard1 {background-color: green;}
</style>';
}
This works but when I try to duplicate like so:
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.post-job1.post-event1 {background-color: #e5f25c; color: white
!important;}
</style>';
}
The site breaks. I've investigate and found that using multiple classes like that doesn't work. But if I repost the same php code just with 1 class, it breaks. Tried altering the format - nothing.
Html:
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow"><div></div>
</div><div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-
hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
<a href='index.php' class="wp-first-item current"
aria- current="page">Home</a></li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a
href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a
href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a
href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a
href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</li>
So now I have four links, two of which I can't style, the other two are styles by above code and the following code. One for each:
function custom_admin_css() { echo ' <style> .jobs-
dashboard1 { background-color: green; } </style>'; }
add_action('admin_head', 'custom_admin_css');

Answer 1

Just put all of your styles under the same tag. It appears you are trying to use the same function twice, which you cannot do.
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.events-dashboard1 {background-color: green;}
.post-job1, .post-event1 {background-color: #e5f25c; color: white
!important;}
/* Any other CSS you have put here */
</style>';
}
Ultimately, what you should do, is create a CSS file. Put your CSS in it. Then enqueue it. Like this.
admin-styles.css
.events-dashboard1 {background-color: green;}
.post-job1, .post-event1 {background-color: #e5f25c; color: white
!important;}
/* the rest of your CSS */
enqueue the file
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
wp_enqueue_style('admin-css', '/path/to/file/admin-styles.css');
}