Wordpress links and CSS - php

Question

I have three parts to this question.
I am building a portfolio site in Wordpress and have some weird links going on. For example on my about page, here is what my link looks like : localhost/AFolder/anotherfolder/index.php/about-me. I went into Permalinks to try and change the link, but when I changed it to post name instead of custom structure, which it was before I was left with a broken link on my about page. My home page is index.php I have no idea why the link is referencing index.php How can I fix this?
My design calls for a grey background on the about page and it is not displaying. Everything else seems to be working except for the background. Is the link (refer to question above) interfering with the CSS because it is referencing the index.php file in the link? Most of the background on my homepage (index.php) is white and it looks the same on my about page. Maybe these two matters are related.
What is the best way to link custom CSS in Wordpress. I found a way to do it already but I'm not sure if this is best practice: see above snippet.
Is there a good plugin that's better suited to link the CSS or is there another good trick to do this?
<?php
function theme_styles() {
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'navbar_css', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'carousel_css', get_template_directory_uri() . '/css/carousel.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'add_custom_styles' );
function add_custom_styles() {
wp_enqueue_style( 'about_css', get_template_directory_uri() . '/about-page.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_page_css' );
function custom_page_css() {
if ( is_page( 'about-me' ) {
wp_enqueue_style( 'about_css', get_template_directory_uri() . '/about-page.css' );
}
}

Answer 1

Have you tried en-queuing the styles ??
Try these codes in your functions.php file within your theme folder.
The following method adds the two styles (style.css and another_style.css) to the part where wp_head(); action is called (usually the header part of the page).
add_action( 'wp_enqueue_scripts', 'add_custom_styles' );
function add_custom_styles() {
wp_enqueue_style('id_of_style', get_template_directory_uri().'/path/to/style.css' );
wp_enqueue_style('id_of_another_style', get_template_directory_uri().'/path/to/another_style.css' );
}
Here the styles are added in order. The order in which the styles are enqueued affects the styling of page as there may be chances of overriding styles. So you have to enqueue the styles in order.
add_action( 'wp_enqueue_scripts, 'custom_page_css' );
function custom_page_css() {
if ( is_page( 'Custom' ) {
wp_enqueue_style( 'custom-css', get_template_directory_uri().'/path-to/contact.css' );
}
}
Here the style is added to the header of Custom page only.
Try these once. Remember one thing, you have to know the order of css files. This might be some pain in ass. I also got that gray background but ordering the styles solved the problem for me.
The same goes for adding scripts.