Ever wanted to build a website, or a blog design from scratch? Other than your trusty photoshop and HTML skills, you will also need to know Cascading Style Sheets (CSS) in your line of skills.

CSS is not that hard to pick up, here’s how you can learn the essentials fast with these links.

1. Setting up

Choosing a text editor

For the purpose of fully appreciating the concepts of CSS, we will be using a simple text editor such as notepad.

I would recommend downloading notepad++, an enhanced version of notepad which highlights and identifies markup tags such as those in HTML and CSS

You can download notepad++ here. (Choose the installer.exe version if you are using Windows).

• Notepad++ download
  

Choosing a browser

Many modern browsers these days support CSS. I would recommend Mozilla Firefox for the tutorials and links of this entry. They are tested and proven to work on Firefox (by myself).

If you don’t have firefox, you can download it here.

• Firefox download
  

2. Learning the CSS Concept

Now that you’re all setup, let’s begin by understanding how website layouts are commonly arranged using CSS.

The awe of CSS is its ability to apply a “style” or setting to multiple web pages. Thus, you need to know how to configure CSS handles HTML elements and groups those using classes and ids to apply to many many web pages.

Web designers also use CSS to arrange web elements using a box model. Simply put, it is just visualizing your layout in rectangular blocks to arrange your web elements.

For example like in the picture, you can create DIV blocks for the following web elements:

1. “header” DIV which is the rectangular block to house your logo
   
2. a navigation DIV block for your navigation bar
   
3. a content div block for your content and picture
   
4. a footer div block for your copyright information and other footer contents.
   

CSS Box Model

I recommend this website to understand these CSS concepts and more:

• CSS Tutorial

If you are lost and do not understand any of these CSS functions and their uses, here’s a link that has the entire list of them and examples:

• w3schools CSS tutorial

3. CSS tutorials to get you going

Now that you have some idea on how CSS works and its common practices, here are tutorials that you can do to apply them – by creating a CSS layout from scratch.

These tutorials features popular layouts used on the Internet. They are easy to follow, with step-by-step instructions and ready-made images for you to use.

• Creating a CSS Layout from scratch
  
• Creating a 3 Column layout using CSS (you might wanna read through the tutorials on float featured on the website before starting this one)
  

Now that you’ve picked up CSS, you can try recreating websites by visualizing them with your new found skill to get the hang of it.Have fun!

No related posts.