How to give css for posts in a wordpress theme - php

Question

I new to wordpress development , I have developed a custom wordpress theme but i am not able to give css to the posts.Posts are rendering in very normal way but i want to give some css , please suggest me how i can do this .
<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_footer(); ?>
I have added images how posts are appearing and code of page.php of my wordpress theme. Seeking some help

Answer 1

Add a css directory inside the your theme directory let create a file name "poststyle.css" inside that css directory and then you can link the css file in header.php
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/poststyle.css" media="screen" title="post-style" charset="utf-8">
OR
<?php
wp_enqueue_style( 'post-styles' , get_template_directory_uri() . 'css/poststyle.css' );
?>
but before that u need to find out the class or id or div name so that you can give or define the styles to that corresponding div's or classes inside "poststyle.css"
Now just take this example
<?php
/**
* The template for displaying pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that
* other "pages" on your WordPress site will use a different template.
*
* #package WordPress
* #subpackage Twenty_Fifteen
* #since Twenty Fifteen 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<div class="title"><?php the_title( '<h1>', '</h1>' ); ?></div>
<div class="pic"> <?php echo get_the_post_thumbnail( get_the_ID() , 'thumbnail' , array('class' => 'img-thumbnail') ); ?></div>
<div class="content"> <?php the_content() ; ?></div>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
Now you can give styles to class="site-content" or class="content-area" , class="title", class="content"
But Incase of your post show template what you have doing is that you are importing another template which is inside template-parts directory content.php file where all the post content showing codes are there

Answer 2

You have to follow the the wordpress coding standard to create theme and plugins. To add css and js just create two folder inside your theme named 'js' and 'css'. Then add this code inside the functions.php
if(!function_exists('theme_style')):
function theme_style(){
wp_enqueue_script('main-js', get_template_directory_uri().'/js/main.js',array(),false,true);
wp_enqueue_style( 'main-css', get_template_directory_uri(). '/css/main.css', array(),false,'all' );
}
add_action('wp_enqueue_scripts','theme_style');
endif;
You can change the file name main.js and main.css