I had a lot of online and offline friends coming up to me and complain how much their CSS knowledge sucks. I remembered the days when I had a vague knowledge about CSS and I only code based on ‘if-the-layout-works-the-way-I-want-to-then-the-code-is-good’ instead of coding based on semantics and conforming to web standards. After reading and stalking a lot of design blogs, I found out that my coding skills was horrendous and I decided to brush up on it and make it better. Even now, I am still in the process of learning CSS and HTML. Do not hesitate in correcting me if you find flaws in this post or if you had discover that I am giving incorrect information. I am looking forward in correcting my mistakes and learn the correct way of doing it. This post is based on my past experience. I was not sure what is a padding and margin back in the days when I was an amateur in web designing and I only learn based on my intuition.

I am interested in talking about the basics in CSS since I feel that the fundamentals are important and if your fundamentals are not strong enough, you won’t be able to learn more advance tools that you can find in CSS. So just an outline of what we are going to talk about today.

• Important CSS Terms
• Padding and Margins
• Floats and Positions
• Ordered and Unordered Lists
• Overflows
• Things you should not do in CSS

(Click here in order to feed your brains…)

Here is a trick on how to create an image caption with just HTML and CSS. Some of you are not a fan of jQuery and prefers something simpler in order to show your image captions. Here is a solution where you get to display your image captions simply by using HTML and CSS. I remembered a friend who sucks at jQuery and never gets jQuery to work properly on her site even after copy and pasting the codes. This tutorial is dedicated to you guys who hates jQuery!

The first part of the tutorial will show you how to display a static image captions. The second part of the tutorial will be more interactive and will let you show your image captions on hover. Both parts will not require the use of jQuery. You will only need a foundation in HTML and CSS for you to apply this successfully on your website. Of course, you can twist this trick into something more interesting if you have a good imagination. The demos are shown below.

First Image Caption Demo

Second Image Caption Demo – On Hover

(Check out the cool and simple technique below…)

I mentioned before that I was hired to redesign a company’s website. I did not really design the content-management systems. I only design the main layout of the website. I was pretty confident with my HTML/CSS skills. Over-confident to be honest. Little did I know that redesigning a company’s website is a totally different board game compared to redesigning a simple graphic website. Even though a company’s website may look simple and less fancy compared to a personal blog, but it has more links and styling elements. I thought I was good with HTML/CSS, but the process of redesigning the website proves to me that I still have a lot more to learn. One of the things that I had understand more during the process of redesigning is the CSS positioning. I’ll try my best to make you guys understand without torturing you too much.

In this tutorial, I will explain to you each positions in HTML and CSS. If you grasp the concept well or just plain smart, you can use these tricks to make a simple layout. We will look at the 3 positions. The static, relatives and absolute. We will also look into a little bit of floats and clear.

(Curious enough? Click here to satisfy your curiosity..)