Feb 26, 2014 / Beginner

Should I Learn CSS?

Anyone who creates a WordPress.com account can set up a blog or website for free, and we’ve emphasized here, and in our Customizing series at The WordPress.com Blog, that you can customize a site with personal touches without an upgrade — using features like a custom background, header, and image widgets.

But we often read comments on our blogs and in the forums asking if it’s worth learning CSS, and whether the Custom Design upgrade is appropriate for you. Learning CSS, even if just a bit, is helpful — especially if you’d like to make custom tweaks and have more control over your site’s design. Here’s a primer on what CSS is and what you can do with it, examples to illustrate the types of design and layout updates you can achieve, and resources to learn more and get your hands dirty.

What is CSS?

CSS, which stands for Cascading Style Sheets, is the design of your site: special code that tells your blog how to display things, from the color of your body or header text to the size of your post titles. If your blog is your digital homestead, think of CSS as the code that allows you to decorate it, from painting its walls (your background) to hammering frames of art (your widgets).

The Pilcrow theme
Cork Grips, using custom CSS on the Pilcrow theme for font, color, link, sidebar, and other changes

What can you do with CSS?

If you’d like to make tweaks to your site with CSS, you’ll need the Custom Design upgrade, which includes the ability to update it with colors, fonts, as well as custom CSS — which you can do in the Customizer panel. Here’s a snapshot of what mine looks like:

Custom CSS for Writing Through the Fog.

Custom CSS for Writing Through the Fog.

I use the premium Kent theme, and with custom CSS, I’ve removed a number of elements, which you can see in the stylesheet above:

  • the “estimated reading time,” displayed for each post on the home page (lines 1-3).
  • the underline styling displayed when you hover over linked text (lines 5-8).
  • the titles on all pages (About, Categories, etc.) (lines 10-12).
  • the metadata on all posts (publication date and byline) (lines 14-16).
The Kent theme
My blog, using the Kent theme

With custom CSS, you can make changes, from big to tiny, like the tweaks above. Here are other instances where custom CSS is handy, taken right from our CSS Customization Forum. (Note: these forum requests are for specific themes, as you’ll read in each thread — we’re sharing them as examples to show a) what you can customize and b) how to ask for help in our forums.)

Another example of a quick but noticeable change: Sara Hendren, the researcher who runs Abler, uses {text-transform:capitalize;} to capitalize the first letter in her site title (in the Sight theme, the title is lowercased by default):

The Sight theme
Sara Hendren’s site, Abler, using the Sight theme

Want to learn more?

This post is just an introduction to what you can do with CSS. Are there design changes you’d like to do on your blog as well? We recommend these support pages and forums to familiarize yourself with CSS and learn where you can get answers:

Above all, we suggest you dive into the CSS Customization Forum to read the types of questions users ask publicly; it’s the best way to understand what’s possible with CSS, and to learn from others. If you ask a question, identify your site URL and theme, along with details of what you’d like to achieve. For those of you with premium themes, you can search for your theme in the Premium Theme Forum, too. If you decide to purchase the Custom Design upgrade and need assistance, these forums are the best spaces to go.

For more inspiration, check out these blogs using the Custom Design upgrade.

Show Comments

41 Comments

Comments are closed.

Close Comments

Comments

  1. I’ve tried learning CSS, using Codecademy, but I haven’t been very good at it so far! Maybe I’ll give it another shot though. 🙂 It’s neat to see how much you can customize a theme with just a little code!

    Liked by 2 people

  2. I almost recommend that people learn a bit of HTML first before jumping into CSS. As it goes though, I love being able to use the CSS Upgrade, it is a great way to help differentiate your theme even further. 😀

    Liked by 3 people

  3. Echoing Green Embers here. It might help to know, what you can change before knowing how to change it.

    Furthermore, I would add, that you need to be sure, that – for you – the customization is worth the money to spend, too. Not everyone at wp.com might like to read this, but webspace isn’t very expensive these days and with that available you could do even more naughty things with your blog than just change the theme or the css 🙂 If you like this platform, though – I sure like it here – the support and the possibilities are great 🙂

    However, I like your points very much! From my point of view, this is very helpful for a starter 🙂

    Liked by 1 person

  4. I think I will purchase the CSS upgrade tomorrow and begin to toy around with it. Looks awesome and I’m ready to add some more personal touches to the overall blog layout. Great post. I never really knew you could do much more than change the font and some colors but this is awesome.

    Liked by 1 person

  5. Learning basic HTML first is a good idea. People can practise on the text version of their blog rather than visual. Once familiar with that, they may want to move onto CSS and feel happy and confident enough to pay for an upgrade and everything that comes with that. I wouldn’t do CSS without playing with HTML first. Or try out your own website if your ISP gives one for freee.

    Liked by 1 person

  6. I don’t know if it was right for me to upgrade? I don’t know if what I have isn’t something I would have had without paying for it. It is very confusing to me. I don’t like how it scrolls, and I liked it when I had things in the sidebar which isn’t there any more? I must be stupid because I cannot follow the directions. I want to put certain posts together and I don’t understand about all the different pages. I filled out titles on pages and didn’t find them anywhere. I’m definitely doing something wrong. Can you help me figure this out? I don’t even know where to fix it.

    Liked by 1 person

  7. I found that learning CSS functions as you need them tends to work well enough because there is help in the forums when you lose your way. I took on the custom design upgrade when WP was offering a free 2-week trial, so I only had 2 weeks to learn some CSS and see if I could create something worth paying for.

    And as it turns out, I ended up with something unlike anything else I’ve ever seen. Plus, I won’t have to relearn everything when the time comes for a redesign.

    Also, I should mention that the ability to increase my body text font size was a really big deal. My readers tend to be of the glasses-wearing persuasion (either from age or reading a lot), so the larger font is probably appreciated.

    Liked by 1 person

  9. most of the help I see in the forums for, say, changing my font size in my website title, only direct the asker to purchase the CSS upgrade, which I have, I just need to know what code to change my title font size compared to the rest of the heading sizes.

    Liked by 1 person

    1. I’m not sure if all of the themes are the same but my title is set with a class of “site-title”. If your’s is the same then you could use the following css to set your site title without affecting the page titles.
      .site-title
      {
      font-size: xx; (xx =size you want ie. 30px or 1.2em)
      }

      Liked by 1 person

  11. As with most things in life, the best way to learn CSS and truly grasp what it can do is to use it. Reading books and how to guides is good to know what to try, but you need to put the actual CSS to use if you’ll fully learn how to use it. Write a few lines, see what it does to your site, go back and change a few things in the CSS, look at your site, etc.

    Liked by 2 people

  13. CSS is great to use and you can use it to add a lot of flare to your blog. I taught myself when I was at high school by comparing the codes from different websites I liked. Back then there were lots of small fandom websites which used to post their own tutorials in order to help people learn to design their own websites or blog templates.

    The most invaluable tool for me was Dreamweaver. It’s not just for CSS but rather for many different types of coding languages. The nice thing about it was that it helped keep your code neat and would make smart suggestions based on what you had written in. For example, if you were to type “float” it would then show you options “right, left, top, bottom, none” or you could choose to type your own in.

    Although it’s a rival blogging platform, Tumblr layout code is pretty easy to figure out and some of the code authors insert tags to let you know what the next section is doing.

    All in all, while reading through documents from sources like w3 schools is a great way to learn, I think another great and engaging way is to go out there and find something you like, then look at the code behind it.

    Cheers,
    Lumi

    Liked by 2 people

  14. Personally, I’d recommend getting 3 books…

    1, on HTML5
    2,. on CSS
    3, on MySQL

    and in that order… (‘m a former software engineer)

    HTML, gives you the skeleton, and to give that skeleton some movement.
    CSS, allows you to give the skeleton form, and function – or to separate form from function.
    and
    MYSQL allows you to put the code into a database and thus make your site dynamic, and totally under your control, based on interaction between your site’s users and their interests, or to fully commercialise it.

    That’s not to say you can’t do much of that without the latter, but if you have aspirations to become a fully fledged web-site designer or builder, that’s the way to go.

    And if so, be prepared to keep up-to-date, as every 2-3yrs, someone somewhere finds a different way of achieving the same result, that the new kids on the block think is Soooo.. Coooolll, and then by the time you’re in your mid-40s, you’re burned out, or your head is so frazzled from learning so many different languages, and versions of languages… (or maybe that was just me, having burned my way through 35+ programming languages before giving up – or rather the industry gave up on me.)

    Cynical? Moi? ;¬)

    Or you could just save yourself the hassle, and let the kids at WordPress worry about the form and function. Tweak it if you must, but just worry about the content… Remember in the new media driven age –

    “CONTENT IS KING!”

    W.

    (http://moneymatterstoo.wordpress.com)

    Liked by 1 person

  15. Starting learning CSS as a teen… That was a few years ago before awesome things like WordPress! (Remember Freeservers? Angelfire? Expages!? Haha nostalgic for sure but you can do so much more so much more easily now. I can’t wait to be able to afford the upgrade… Then I will never get off my blog 😉

    Liked by 1 person

  19. Took a long layoff from CSS. Thankfully, my current setup doesn’t require it. But, if the need arises someday, will def consider a [more serious] return.

    !.!.!

    Liked by 1 person

  20. hey guyz i get a glitch for ya!!!!! paste this into 3 different page on here then log on club penguin and press alt+ctrl 5 times and then press F2 4 times You now have RAINBOW PUFFLE,GOLDEN PUFFLE, 1000000000000000000000000000000000000000000000000 x MILLION COINS, FREE FOREVER MEMBERSHIP, ANY 20 ITEMS TO CHOOSE FROM TREASURE BOOK!!!!!!!!

    Liked by 1 person

  21. hey guyz i get a glitch for ya!!!!! paste this into 3 different page on here then log on club penguin and press alt+ctrl 5 times and then press F2 4 times You now have RAINBOW PUFFLE,GOLDEN PUFFLE, 1000000000000000000000000000000000000000000000000 x MILLION COINS, FREE FOREVER MEMBERSHIP, ANY 20 ITEMS TO CHOOSE FROM TREASURE BOOK!!!!!!!!

    Liked by 1 person

  22. GUYS!!!! THIS IS SUPER DUPER REAL!!!!!!!!!!!! YOU NEED TO USE THIS INFORMATION…
    1.YOU NEED TO LOG OFF YOUR PENGUIN…
    2.PRESS F12 2 TIMES!
    3.POST THIS TO 16 DIFFERENT PLACES ON HERE!
    4.YOU WILL GET £10000085438432 COINS!
    5.YOU WILL GET 4 PUFFLES RAINBOW,GOLD,SILVER,BLACK.
    6.YOU WILL GET A MEMBERSHIP FOR SOOOOO MANY YEARS FOR FREE!
    7.YOU WILL HAVE DIFFERENT CLOTHES FROM LAST YEAR AND THIS YEAR!!!
    8.AND YOU GET PROPELER CLUB PENGUIN PASSWORDS!!!(FROM OTHER PEOPLE)
    9.THEN PRESS F5 14 TIMES.
    10.THEN YOU LOG INTO YOUR CLUB PENGUIN AND YOU GOT EVERYTHING WHAT YOU WANTED! P.S. THIS IS REALLY TRUE! TRY IT

    Liked by 1 person

  23. I learned CSS and XHTML many years ago, and still find it invaluable for tweaking posts and getting the results I want. I have found http://www.w3schools.com/ to be very helpful for learning coding and as a reference source.They have interactive tutorials and helpful examples and lists (of codes, tags, colors, etc.).

    Liked by 1 person