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:
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:
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:
When you’ve activated your Customizer, you’ll see it as a black bar on the right side of your homepage.
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:
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
- An Intro to CSS: Finding CSS Selectors
- An Intro to CSS: Previewing Changes with the Matched Rule Pane
Currently blogless? You’re a click away from sharing your story.
Create your blog at WordPress.com
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.
LikeLiked by 1 person
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.
LikeLiked by 1 person
Thank you, Zandy. I appreciate your time and effort in providing this valuable and well-written information at no cost.
LikeLiked by 1 person
I haven’t got brave enough to try CSS. Can I really mess up my blog if I screw it up? Does anyone know?
LikeLike
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!
LikeLike
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.
LikeLike
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.
LikeLiked by 1 person
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!
LikeLiked by 1 person
Reblogged this on euzicasa and commented:
SOmething I always wanted to know more about!
LikeLiked by 1 person
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.
🙂
LikeLike
You might be interested in a detailed presentation I gave on this—it’s a YouTube video, and starts from the very beginning: http://chrisburbridge.com/all-horses-are-red-wordpress-css-for-everyone/
LikeLike
Oh wow! Cool beans man, you rock! 🙂 Ty.
LikeLiked by 1 person
Glad you like it! Please leave a comment, if you wish.
LikeLike
Hat dies auf Der Blog von noone222 rebloggt und kommentierte:
Das ist etwas worüber ich gerne mehr wissen würde …
LikeLike
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?
LikeLike
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.
LikeLike