How to call css in a php function in wordpress - php

Question

I'm working on a wordpress theme, and i want to be able to apply a css change to all pages instead of just one page, for example, the frontpage only is applying changes on the front page, i want to be able to call this in the functions.php, however im not so sure how to call it.
In a nutshell, how to call css in a php function, in the functions.php file
Any Suggestions ?
template-frontpage.php
<?php
/**
* Template Name: Front Page
*
* #package Eli
*/
get_header();
$hero = cs_get_option('hero_image');
?>
<style type="text/css">
.hero:before{
background-color:<?php echo cs_get_option('hero_color_picker');?>;
}
.hero:after{
background-color:<?php echo cs_get_option('hero_color_picker');?>;
}
a{
color: <?php echo cs_get_option('link_color');?>;
}
footer a{
color:<?php echo cs_get_option('link_color');?>; ;
}
</style>
<div class="row">
<div class="hero" style="background-image:url(<?php echo $hero; ?>); width:100%; min-height:350px; background-size: cover;">
<div class="container">
<div class="col-md-12">
<header class="hero-text">
<?php if (get_field('hero_title') ):?>
<h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1>
<?php endif;?>
<?php if (get_field('hero_span') ):?>
<span><?php the_field('hero_span'); ?></span>
<?php endif;?>
<?php if (get_field('hero_span_2') ):?>
<span id="move"><?php the_field('hero_span_2'); ?></span>
<?php endif;?>
</header>
</div>
</div>
</div>
</div>
<section class="section-home">
<div class="row">
<div class="container">
<div class="line"></div>
<?php if (get_field('content_block_left') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_icon'); ?>
<?php the_field('content_block_left'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left2') ):?>
<div id="cbl" class="col-md-4 col-xs-12 ">
<?php the_field('content_block_left_2_icon'); ?>
<?php the_field('content_block_left2'); ?>
</div>
<?php endif;?>
<?php if (get_field('content_block_left3') ):?>
<div id="cbl" class="col-md-4 col-xs-12">
<?php the_field('content_block_left_3_icon'); ?>
<?php the_field('content_block_left3'); ?>
</div>
<?php endif;?>
</div>
</div>
</section>
<div class="section-about">
<div class="row">
<h1>Beat Your Rivals</h1>
<div class="line"></div>
<div class="container">
<?php if (get_field('image_left') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px">
</div>
<?php endif;?>
<?php if (get_field('caption_text') ):?>
<div id="cbl2" class="col-md-6 offset-md-3 col-xs-12">
<?php the_field('caption_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image2 = get_field('test_image');
?>
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;">
<div class="row">
<div class="container">
<?php if (get_field('test_text') ):?>
<div id="cbl3" class="col-md-12 col-xs-12">
<?php the_field('test_text'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<div class="about-us">
<div class="row">
<div class="container">
<?php if (get_field('about_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('about_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
<?php
$image3 = get_field('cons_image');
?>
<div class="consult">
<div class="row">
<div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" >
<div class="container">
<?php if (get_field('consult_us') ):?>
<div class="col-md-12 col-xs-12">
<?php the_field('consult_us'); ?>
</div>
<?php endif;?>
</div>
</div>
</div>
</div>
<?php if (get_field('contact_us') ):?>
<div class="contact-us">
<div class="row">
<div class="container">
<h1 class="contact-h1">Contact Us</h1>
<div class="line"></div>
<div class="col-md-12 col-xs-12">
<?php the_field('contact_us'); ?>
</div>
</div>
</div>
</div>
<?php endif;?>
<?php get_footer(); ?>

Answer 1

Not sure if you want to know how to enqueue css or how to limit css to specific pages so
To include styles use in your function.php
function site_styles() {
wp_register_style( 'global-css', get_template_directory_uri() . '/assets/css/global.css');
wp_register_style( 'frontpage-only-css', get_template_directory_uri() . '/assets/css/frontpage.css');
}
add_action('init', 'site_styles');
than you can decide where to use or not those styles
// is_front_page()
// is_page(XX) - is page id XX
// is_single() && get_post_type()="custom_post_type" - single for custom posts
// more about conditional tags: https://codex.wordpress.org/Conditional_Tags
function enqueue_styles() {
if ( is_front_page() ) {
wp_enqueue_style( 'frontpage-only-css' );
} else {
wp_enqueue_style( 'global-css' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );