CSS order

css
Cascading Style Sheets

Here is how to load a WordPress child theme’s CSS after the parent theme’s CSS.

The trick here is to add a 1 to the add_action script, illustrated below

Functions.php

Find and edit this little bit of code in the Functions.php file:

This way your Parent’s CSS loads first, and your Child theme will load after that. 1 is lower, loading first. 99 is higher, which makes it load last.

What is CSS?

CSS is an abbreviation for Cascading Style Sheets, its what adds style to your HTML files (web pages).

How does it work?

CSS has two parts; a selector and a declaration. The selector tells which element to affect and the declaration tells you what value/property should be applied.

As an example:

P { font-size: 16px; color: #000; }

P = is the paragraph text (selector), font size 16px and colour is black (aka #000) which is the declaration value / property.

Types of CSS

There is three types of CSS, Inline, Internal, and External. Inline is where you have CSS directly inserted to the element, Second is internal, that is where CSS is placed in the head of the file, Third is external, where all the CSS is placed in its own file.

Examples:

Inline:

<p style="font-size:16px; color:#000;">text</p>

Internal:

<head>
<style>
p {
font-size:16px; 
color:#000;
}
</style>
</head>

External:

<head>
<link rel="stylesheet"  type="text/css"  href=../style.css">
</head>
Isaac Adams-Hands

Full Stack Developer, Digital Marketer, and InfoSec enthusiast. He received his Bachelor’s Degree from the University of Western Sydney and his Business Diploma from Georgian College before joining various marketing positions in search portals, e-commerce, higher education, and addiction recovery services.

Follow @ twitter

Related posts

Call Tracking using GTM

I’ve noticed onClick tracking can be troublesome and sometimes doesn’t work as expected on WordPress websites, so its never 100% accurate. To get around these errors, I use Google Tag Manager to track call events. How to Track phone calls using Google Tag Manager: 1. If you haven’t already, install GTM on your website. 2…. Read More

Add a shortcode to add_shortcode in functions.php

This drove me a little crazy one afternoon. I had to add a gravity forms shortcode to a new add_shortcode script in functions.php To accomplish this, I added this to my code: ‘ . do_shortcode($content) . ‘ Here is how it looks in its working example. I work best by watching. Too many people just… Read More