CSS Beginners
CSS is something a lot of people ask my advice on, assuming it is too technical or complex for them to learn themselves, this is absolutely not true. It’s nowhere near as scary as it seems and everyone is capable of learning the basics and using it to customize their blogs. It’s not something that will take months or years to learn, with all the excellent resources available right at your fingertips you can teach yourself the very basics in a few hours.Layout and design play such a huge role in how your blog is seen and perceived by others, whether they be other bloggers, potential collaborators or future employers, that you should want it to look the best it possibly can. First impressions count and appearance can often make or break future relationships, especially with clients. Not everyone has spare cash lying around to hire a web designer or to buy custom templates, but everyone can, with a little spare time, learn how to do it themselves. So now there is no excuse for a poor or unoriginal design!
I’ve tried to make this as simple as possible, so that even total beginners can alter their themes with ease. Follow the instructions on how to get to the CSS editor for your blogging platform below, then simply copy and paste my CSS code examples into the box and alter the red text to suit your needs. You can go to the bottom to copy the entire code in full, or pick out only the customizations you need from the sections below.
Where
WORDPRESSTo use custom CSS on a free WordPress blog, you need to have purchased the ‘Custom Design’ feature. You can do this by clicking the ‘Store’ button on your dashboard menu and following the instructions.
Log into dashboard → Appearance → Custom Design → Click ‘Edit’ button in the ‘Custom CSS’ box → Scroll to the bottom and make sure ‘Add my CSS to (Your Theme Name) CSS stylesheet’ is selected under ‘CSS Settings’
Note: The first time you customize your CSS, the area at the top for writing your code should be totally blank, if it’s not, completely delete everything inside so that it is.
BLOGGER
For the purposes of this tutorial, the majority of customizations you will be able to make using the Blogger editor and will not need to add the CSS yourself. Go through the various categories listed and make any alterations using the editor. Do not add CSS for any customizations you have already made using the editor, however, if there is something listed below that the editor cannot do simply click the ‘add CSS’ option and add only that customization/s.
Log in to dashboard → Layout → Click ‘Template Designer’ link → Advanced → Add CSS
Tips
• I suggest that you set up a second ‘tester’ blog for which you can try out your customizations first, this way, once you’re happy with it you can just copy & paste the CSS into your real blog, knowing it’s perfect. This saves your readers seeing the unfinished version, and also it’s reassurance for those that are a little scared to try it out, if you mess up the test blog, no big deal!
• All code highlighted in red can be altered to your own preferences. The descriptions also contain red words, these are your options when altering the code.
• Spellings are always North American – so ‘color’ not ‘colour’ – being British this tripped me up no end of times when I was starting out! If something’s not working, check the spelling!
Background
BACKGROUND COLOROne of the simplest and most requested things I get asked is how to change background colour. It’s a very simple alteration that can make a big impact on your layout and design, however be wise with it – pale colours tend to work best and are the most user friendly. Also note, depending on your theme this may or may not change the colour of the background on your posts and sidebars.
| body { background: #FCF9F8; } |
The highlighted hex number can be altered to any colour you wish. See the resources section at the end of the post for a colour picker that will give you the corresponding code for any colour you select. The colour picker tool in Photoshop (or similar) will also give you the relevant code, look for the ‘#’ box.
BACKGROUND IMAGE
To add a background image, first you need to upload an image to your usual image folder and then copy the URL down. Replace my URL with the correct one for your image.
I personally suggest an image which is small and can be tiled to repeat across the entire background.
| body { background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top; } |
I’ve also included a background colour here, if your background image takes a while to load, or is broken, the colour will be displayed until the image loads over the top, so make this a similar colour to your image.
The repeat right top command tells the image to tile from the top right corner. This can be altered, but I would suggest leaving it as it is. Possibilities are repeat right top and no-repeat.
Font
Font customization is another simple, but very effective way to add personality and style to your blog. Again, keep in mind your background colour, dark fonts work best on light backgrounds and vice versa, users need to be able to read your blog easily, don’t make it hard for them!
| body { font-family:Helvetica, Arial, sans-serif; font-size:12px; color:#1a1a1a; text-align:left; } |
Special
note regarding WordPress: If the above does not change all of your text
to the colour you want, use the below instead. This varies with themes,
so try the above first and only use this alternative if it doesn’t work
for your theme.
|
FONT-FAMILY
This is the font itself, such as Arial, Times New Roman, or Verdana. Unfortunately, you cannot just use any font you like. The font must be one that all computers have installed as standard, otherwise it will not be displayed and a standard font will be used instead. This can really affect your overall design, so it is always best to use one of the fonts which are considered ‘web safe’. Click here for a list and examples of web safe fonts and their families.
FONT-SIZE
This can be any number you want, the smaller the number the smaller the text and vice versa. 12px is the most common size, as it’s easily readable, but clearly smaller than headings and titles. If you do decide to change this, I strongly suggest choosing either 10px, 12px, or 14px.
COLOR
The same as for background, this can be changed to any hex colour code you like. Always make sure to have included the # at the beginning.
TEXT-ALIGN
This tells the text which side to align against, left is the default, but it can also be changed to right, center or justify.
Links
When styling links, a:link, a:visted and a:active should all be styled exactly the same for a clean, uniform look. I suggest customizing a:link and then copy and pasting the styling between the curly brackets into the other ones to be sure. Those 3 are all how the link appears on the page (when it’s unvisited, when it’s visited & when it’s selected), a:hover is how the link looks when the user hovers their mouse over it. It’s common to style this differently to the others, whether you want it to change colour, underline, become bold or it can be styled exactly the same as the others for no change.
| a:link { color:#1A1A1A; text-decoration:none; font-weight:bold; }a:visited { color:#1A1A1A; text-decoration:none; font-weight:bold; }a:hover { color: #B7ABA3; text-decoration:underline; font-weight:bold; }a:active { color:#1A1A1A; text-decoration:none; font-weight:bold; } |
Special
note regarding WordPress: If you used the alternative second option
above for text colour, please follow all colours for links with !important- Otherwise the colour for the text will override your chosen colour!
|
COLOR
Again, choose any hex code you like to alter the colour. I think it’s nice to have the a:active colour different to the rest.
TEXT-DECORATION
This is used to add or remove decoration, most commonly to remove the underline from links. The default is underline, but setting it to none will remove the underline from your links. If doing this, I suggest making the link a different colour to the text, or making it bold, so that it stands out as a link and doesn’t just appear as ordinary text, which is confusing for visitors.
You can also use underline just on a:hover, with the rest set to none, this will make the line appear only when the users mouse hovers over it. Slightly more interesting is overline, this is the same as underline, but the line goes over the text instead of under it, line-through puts a line through the middle of text.
FONT-WEIGHT
This can work nicely if you don’t want your links to be underlined, making them bold works equally well for showing the user that it’s a clickable link. The default is normal, change it to bold for bold text , bolder for extra bold or lighter for skinnier text.
All Together Now
All together, this would look like:
| body { background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top; font-family:Helvetica, Arial, sans-serif; font-size:12px; color:#1a1a1a; text-align:left; }a:link { color:#1A1A1A; text-decoration:none; font-weight:bold; }a:visited { color:#1A1A1A; text-decoration:none; font-weight:bold; }a:hover { color: #B7ABA3; text-decoration:underline; font-weight:bold; }a:active { color:#1A1A1A; text-decoration:none; font-weight:bold; } |
Or alternatively for certain WordPress themes:
|
References
http://www.w3schools.com/css/default.asp – for CSS help and tutorials
http://www.colorpicker.com/ – Hex colour picker
No comments:
Post a Comment