Three Styling Changes You Can Make to Change Your Blog’s Appearance

 

If you want to make major changes to your website, you’ll likely need to hire a designer.

But what if you want to make minor changes?

Changing the background, the color or font of text for your headers and content, and styling the hyperlinks can be done in just a few small steps.

First, A Few Words About CSS

Cascading Style Sheets, or CSS, allows a person to change one element on the style sheet that will affect the remainder of the website. Each website has at least one style sheet; some have more. The main style sheet in WordPress is named style.css. In this style sheet is the code for the web site’s design elements. Making changes to this file will change the look of your site.

To Get Started

Locate the style.css sheet by:

  1. Logging into the dashboard
  2. Clicking on Appearance
  3. Clicking on Editor
  4. Locating the stylesheet.css file at the bottom of the right hand side.
  5. Clicking on stylesheet.css (though most of the time this is the one that appears in your editor when you land on this page)

editor

You will need to do this each time you want to make a change to your style sheet.

Before You Begin: A Word of Caution About CSS Changes

Those changes you make will become permanent once you make them and hit the Save button. One forgotten semi-colon can mess up your entire site. ALWAYS copy the existing code, paste it into a Word document or an editor (I like Programmer’s Notepad) and save it. If you make a mistake you can return to that version by copying it and pasting it back onto the site.

 

BODY

Today you want a blue background for your website, but tomorrow you want it red. Or maybe you find a great background image to tile. To make a change to the body of your website, locate the body code in the style sheet.

bodyimage

To use a solid background color, the code will be the number sign and the numerical code for the color you want. For a list of codes, visit the W3schools site.

Locate the code you want and place that after the number sign (#) on the style sheet.

For example, a white background would be #fffff while black would be #00000. The code would read background: #fffff;

To use an image, upload the image file to your control panel under the theme’s images folder. (themes/NAMEOFTHEME/IMAGE).

Then change the file name in the style sheet so it matches the name of your image.

Example: background: url(images/NAMEOFYOURIMAGE.PNGORJPG) repeat (or no-repeat). 

The repeat will tell the image to tile; the no-repeat will tell the image to show up only once on the site.

HEADINGS

To change the size, color or text of your headings locate the headings in your style sheet.

headings

To change the font, place the name of the font you want to use before the rest of the fonts listed. This way, if someone’s browser doesn’t support the text you like, it will choose the next font on the list; and then the next, if the browser doesn’t support the second font.

To change the color, locate the # tag and then add the numerical code you want.

To change the size, locate the font-size and change the number. The size will be listed as px or %; the larger the number, the larger the font.

 

HYPERLINKS

If you want to call attention to other areas of your site or to outside sites, you might do this by linking text to the pages you want to send the readers. If so, you want the hyperlinks to stand out. To change the hyperlinks, locate this in the style.css file.

body

In this example you will see a,a:visited, which changes the appearance of the links, and a:hover, which changes the appearance of links the user is hovering over.

Make color changes using the # symbol.

You can also underline links by stating text-decoration:underline (as seen in this example).