csstutorialz-4: Creating Your First Style Sheet (External)

There have three types of CSS or Cascading Style Sheets. They are:

1.    In-Line Style
2.    Embedded Style
3.    External Style Sheet

We will discuss this types of style sheets in details in csstutorialz-5. Now we will create an HTML file and an External Style Sheet and then join them. So, lets go...

Step 1: Open Dreamweaver (CS5 or CS4 or CS3 or any version). You will see the following scenario.

 Figure: Dreamweaver CS3

Step 2: Then create an HTML file from file menu (click new and choose HTML)and save it in a folder. Suppose we create an HTML file and name it index.html and save it in a folder called myFirstCsstutorialz. The following is the preview of index.html page. When we create a HTML file we will see by default the design view of this page.

Figure: HTML file

You can preview this blank page and one important think is you must create a new HTML blank page. So, lets preview this blank HTML page by pressing f12 key. Can you see ur blank page? wow!! if not please be patient, I think you don't follow those steps carefully. I have seen a blank white page like this:

Figure: Preview HTML page

Step 3: Create Your first style sheet. From the file menu click new and then choose CSS. You must create a blank CSS page and save it to the same folder (Where you save ur HTML file or index.html file). I have created a CSS named style.css and save it to myFirstCsstutorialz folder. The CSS page looks like as follows:

Figure: CSS page

If can see some codes/words are written there, you can delete them. Because sometimes if you don't create a blank CSS page then there might have some code there. We don't need them. We will write code by ourself. So, if you see some code on the style.css page just delete them. (Note: You will not delete any code from the HTML file that you have created before.)

Step 4: So, now the time for writing your first CSS code. In the style.css page write down the following code like this:

Figure: write your first css style code

Code Analysis: The code analysis is not the part of your code. I just analyze the code for you. Code analysis:
body is for the body tag of HTML page
the second bracket “{” is the starting and “}” it the
ending period of body tag
‘background’ sets a background color for body
here the color is light green and code is #00FFCC.

Step 5: Now, if you preview your HTML page will you get an Light Greed page? The answer is 'no'. Because you didn't link up ur style.css to the HTML page. How can you link up these?
Click your HTML page and change the design mode to code mode, that means click 'code' for the code view of HTML file. you will see the following scenario:

You might can see the head tag. inside this head tag write down the following code:

look at the red box. 'href' means hyperlink reference and 'style.css' is the name of your style sheet. your style sheets name can be any like 'xyz.css' or others.  rest of the others code you must write. Your page looks like this:

Look at the red box. You just included this line of codes.

Step 6: So, now the final step. You have created a HTML file, you have created a CSS file and you link up them. Thats complete your task. Just save your HTML and CSS file (ctrl+s) and preview the HTML file. [Note: if you don't save your HTML/CSS file you will not see any changes on your preview page.] Your page look like this:

 You will see the greed page, not the congratulation message. The congratulation message is from me. Thanks for with my csstutorialz-4. In the next tutorialz i will tell you about different types of CSS Selectors.