Proposal: Intro to CSS training module

Hi, I’m Jerry, and I have been hanging out in the last few IRC chats, and recently brought up that I wanted to work a CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. module to compliment the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. module that is nearing completion. In case you were not at those meetings, I wanted to recap here, so I can get as much feedback as possible

Who is the Intro to CSS module for?

Before WordPress users are ready to take those first steps into theme development (like creating a child theme) one of the first places their exploration begins is with a desire to tweak the “look and feel” of your site. So something like:

“I found a theme that is close to what I want, but I really wish I could change the size of my headings, or the background color of my widgets, but have no idea how.”

This module would be aimed at that person: a non-coder who have maxed out what they can do in wp-admin, and are ready to take those first step into the world of theme design by modifying their existing CSS.

This module would ideally cover the following:

  • What is CSS? What does it do?
  • Learning the lingo: Selectors, properties, and values
  • Getting set to edit: How to edit theme CSS the right way
  • How to your browser’s developer tools to find your theme’s CSS
  • Three exercises covering simple CSS modifications (TBD)
  • Intro to CSS self-quiz

Small Problem: How do you hack on CSS without a child theme?

When it comes to changing a theme’s CSS, there is one small but important caveat that we all know: Hacking on actual theme files is bad, bad, BAD! So, what is the best way to get students up and writing their first lines of CSS as quickly as possible? We could have them set up a quick child theme, but the problem with that is:

  • It may be a little too early to introduce that concept
  • It would take valuable time away from the lesson to set up (plus FTPFTP FTP is an acronym for File Transfer Protocol which is a way of moving computer files from one computer to another via the Internet. You can use software, known as a FTP client, to upload files to a server for a WordPress website. access)
  • We already have a module that covers this better and in more detail

So with that in mind, it probably makes sense to install a CSS editor pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party instead, which is quick, easy, and gets students straight to the good stuff. But…

Which CSS editor plugin?

Here are a few that I could think of, what do you think would be the best to use?

#1 Jetpack – On the plus side it comes with a great CSS editor, with easy access to revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision., but as a negative it requires a An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. account, which not everyone may have or want.

#2 CSS Plus – This is in the repo, so easy to access and requires no sign-in; however, I have no experience with this one, so testing would be a good idea before incorporating it into the lesson plan.

#3 – This gets away from the idea of tweaking the theme directly, but would it be better to not even go into the wp-admin in the first place? This would place the focus on the CSS, and may be easier than setting up test sites, downloading plugins, etc. However, like Jetpack, it would require an account creation step for some, and, well, it’s not WordPress.

Really those seemed like the best choices, but what do you think? Is one better than the others? Am I missing any other options that are worth considering?

Want to help? You can!

Is a CSS module something you would be interested in helping with? To get us started we can leverage some of the CSS materials available at (adapted to fit a self-hosted environment) but if you have any ideas to make this even better, or would like to help develop this module, please speak up in the comments

You can also say hi at our next IRC chat Tuesday at 18:00 UTC in #wordpress-getinvolved on IRC freenode. 🙂