Jun 21, 2013 / Advanced

An Intro to CSS, or How to Make Things Look Like You Like

What is CSS? It’s the design of your site — special code that tells your site how to display things like the color of text and the size of post titles. It’s like decorating your apartment — you decide how to make your space feel “just right” by painting walls or putting up a favorite photo. CSS is the tool you use to “paint” your site and make it look exactly the way you want it to.

Are you a blogger, a freelancer, or a business owner? Do you love tinkering with design and want your site to look just so? Explore our different WordPress.com plans — some, like the Premium plan, come with advanced customization options and unlimited premium themes.

What can I do with CSS?

CSS stands for Cascading Stylesheets. Sometimes, you’ll hear people refer to a “stylesheet” — they’re talking about the CSS code. You can use CSS to make style changes and refinements like:

  • Hiding text,
  • Changing the color of your text,
  • Making your text (paragraphs, widget titles, post titles, etc.) a different size,
  • Changing the width of your content or widget area,
  • Adding borders (or removing them!) from elements like photos,
  • And more!

A first example: Hiding post meta data

Many themes automatically display certain meta data with each post — things like the date, tags, and categories. You can remove these using CSS. In this post, we’ll walk through this using the Twenty Twelve theme.

Here’s an example of what a default post looks like in Twenty Twelve, with that meta data showing:

2012tags

And here’s an example of a site that has removed this information:

The CSS code she used is this:

footer.entry-meta {visibility: hidden;}

And here’s what it looks like plugged into the CSS tab in the Customizer:

2012notagscode

The “footer.entry-meta” piece specifies what content we’re talking about, while the “visibility: hidden;” piece tells the theme not to display the content.

The “visibility: hidden;” part of the CSS is a general command and would be useful in almost any theme, but the first part (footer.entry-meta) will vary depending on your own theme; every theme is slightly different. If you want to find the first part (footer.entry-meta) for your own theme, try searching our CSS Customization forums. Search for both what you want to do (hide tags, hide meta data) and your theme name. If you can’t find a thread about it, feel free to start one.

To enable custom CSS on your own site, you need to make sure you have the Custom Design Upgrade (you can experiment without purchasing it, but you won’t be able to save your modifications). To experiment, you can pull up the Customizer by selecting the “customize” option from your top drop-down menu:

customizer

When you’ve activated your Customizer, you’ll see it as a black bar on the right side of your homepage.

customizer-closed

Just hover over it to slide it open and start experimenting. To start adding CSS, simply click on the CSS tab and add your CSS to the box:

CSSTab

If you’d like some additional resources on CSS, browse our support page on Custom CSS, and check out the recommended resources at the bottom. In the next post we’ll look at how you would find the right declaration on your own site (the footer.entry-meta part), and what other tools are available to you to make CSS edits.

YOU MIGHT ALSO ENJOY THESE RELATED POSTS

Show Comments

16 Comments

Comments are closed.

Close Comments

Comments

  1. I just figured this simple process yesterday on my site vintagephotolibrary. I can’t believe all this time I did not know how to hide different things on my blog. It is such an incredible option to hide elements on a blog through WP’s custom CSS function. I am now looking at more things to customize with CSS on WP.

    Liked by 1 person

  2. It has been a long time since i played around with CSS, all my knowledge has gone. I think it was back in the day when I did a website using frontpage or something equally as bad.

    Liked by 1 person

    1. I’m no expert on CSS but I red the WordPress forums (specially on the same theme I’m using) and get tips from there. Luckily I haven’t messed up and am delighted!

      Like

    2. No, Rebecca. You can’t really mess things up. You are changing the LOOK. I love the Custom CSS option—part of Custom Design option in WordPress.com, and it’s part of the JetPack plugin if you are self-hosting WordPress.

      Like

    3. It is a bit difficult and easy to foul things up using CSS. CSS is another form of technology, which is fairly neutral. This neutrality causes it to be a blessing or curse.

      Would say generally, you’ll not go wrong tweaking a bit here and there. Ensure you make back up copies in case of boo boos. Then, you can reload a “safe” copy if you do have a mistake.

      Look up the Web Design group. That site has sound advice and forums to help folks get up to speed using HTML, CSS.

      Liked by 1 person

  5. In my opinion knowledge of CSS is very useful. Especially when editing your own website. I also try to learn it. I frequently use the instructions posted on the Internet. Here I found another, interesting tips that can be useful to me. Thanks!

    Liked by 1 person

  7. Okay, I am glad that you written something about CSS because I am having a lot of difficulty with it. I have Firebug that tells me what the CSS stylesheet is for my webpage and I put it in-its fine and then I start changing little things on it and all of a sudden the template get wunky. I know, I know go on the forums but I asked this question before and no one has told me what I should do.

    🙂

    Like

  10. I’m thinking of trying to figure out how to use CSS. I was happy to see this post. Could someone (and I know this may be hard to do) give me an estimate of how much time you felt you had to put into figuring out CSS and the custom editor before you were able to accomplish something neat on your site?

    Like

    1. I will be interested in this too. If you find it helpful check out my talk (above). I want to teach beginners CSS. My hope is 4 hours, but I don’t really know.

      Like