Official Raz Veinz Blogsite

I Build 6 – Creating CSS (Cascading Style Sheets) Using Dreamweaver

Posted on Friday, July 13th, 2012 at 8:05 am

Fact : Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. Source :

Why You Should Use CSS?

Back in early days of the world wide web, it was enough to construct a web page using only HTML coding. But today with influx of all new kinds of devices surfing the net, it has become increasingly important to have web page coding separated into two distinct components: content and styles. In this manner, you can take the same basic content and style it according to the device that is accessing the web page. For example, making a web page printer-friendly can be easily accomplished using CSS. The same goes for mobile devices.

They are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:

  • Add new looks to your old HTML
  • Completely restyle a web site with only a few changes to your CSS code
  • Use the “style” you create on any webpage you wish!

Wow, now I really don’t know how to start with, maybe from the very basic thing, such how to create font, color, background color, border style, etc using CSS….I want to write about my experience playing with CSS using Dreamweaver, to create professional web page, you should definitely learn CSS, maybe you will fall in love with it, who know? More coding to learn? Don’t you worry, step by step, world now-day make us know-nothing-but-want-to-learn easier even you come from definitely from other field, just like me. in an organized and efficient manner

The concept is simple, for example, imagine, like we as webpage and our wardrobe as CSS, so, every style and fashion cloth that you that need for stylish is there, if not, you need to sewing, buy or even steal! Could you imagine yourself without your stylish cloth? That is the basic, but CSS is more than just wardrobe if you explore more deeper.

Now, if you read about my last ‘I Build’ topic, I just create a blank webpage template, the naked man! Let’s try put some stylish on him.

1. Folder

You can write the CSS coding on the template itself, but I highly recommend you to make it separate page,  to be more organized, neat and easy to operate, Click File (Alt+f) –> New (n) –> Blank Page –> Page Type : CSS (Cascading Style Sheets)  template –> Click Create (Enter) Save at your website root (Ctrl+s)

–> create new folder for CSS (for example, CSS or Any name that you prefer)  –> File name: (Any name that you prefer) –> Click Save(Enter) It should be like below picture,

The file is saved in the Templates folder with a .css extension.

2. Connecting

To make it work with your template, you need to tell ‘him’ that you have a new wardrobe for him, Put this coding

<link href=”../CSS/Raz-Veinz-CSS.css” rel=”stylesheet” type=”text/css” />

inside the template HEAD section

3. HTML Style Example

For me, I would like to divide my CSS for specific sections, for example, BACKGROUND SECTION, to put the title without touching the code, type;


/*  TITLE  */


Let’s try, to know either it functioning or not with simple coding, background color,

body { background-color: #8AA7C2; }

body is the name for CSS Style (or Any name that you prefer) and #8AA7C2 is my background color coding, you can use either DECIMAL RGB or HEXADECIMAL HTML color codes, click here for example of HEXADECIMAL HTML, just copy and paste the color code, the result should be like this;

You also can put some image for the background picture or as additional background image, create a new folder for image, right click at the root folder link at the right side bar menu, click New Folder,

Rename the folder, for example, Image or Any name that you prefer, you can drag any image into this folder for your website purpose, for example here, I put two image, Illusion_Window.jpg and Header-Pattern.png,

below is Illusion_Window.jpg,

Then, recall them! put this coding in the same CSS Style (body)

background-image: url(../Image/Illusion_Window.jpg);

/Image/ = Location of  image/picture folder 

It will multiply like this,

you also could make it multiply for only X or Y axis only, put an additional code below, also in the same CSS Style (body)

background-repeat:repeat-x; for X axis

The result,

or background-repeat:repeat-y; for Y axis

If you want to make it just single,  replace the coding with,


Then I choose to use another background image for my website, use your creativity!

body { background-color: #8AA7C2; background-image: url(../Image/Header-Pattern.png); background-repeat:repeat-x; }

Here the result,

If you want to fast edit or add new property, look at the very right side bar, click CSS menu –> All, everything in your CSS is there.

So, that’s the very basic thing about CSS, the introduction,  if you want to learn more, there are thousand tutorial out-there, just ask Uncle Google, I recommend CSS Tutorial , I will use this for my next entry.

You can leave a response, or trackback from your own site.

Leave a Reply