[FIXED] Why are my styles not applying after a custom CSS file is included?

Issue

I am using Magento 2.2.3. In my magneto theme added custom CSS file in the below path: project/app/design/frontend/vendor/theme/web/css/custom.css

I added source file in default_head_blocks.XML file. after that added a page with following code in HTML content

<div class="freegotest"><span class="tested">count down custom code</span></div>

In custom.css code as

.tested { 
    color: red !important; 
    font-size: 20px;
}

By viewing the page source, I can see the custom CSS file included in the header, but the styles are not applying to the text.

Solution

Your XML file must be named default_head_blocks.xml instead of default_head_blocks.XML.

Once the name changed, clear cache and static files :

1. Check if you are using dev mode With command line

php bin/magento deploy:mode:show

2. If developer mode is set to production, try to re-build static content

php bin/magento setup:static-content:deploy

3. In any cases (production or developer), clear every cached files

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush;

Answered By - Antoine Martin

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)