7 CSS Tips For Beginner

December 21st, 2008 by under Blog, Tips

If you are a WordPress User, you should know this CMS is using tableless XHTML coding. Which means there is no table <table> tag but only <div>. I will provide some tips for you so you may have some clues when modifying your themes. Before you continue you should have some basic understanding of the HTML / XHTML. If you want to study this subject first, find the tutorials here.

We will discuss more related to WordPress.

1. Syntax

css for beginner
Before we start, we need to know how CSS works.

selector {property: value;}

/*For example:*/

body {background-color: #ccc;}

2. How To Link To My Theme?

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.css" type="text/css" media="screen" />

3. CSS Cheat Sheat

CSS Cheet Sheat

I call it CSS Reset, it is simple an external stylesheet to reset some selector’s default properties and values. It is useful to create cross browsers websites. Besides, it allow us to control the layout easily. If you are using my theme, you will notice there is one line before any CSS codes. I have read some articles claim that it is not refer to all but only most of the selectors. But so far, I don’t have any problem with it.:

* { 
     margin: 0;
     padding: 0;
}
/*I set all the selector's margin and padding into 0*/

Other sources:

4. 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*/
}

5. Class And ID

The symbol for class selectors is (.) while id selectors is (#), but what’s the different between them?

    ID

  • IDs identify a specific element and therefore must be unique on the page. It can only be used once in a page.
  • We consider that it has the higher level than class. It is more specific.
  • can be used and an anchor name.
    Class

  • Classes mark elements as members of a group and can be used multiple times.

Actually, you can use both id and class in a div or element. It’s priority of attributes are depend on id first.

Example:

.title { 
     text-transform: uppercase; /*all the selector with this class will convert the text into uppercase*/
}

#left-col {
     float: left;

}

.box {
     padding: 2px 4px;
     background-color: #ccc;
}

Class

<h2 class="title">this is awesome!</h2>

Multiple classes:

<h2 class="title box">this is awesome!</h2>

ID:

<div id="left-col">this is awesome!</div>

Mixed:

<div id="left-col" class="title box">this is awesome!</div>

Other sources:

6. Float And Clear

Float

Float is a very interesting topic in CSS. I found that most of the beginner will face this problem. Float or not float? I like the explaination from CSS-Tricks.

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary.
by CSS-tricks

css for beginner

.container {
     float: left;
     width: 600px;
}

.left-col {
     float: left;
     margin: 0 10px 0 0;
     width: 90px;
     display: inline; /*to avoid double margin in IE6*/
}

.right-col {
     float: left;
     padding: 10px;
     width: 480px;
}

/*600px = 10px + 90px + 20px + 480px*/

in HTML:

<div class="container">
     <div class="left-col">
          <!--content-->
     </div>
     <div class="right-col">
          <!--content-->
     </div>

Coding CSS is like doing mathematics. When you are using float. Remember to include the width for the container. This is mostly to avoid pushingdown in IE6. Normally, I use a float container to cover float elements inside it. It did compatible to all browsers so far. You may ask why I need 2 floated container? This is to prevent longer content in the right-col move below below of left-col.

Clear

Clear, is to clear any float elements so that they will not overlap on each other. We use clear to start a new row. Normally, I declare this at the beginning of the stylesheet.

.clear {
     clear: both;
}

Other sources:

7. Other Findings

here are my other findings that you might interested in learning CSS more deeply:

13 Comments | RSS 2.0 | Trackback Add comment
From old to new:
  1. böcek ilaçlama January 22nd, 2009
  2. kailoon February 9th, 2009
  3. cbhost February 19th, 2009
  4. Wong Ngawi February 25th, 2009
  5. kailoon March 7th, 2009
  6. Andrew Jhonson September 2nd, 2009
  7. Ajinkya December 31st, 2009
  8. kamal September 29th, 2010
  9. kamal September 29th, 2010
  10. Eswar November 19th, 2010
  11. ifliandry May 16th, 2011
  12. طراحی وب سایت August 1st, 2011
Nucleo, Customizable Vector Icons