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:

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

1) be careful editing style.css. When the theme updates, it'll be reset to default. 2) from what I can see here, it should work. Hence, the issue is elsewhere. Does your stylesheet use @media queries, or similar? If so, did you enter your class in the correct section of the stylesheet? — Tijmen
– Tijmen, Commented Sep 8, 2017 at 14:38
style.css might be cached in your browser. Try a hard page refresh to rule that out. — I haz kode
– I haz kode, Commented Sep 8, 2017 at 14:49
Thanks, as it turned out it was just that style.css was cached in my browser. I have also created my own style.css in the child theme to prevent update problems. — Samuel Clayton
– Samuel Clayton, Commented Sep 8, 2017 at 19:46

Dilip Gupta · Accepted Answer · 2017-09-08 14:42:57Z

0

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.

answered Sep 8, 2017 at 14:42

Dilip Gupta

1341 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samuel Clayton Over a year ago

Thanks. It turned out to be a cache issue, rather than something I was doing incorrectly. I will however make my changes to a new page template as you suggested.

Johannes · Accepted Answer · 2017-09-08 15:22:06Z

0

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;
}

edited Sep 8, 2017 at 15:22

answered Sep 8, 2017 at 14:43

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

1 Comment

Samuel Clayton Over a year ago

Thanks, although this wasn't my issue in the end, this is very useful information that will help in the future.

Collectives™ on Stack Overflow

Adding HTML and CSS in Wordpress editor?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related