Adding HTML and CSS in Wordpress editor?

Question

I am using a child theme of "freestore". (https://en-gb.wordpress.org/themes/freestore/)

I am attempting to add some content to one of my pages using simple HTML and CSS. I've managed to successfully change CSS styles in the theme via the style.css, however I am trying to add my own HTML and then CSS to style it.

I have created the page 'home' and through the wordpress tinymce text editor I can add my HTML fine. When I try to add the CSS via my style.css, it doesn't apply the styles. I can however add the styles inline, but I would like to add the styles externally.

Example:

On the wordpress text editor I would add the line:

<div id="cssTest">TEXT</div>

In my style.css file I would add:

#cssTest {
    background-color: red;
}

The CSS style is not applied. However adding the following to the HTML editor will work fine:

<div id="cssTest" style="background-color: red;">TEXT</div>

My question is either:

1. How can I apply my styles via an external stylesheet?
2. Should I be creating my own template for that page and adding the HTML there?

Answer 1

check if child themes style.css has Text Domain: freestore-child parentthemename-child. Any css id/class element you add would be implemented.

Best way would be to create custom.css file and enque it in your child theme's functions.php via wp_enqueue_style function.

I believe it's best practice to create page template for specific pages like home.

Answer 2

Most likely there is a CSS rule that belongs to your original theme which is more "specific" than the rule you are trying to apply. To check this, inspect the element with the browser tools and look which CSS rule is applied to that element.

If that rule would for example be

.content main .section_1 .gxt1 {
  background-color: black;
}

, you'd have to overwrite it adding a rule which has a higher specifity, like

.content main .section_1 .gxt1 #cssTest {
  background-color: red;
}

If the original rule contains an !important, you also have to add !important. So to overwrite

.content main .section_1 .gxt1 {
  background-color: black !important;
}

, you would need something like

.content main .section_1 .gxt1 #cssTest {
  background-color: red !important;
}