Previous Lecture Complete and continue  

  Where to Place the CSS - WordPress

Is your blog hosted on WordPress? Watch this video to learn where to put your custom CSS changes and homework assignments.


A Note About Themes Updates & Changes

When putting your CSS style changes in the Appearance > Editor section, please note that those styles will disappear if:

  • You update the theme (new version comes out)
  • You change the theme (switch to a new theme)

So if you use this method, be sure to save your style changes in another location (ie a blog post draft, a Word Doc, etc.) so that you do not have to re-figure out those style changes.


A Note About Caching

Is a style not appearing right away on your site? It could be an issue with caching. Give yourself 30-60 seconds and then hit refresh again.

Pro tip: If you have a plugin (like WP Super Cache) or a setting that cache's your site, you can either disable your plugin or clear or "flush" your cache to help make the changes appear earlier.

8 comments
Berjheny Perez
Hi. Where can I find the homework you are talking about? Thanks
hidama
You'll have homework assignments in the future where you'll be putting CSS code into the style sheets.
hidama
Hi Lisa,

If you have issues with the video, here is some troubleshooting to try:
+Refresh the browser
+Watch in a different browser (ie Chrome or Firefox)
+ Swtich to a desktop if this issue is happening on mobile.
Lisa Blakeney
I cannot get any of the videos to play.
Rachel Ballard
Hi Sarah, I'm just wondering if it's a good idea for us to make changes right in the editor? That applies those changes site wide, and if we don't know what we're doing doesn't that set us up to potentially make some errors we may not be able to correct?
hidama
Hi Rachel,

You can either make the change right in the editor or through any custom CSS plugin or dedicated area in a theme.

And yes, those changes will be made site-wide. If it makes a change someone doesn't like, it can always be corrected by deleting those changes that were just made in the stylesheet.

If someone wants to test out those changes, they can also make those changes to a staging site or a local host site. However, that is typically a more advanced way to do this, and I want my learners to be able to make changes without having to have the technical know-how of some more advanced techniques.

Tatiana Froes
Newbie here so bear with me: I see you skipped a space from the asterisk to the "my style" and a space after "changes" and you also skipped a line from the first line and ".landing page". What is the significance of that space? Does it change anything if I don't skip the line from the first one (my style...) to the second(.landing)? Just curious. I copied one little code from a tutorial to eliminate a gap on the footer and that gap is still there even though I copied everything from the tutorial (sweating bullets!) LOL. TIA
hidama
Hi Tatiana,

/* My style changes */ you do need a space between the /* and the text

But any paragraph space I have, that's not necessary, that's just for me to make it easier to read!

You could totally have it as
/*my style changes */
.landingpage {
background-color:#FFF;
}