Do you wish you had more control over your WordPress blog? Are your backgrounds, fonts and styles just not up to your standards anymore? Are professional web designers hard to reach? And when they work on your site do have a hard time getting you the look you want? With CSS (Cascading Style Sheet) your problems and issues about how your website looks and feels like will soon be solved.
CSS comes free with Custom Design, one of the features WordPress Premium and WordPress.com Business plans.
What is CSS?
What’s CSS exactly? It’s a web development language you can use to make changes to any elements on your page whether these are heads, texts or graphics or even the background. These changes can be anything from size, spacing, margins and colors. You can just change one element without worrying about affecting other elements on the page. It also lets you separate design from functionality.
CSS requires a bit of coding knowledge, but is very easy to learn and use. For an excellent article on CSS positioning, see here.
To access the CSS editor, just to go to your blog dashboard, under “Appearance” click “Customize” then “CSS”. Here are some options you might want to fiddle around with first:
Default Welcome Message
If it’s your first time with CSS or if you’ve just recently changed themes, you should see a placeholder comment on the page. Open the style sheet. The command line for the comment is:
1 /*(default message)*/
You can type your own comment in here. Note that the parentheses are representative, it should be your comment in the space between the asterisks.
Setting your own CSS
Any theme you load for your blog will have its own CSS settings. However, there may be times you want to use a theme as a blank canvass where the default settings do not apply. You can do this by going to your blog dashboard, choosing “Appearance” clicking “Customize” then choosing “CSS panel”. There will be an option for “Don’t use the theme’s original CSS”.
If you have set CSS settings for a theme but set that theme aside, don’t worry. Your CSS settings should override any original CSS a theme may have one after you load it.
The “Content Width” setting is the default size for images, videos, and other elements when they are inserted into your blog. Only use custom width if you have modified the width of the primary content area using custom CSS.
Changing content width will not affect the size of some images and videos you added before changing the setting and you might have to re-insert some of themes after changing the settings.
Not all your readers will be viewing your blog on the same device, they will use table, computers or smartphones. To apply your CSS changes to themes designed for mobile devices open your blog dashboard, go to “Appearance” then click on “Mobile settings”.
Saving your CSS settings
When editing CSS rules with Custom Design your changes will automatically be applied to the preview window, but you have to click on the “Save” button in order for these changes to be applied.
Note that if there any revisions you want to cancel or just get details of, the latest 25 revisions of your CSS edits are automatically saved and can be accessed by using the CSS Revisions.
In your blog dashboard go to “Appearance” choose “Customize” then click on “CSS panel”.
Remember that when you change themes, all CSS settings or changes associated with that theme come into play. Settings for one theme will not be carried over to another.
These are only a few of the things you can do with CSS. There are classes and online communities you can turn to for tips and tricks to improve your skill. The better you get, the more your blog benefits from your knowledge.
For more CSS and web design articles, be sure to check out our other web design articles.