I promise you I'm not wasting your time with this problem. I have searched through StackExchange for almost 4 hours in the last few days, and even though there are questions with similar titles, I promise you that this problem I'm facing is unique and it was not asked before.

The problem is this: When I create a custom front-page.php in my theme's directory, Wordpress displays it as my home page as expected, but for some reason, the style.css file does not load in the web browser, thus, I can't modify the content of the front-page.php with CSS. I put a div in front-page.php, and no matter what I put in style.css, the div is unaffected. I have tried this with multiple WordPress installations, and every time it is the same thing. I'm using one of Wordpress' stock themes, so my functions.php file is not the problem.

This is either a bug with WordPress, or I am messing up something while I'm configuring the server. This is why I'm going to destroy my server and rebuild it again, and add pictures to show you what I'm doing in every step.

1- I'm making a Wordpress installation in a droplet on DigitalOcean, which I set up by one click "OpenLiteSpeed Wordpress" app in their marketplace. So the WordPress set-up is pure.

2- I log in to my server via Putty, using SSH keys, as root. I create a new user called daddy, and add it to the sudo group. I install the SSH key for the user daddy, and I disallow remote SSH access to the root account. I change PermitRootLogin yes to no and save the file.

3- I connect to my server using FileZilla via SFTP method, as the user daddy, not as root. And I see that the owner of my WordPress installation files is www-data, and the group is also www-data.

I check the file permissions, and see that it's set to 644. So the www-data group which owns the WordPress installation has a read permisson, but not a write permission. This is the stock settings that comes with the stock Wordpress installation through DigitalOcean's one-click apps.

4- Now, as the user daddy, I try to create a front-page.php file, and as expected FileZilla gives me this error:

5- I go to the terminal and use id daddy to see which groups the user daddy belongs to.

As expected, it belongs to the group daddy and group sudo, because when I create a new user in the terminal, it creates a group with the same name and it makes that group the primary group of the user. This happens by default, right?

So at this point, I know that I should add the user daddy to the www-data group, so both the FTP user that's trying to modify the server (which is daddy in this case) and the owner of the WordPress installation (which is www-data) will belong to the same group (which is www-data). I also should give www-data group write permissions, so WordPress can modify and update the files in this directory. After doing these, I will be able to create that front-page.php as the user daddy in FileZilla.

6- In the terminal, I use gpasswd -a daddy www-data to add daddy to www-data group. And then I use usermod -g www-data daddyto change the user daddy's primary group to www-data. I use groups daddy to check and see this:

As shown by the terminal, the user daddy's primary group is now www-data, and it also belongs to the sudo group. (As expected, usermod g deleted the user from its previous primary group called daddy.)

7- In the terminal, I use sudo chgrp -R www-data /var/www/html and sudo chmod -R g+w /var/www/html to set the correct read/write permissions for the www-data group. This is so that WordPress would have write permissions for all these files. I check the file permissions in FileZilla, and the files in the theme folder is now set to 664, meaning that WordPress has now write permission too.

8- In FileZilla, I try to create a front-page.php, and it works. I set its permissions to 664 as well, giving WordPress a write permission for this file, so that I can modify its content using WordPress' Theme Editor.

I change my home page settings through WordPress, and when I go to my website, it loads the empty front-page.php. So, everything seems alright.

9- On WordPress, I go to Theme Editor, and modify front-page.php. I simply add:

<div id="hi"> hello world. </div>.

I go to style.css, and I add:

#hi { width: 200px; height: 200px; border: 1px solid black; }

I update the style.css, it saves. I go to my website, which shows front-page.php as its home page, and here is the problem:

As you can see, the css code I used to manipulate <div id="hi"> did not render.

10- I right-click on Chrome and click "Inspect", and I see that style.css hasn't been loaded at all. It's nowhere to be found.

Here is the thing: Before I created front-page.php and made all the changes in FileZilla and the terminal that were violently depicted in those 9 steps, the main page of the default theme of WordPress loaded just fine. And when I clicked "Inspect" on Chrome, the style.css was there, as it should, because the theme was working fine.

So to sum up: In one of these steps, I must be making a mistake that would break WordPress' ability to load "style.css". But what? What am I doing wrong?