csstutorialz-5: Introduction to CSS Selector (Element Type Selector)

CSS Selectors: There have three types of CSS selectors. They are as follows:

1.   Element Type Selector
2.   Class Selector
3.   ID selector

Now I will describe each of those selectors and you must know that each selector is important for you.

Element Type Selector:

Element Type Selector is usually an  HTML  element or a tag. You can see wikipedia for more details but I think you don't need the theory at all! Look at the following figure:

See the main code below:

Look at inside the body tags. If you are familiar with HTML tag you can easily understand what I want to point out. Inside the body tag you can see h1, h2, h3 and the p tags. Each tag has its own attribute by default. If you are novice in HTML you may not understand the whole think. Ok, lets preview this page.

 You can see four lines and each lines font size is different. You don't define the font size but how these size become different? Ok, you don't define font size but you put those four lines in four different HTML tags and they are h1, h2, h3 and p. I said that by default each tags have its own attribute such as font size, color etc. And that's why you see the different lines. So, now is the time for you to create you own ELEMENT TYPE CSS code in your style.css page. Open you style.css page. Add the following code under the body codes like this:

You just need to write the h1 tags code just like the last picture. You wrote the body code before if you have see the csstutorialz from beginning or from the 1st csstutorialz. Now, save your style.css page, go to your HTML page, save it and preview it.

With the same process change the attibutes of h2, h2 or the p tags. So, add the following codes into your style.css file (not in ur HTML file):

 Code Analysis: look at the h2 attribute codes. color #FF0000 sets RED color for h2 tag. If you are not familiar with color code please search color codes on Google and get the color codes of various colors. the font-size sets to 36 pixel and here font-weight is bold, that means the text of inside the h2 tag become bold.

Inside the 'p' attribute codes the code background sets a WHITE background for paragraph or 'p' tag. You can set background individually to any element type selector. So, you can sets background for h1 or h2 tags as your wish. I think rest of the codes u have understand. So now, save your style.css page, save your HTML page and preview your HTML page.

 You can see your page or your attributes of different tags have been changed. the h2 tags text looks bigger and RED, your have got a white background in your paragraph tag. Before finishing this tutorial I want to show you a great tips that how can you optimize your Style codes if you have the same attribute on different element type selector. You can combine different element type selector which have the same attribute separate with comma like this:

Here all of the three header tags have the same color of WHITE and have different font size. This is called Grouping. This is the preview:

Thanks for being with me. In the next tutorial I will introduce you to the rest of the two types of CSS Selectors (ID Selector and Class Selector.) Hope you will enjoy.

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.

csstutorialz-3: Why CSS or Cascading Style Sheet?

You the people who are already familiar with HTML/XHTML know that we can easily create pages without Style Sheets. So, why we use it? The answer is as follows:
1. If your website has only one page then you don't need CSS and If your website has only five pages then it might be your options to choose CSS or not, but if your website has 100 pages then you must use CSS. Because you r not able to write the same styles or same codes in 100 pages. I think u r not clear that what I want to say.. OK.. lets see the following picture:

1. If you have one page then you can write the style codes and HTML codes in one page. This picture shows it..

Figure: One HTML page with Style Codes

2. But if you have 5 pages then you have two choices. You can use a style sheet or not, but if you use a style sheet then it will be best process to create a website, this reduces the codes and page loads. Look at the following figure.

Figure: Five different HTML page with Style codes

There have 5 pages and also look at the red box of page1. You are writing this box style code in the other five pages, because most of cases your web pages styles are the same in five or more pages. As for example header, main menu or left side menus view are same in all the pages. So, why you write the same code in the all five or more pages?? Your HTML codes are different but your Style Sheet codes are not different. So, if you have 100 pages then will you write 100 same style sheet codes into 100 pages?? And if a change needs in the style sheet then will you change the codes in 100 pages? Is it possible? So, whats the solution? The solution is you need to use a external style sheet. I will show you in the next chapter how can you add a external style sheet but now see the solution in the following figure:

Figure: You have only one Style page and 5 or 100 or unlimited number of HTML pages

Thanks for reading this tutorial. The next tutorial will show you how can you write your first CSS Style and how can you link up your style sheet to the HTML page.