Top 5 CSS Tips for Beginners

Posted on 28. Jul, 2009 by admin in CSS, Tutorials

There’s tons of information to learn, questions popping off in your head, curiosity about how things work, worry if you’ll ever be as good as some people, or just the thought of where to start. Hopefully the following tips will ease that headache and get you on your way. (Disclaimer: The following assumes you have basic HTML and CSS knowledge)

1. Syntax & Linking External Sheet

before we start, we need to know how CSS works.

selector {property: value;}

/*For example:*/

body {background-color: #ccc;}

External CSS:

<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” /> <!–we are calling a css type file (.css) from a specific URL which is for screen (it can be print, all and etc)–>

In HTML, it looks like this:

<link rel=”stylesheet” href=”http://domain.com/wp-content/themes/themefoleder/style.

2. Body

Body is a must have selector, we define font, background and font color here. If the selector is not set in with other value, value in body will be used.

Example:

body {
color: #333; /*font color*/
font: 400 12px/20px Tahoma, Arial, Helvetica, sans-serif; /*font: weight size/lin-height family*/
background: url(images/bg.png) repeat-x top left; /*background: url(image path) repeat position*/
}