How to: Add font styles to the kitchen sink in WordPress

SillyGrrl.com // How to: Add font styles to the kitchen sink in WordPress

I’ve got another easy CSS tutorial for you today. Did you know you can style the items in the little drop-down menu in the kitchen sink? (Did you know it was called the kitchen sink?) Well you can! And it’s really easy…

I’ve styled my h4 tag to highlight the links for more posts from a certain category. Instead of adding font colors, background colors, and text styles to each link I just highlight the text and choose h4 from the drop-down.

SillyGrrl.com // How to: Add font styles to the kitchen sink in WordPress

#content h4 {
color: #fff;
background: #fc2c20;
text-align: center;
text-transform: uppercase;
font-weight: normal;
}

I’ve also used this on the site for the new aerial studio where I’ll start teaching next month. I’ve separated the site into purple, green and yellow for each discipline and created section headers for each…

SillyGrrl.com // How to: Add font styles to the kitchen sink in WordPress

/** yellow **/
#content2 .latest h3 {
font-size: 14px;
font-family: ‘open sans’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 1.3px;
color: #f6cf11;
text-align: left;
}
/** green **/
#content2 .latest h4 {
font-size: 14px;
font-family: ‘open sans’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 1.3px;
color: #a4c600;
text-align: left;
}
/** purple**/
#content2 .latest h5 {
font-size: 14px;
font-family: ‘open sans’, Helvetica, Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 1.3px;
color: #514489;
text-align: left;
}

I’ve put these styles under content because I want them to only work in the middle column & I’ve used the h4 tag styled differently elsewhere, but you can always stick it in your stylesheet just like this…

h2 {
font-family: ‘century gothic’, sans-serif;
color: #363636;
letter-spacing: 2px;
font-weight: normal;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 6px;
text-align: left;
}

Now, don’t get too crazy with this and add in a bunch of fonts and colors just because you can. Instead, choose a couple styles for section headers or special items.

Here is a little more information on font properties >>>

Any questions?

Related Posts Plugin for WordPress, Blogger...
dashed-line
dashed-line

Comments

  1. anneberit says

    Thanks! Got it to work, but think I might have gone about it the wrong way (I’m not that advanced in HTML/CSS) – had to add a div to my link in the post, but guess that I should have put that div in one of the PHPfiles in the theme?! LOL.

    Loving these nerd party post. Keep them coming!

    • Sarah says

      You’ll just need to add the h2, h3, h4 or whatever tag you’re styling to the stylesheet and then when you highlight text in a post and choose that tag from the dropdown it will add

      (or whatever you’re using) around that text. No need to add divs or change php files.

  2. rashmani says

    Hi Sarah,
    thanks for this post, I have a deeper question on this: what if I want to add a new entry to the list, say ‘address2′ besides default ‘address’ but with different styles?

    TIA,
    rash*

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>