Make Quick Changes To Text & Link Formatting With CSS

With the Custom CSS feature, you can make hundreds of major or minor changes to any theme applied to your blog. If you aren't familiar with CSS, however, it can seem overwhelming to determine the code needed to make the changes you want. We're going to detail some CSS attributes you may want to use to make changes to text on your blog. The example CSS code provided can be added to your blog's design at Design > Custom CSS. If you don't have the Custom CSS feature, upgrade to the Unlimited plan.

The text-decoration attribute can be used to apply one of the following values to your text:

• underline - Adds a line under text.
• overline - Adds a line above the text.
• line-through - Adds a line through the text. Also called strikethrough.
• blink - Causes text to blink.
• none - Removes all text decoration elements.
• inherit - Applies format from parent element.

Most commonly the underline value is applied with the text-decoration element. If you would like the links on your blog to be underlined, you could apply the CSS:

a:link { text-decoration: underline; }

The text-transform attribute can be used to apply one of the following values to your text:

• capitalize - Transforms the first character of each word to be uppercase.
• uppercase - Transforms all text to uppercase.
• lowercase - Transforms all text to lowercase.
• none - Removes text-transform and maintains text capitalization in the format it was originally typed.
• inherit - Applies format from parent element.

To force the titles of your posts to have each word capitalized, you could apply the CSS:

.entry-header { text-transform: capitalize; }

The color attribute can be used to change the color of an element of your blog's design. A 6 digit color code can be entered to apply a different color. Some color code resources are: W3Schools.com color names and HTML color names

To apply a different color to the sidebar headings, you could apply the CSS:

.module-header, .module-header a { color: #483D8B; }

The background-color attribute applies a color behind the element. Similar to the color attribute, color codes are used to change the background color. The other available values for background-color are:

• transparent - The background is transparent.
• inherit - Applies the color from parent element.

To change the background color of your blog, you could apply the CSS:

body { background-color: #00CDCD; }

Now, we're going to take all four of the attributes and use them together to give the links in the Navigation Bar a different look. The below CSS gives the Navigation Bar links a different look when you hover over the links.

#nav .nav-list-item a {
text-decoration: none;
text-transform: none;
color: #666666;
background-color: none;
}

#nav .nav-list-item a:hover {
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
background-color: #000000;
}

You'll find more CSS tips in the Knowledge Base and CSS Cookbook. Do you have changes you're not sure how to make to your design using CSS? Ask the Typepad community by posting to the forum today.

Comments

[Cdndesignstudio]

Short and informative post. I really like your post, as it explain all CSS Coding in a very simple and effective way.

[Brenton Griffin]

Thanks for the post, this CSS code will helpful for newbie for sure !

[Margaret Conover]

I don't want to learn CSS. I began blogging on TypePad over 5 years ago, and chose it because CSS was not necessary. What ever happened to the menu driven options to change your font/font color/background, etc??

[The Typepad Team]

Hi Margaret! We offer these tips for folks who want to use CSS to make fancy changes. The Theme Builder is still available to folks who want to use it, and the post compose editor still offers color and font options as well. :)

[Margaret Conover]

Thanks. I found the Theme Builder and it seems to work as I remember it.