Please note that I have used the words Control, Box and Dialog interchangeably and therefore do not mean otherwise until and unless specified.

We are aware of the Alerts in JavaScript – which looks like in the image below

Alert box in JavaScript

This Alert Box is available in Flex. Just like any other Alert Control in JavaScript, the Alert in Flex is a pop-up dialog box which can contain a message, a title, buttons(Ok/Canel/Yes/No) and an icon. And also, when the Alert dialog pops-up, the rest of the application will be inaccessible and out of focus.
the Alert Dialog can be closed either by pressing the “Esc” key or by clicking on a button in the Dialog box.

To use the Alert control, we need to import a class that will define the Alert Box. We need to import mx.controls.Alert and then call the show() method to display the Alert Box.

The following is a small example on how a Alert Box looks like in Flex 3:

The code for the above example is as follows:

As we can see from the above code, what we have is a button called “Click Here” for which we have an event called “click”. On clicking the button, the event is passed to a function showAlert() which calles the show() method from the Alert class to display the Alert Dialog Box.

Please go through my previous articles, for a better understanding of Registering Events.

Alert Control Syntax:

The syntax for the show() method is as follows

Here is a short brief on the parameters of Alert.show():
message: We can write here in quotes the message we want to display in the Alert Box.
title: We can put here in quotes the title for the Alert Box.
flags: We can specify here the buttons we want to be displayed in the Alert Box.
Examples are:

Each option is a bit value and can be combined with other options by using the pipe ‘|’ operator. The default value is mx.controls.Alert.OK.
parent: The parent object of the Alert control.
clickListener: This specifies the listener for click events from the buttons.
iconClass: Specifies an icon to display to the left of the message text in the dialog box.
defaultButton: We can set a default button for the Alert Box we create by using one of the valid values for the flags argument. This can help when the user doesn’t use a mouse to get through the Alert Box, but instead uses the “Enter” key on the keyboard. By giving this value, we can set what button is to be considered as default.

Let us now see the above listed values for the Alert.show() method in action.

Lets write a program where, say, I want to enter some Text in a TextInput and on the click of a button should be able to “publish” the text to a Text component. When I click on the button, an Alert box will pop-up asking me for a confirmation and the program should be able to publish or cancel the publishing based on what I click on the Alert Box Control.

So, here goes:
1. The MXML:
First, we will use the necessary components for this program – the TextInput, the Button and the Text components. I have coded them as follows

I have used the id’s “myText”, “myOutput” and “myButton” for the TextInput, Text and Button resspectively.
The click event for “myText” makes sure that the TextInput area is cleared every time you are ready to input some text.
“myOuput” has some text by default, which will be replaced when the user publishes the text.
the Button, “myButton” has a click event which calls the myShowAlert() function. Let us move on to see what the myShowAlert() has got.

2. The Script Block:
The code in the script tag is as follows

3. The function which calls the Alert
Let us take a closer look at the myShowAlert() function

An event is passed to the function myShowAlert() when the button “Publish Text” is clicked. This function contains the Alert.show() method where the following are its values:

• Message displayed: “"Are you sure you want to Publish the text?"“
• Title: “"Please Confirm"“
• Buttons displayed: “Alert.YES | Alert.NO | Alert.CANCEL“
• Parent: “this“
• Close Event: “listenToAlert“
• Icon Displayed: “someIcon“
• Default Button: “Alert.YES“

The above list of values should be pretty self explanatory.

4. The CloseEvent
Now, we have a close event in the the Alert.show() method for which we have to import the CloseEvent class as “import mx.events.CloseEvent”.
The listener “listenToAlert” will be invoked when a button is clicked on the Alert Box. The code for “listenToAlert” is defined as

As per the above code, “someEvent” is the event passed from the Buttons in the Alert Box and “someEvent.detail” will give us the Button clicked. Therefore, we can compare to see which Button is clicked and can perform necessary set of actions depending on the Button clicked.

5. The IconClass
We then have the IconClass which is defined as

We have used some DataBinding here. We have used an image (I have taken a random image) which I have binded to the Class variable I have declared. We can now use the variable/class “someIcon” to directly refer to the IconClass in the Alert.show() method.

6. The Default Button
Just in case the user doesn’t use the mouse to click on the Alert Buttons, but instead uses the “Enter” key on the keyboard, we can set a default button to be considered. Here we have set it as the ‘YES’ button. So, when the Alert pops-up, try pressing the “Enter” Key – the application will take it as a ‘YES’

So, that should be it. The entire application code will look like this

And the output for the above code is

Try giving some input and clicking on the button.

Hope you enjoyed this post. Do you have any feedback/questions? Please post it in the comments below.

Related posts:

1. Examples on Registering Events in Flex We can register Event Handlers and Listeners in more than...
2. Events in Flex What are Events and Listeners? Events are what make an...
3. The Flex Builder IDE for beginners The Flex software is built on the widely used Eclipse...

Related posts brought to you by Yet Another Related Posts Plugin.

Using inline Event Handler

In the below example, the event is written directly to the Button component which when clicked calls the “myEvent” function

The output is as follows:

Using the addEventListener() method

Using this method provides more flexibility and allows us to register multiple components to the same event. Using this method also enables us to use removeEventListener() method

The output is the same again:

Using inline Event Listeners

We can also add the Event Listener to the same button component which fires the Event.

Output, of course will be the same:

Using specific Event type

The following example passes the Event as type MouseEvent. It is a best practice to include a specific Event type.

Output:

Using addEventListener() inline

Having discussed all the above so far, this must be pretty obvious. We can include the addEventListener method inline to the Button component. However, we will be using the “initialize” property of the Button rather than the “click” property.

and the output, is the usual:

I hope that was informative. Please share your thoughts through the comments below.

Related posts:

1. Events in Flex What are Events and Listeners? Events are what make an...
2. Introduction to the Alert Control in Flex This article gives an introduction to the Alert Control in...
3. ActionScripting in Flex It is important to know that Flex is not here...

Related posts brought to you by Yet Another Related Posts Plugin.

Events are what make an application work. Actually, without Events, we cannot make an application. An Event can be described as anything from a mouse click to a return of a web service call.

Any user interaction with the application can be treated as an Event. It can be a mouse click or a keyboard button press, a change in a component, or when the data completes loading or even when an application is created. So, when an event is fired or dispatched, there has to be something to pick up the call – this is what we call a Listener. A Listener is just a method or a function which we write to receive an Event fired due to any user interaction.

Let us look at a small example of how an Event is fired and is taken up by an Event Listener or Event Handler. Try clicking on the button “Click Here” in the below application

The code for the above application is as follows:

Observe the code writtent for the Button component. The button is waiting for a ‘click’ event which when occurs is passed on to an event handler that updates the Label component with the text “You clicked on the button”. It is important to include the ‘event’ keyword so that Flex passes it explicitly to the Event Handler or Event Listener.

What I have shown above is just a basic example of a simple Event. There are several Events that a button can have. To look at the complete list of Events, go the design mode in Flex Builder, click on the Button and in the ‘Flex Properties’, click on Category View as shown in the image below. This will display a complete list of available Events for a particular component

Events in Flex

Observe that there is already a value for the ‘click’ event as I have written a Event handler for it.

We can also get the list of Events available in the Source Mode. In the Source Mode, just hit space after typing in <mx:Button and we will get a auto completion box. The attributes with the gold colored symbol on the left are the Events for the Button Component.

Event flow in Flex

The Event flow in Flex comprises of 3 parts:

1. Capturing Phase
2. Targeting Phase
3. Bubbling Phase

1. Capturing Phase

In this phase, the Flash Player searches every node from the root node to the target node for any listeners and it stops when it finds one.

2. Targeting Phase

The Flash Player sets appropriate values to the target node and checks the target node for any listeners registered.

3. Bubbling Phase

In the third phase, the Flash Player searches for any Listeners starting from the target node to the root node and stops when it find listeners on the root node.

Different methods of Registering Events

There are two ways we can register Event Handlers in Flex. The first method is to include inline Handlers as in the example we discussed above. The second is to use the addEventListener() method.

Using inline Event handlers:

Using the addEventListener() method:

Observe in the second method, where I have used an Event called “creationComplete” for the application tag. This Event is fired when the application completes loading in the browser. This calls the function ’startApplication’ that I have defined in the Script area. This function has an “addEventListener” method which is waiting for a mouse click written to the Button. So, the “addEventListener” is only called when the user clicks on the Button. When a mouseclick Event occurs, the addEventListener method calls the function ‘mySampleEvent’ that defines the text to be updated in the Label.

Though this method might seem a bit tedious, this gives developers more flexibility and also, we can register multiple components to the same Handler.

So, that was about Events in short. It would be best to go through the Adobe Livedocs on Flex 3 for a more in-depth knowledge of the Events Propagation and stuff.

If there is any important thing related to Events that you think I should have included in the above post, please let me know through your comments below.

Related posts:

1. Examples on Registering Events in Flex We can register Event Handlers and Listeners in more than...
2. Introduction to the Alert Control in Flex This article gives an introduction to the Alert Control in...
3. ActionScripting in Flex It is important to know that Flex is not here...

Related posts brought to you by Yet Another Related Posts Plugin.

Note: I know this ain’t great quality which is why I am also giving away the higher resolution of the video. You can download the ‘How to include ActionScript in Flex’ Video Tutorial here. After all, this is my first video tut and I am just getting better

Download High Resolution Video Here

How to include ActionScript in Flex for beginners:

Related posts:

1. ActionScripting in Flex It is important to know that Flex is not here...
2. CSS Selectors, Properties and Values for beginners This article descibes all about CSS Selectors, Properties and Values....

Related posts brought to you by Yet Another Related Posts Plugin.

I have mentioned earlier in one of my posts that Flex uses ActionScript – in a big way. Actually the mxml code we see is converted to ActionScript in the back end and the final output is given to us as a SWF file.

I have heard several developers say that Flex is here to replace ActionScript. Well, they are wrong – Flex will not replace ActionScript, at least for now. Flex and ActionScript complement each other. While Flex makes it easy for developers by providing several built-in components that can be used with ease, we should not forget that these components are actually built in ActionScript.

Flex builder 3.0 accepts only the latest version, ActionScript 3.0 to be used in a Flex application as it sticks to Object Oriented Programming.

How to use ActionScript in Flex?

we can include ActionScript in Flex in more than one way:

1. Inline ActionScript
2. ActionScript within the Script tag
3. External ActionScript

1. Inline Scripting

ActionScript can be placed within an mxml tag. Let us consider a Button which says “Click Here” and an empty TextField. The code will be as follows:

Observe that I have given an ‘id‘ to the TextInput component, so I can refer that component using the id.

Right Now, the code doesn’t perform any action. Let us now, include a script for the Button tag which will insert some text into the TextInput. Observe the Inline ActionScript below (in red):

The above code says – on click of the Button, pass the value of “DeveloperWall” to the TextInput with the name “sampleText”.

So, when a user clicks on the button, the event of the button click is called and the value is passed to the TextField. the output will be like this:

Output of Inline ActionScript Example

2. ActionScripting in Flex using the </mx:Script> tag

Flex provides another great way of including ActionScript within the code – using the </mx:Script> tag. The tag will start like any other normal tag in Flex. However, there is some ‘CDATA’ stuff that should be included within the </mx:Script> tag. Overall, the Script tag would look like this:

The CDATA looks like nerdy stuff to remember, but again Flex Builder is handy to provide code auto-completion. You can simply type <mx:Script and when you close the tag with >, Flex inserts the rest of the code for you. Simple, ain’t it?

Anyway, what is the CDATA for? What does it do?
Flex renders the entire code as XML. So, to tell Flex that the ActionScript is not to be rendered as XML, we have to embed the ActionScript within the CDATA code. To put it simple, CDATA tells Flex not to render the code within as XML.

Let us now modify the code so that the ActionScript is written in the <mx:Script> tag. Observe the code below:

Observe that I have inserted a function for “click” in the button tag. This function is called when the button is clicked and is referenced in the <mx:Script> where the function is defined. The keywords “public” defines the scope of the function as public and “void” is to state that there is no return type for the function. Again, the output is the same as the Inline ActionScript.

3. External ActionScript Files

This is best way to include ActionScript code for a Flex application. To import an External ActionScript file, we can either use the source attribute for the Script tag or use the include directive. Both methods copy the contents of the specified file into your MXML file.

The source attribute for the Script tag is written as follows:

Using the above method makes the MXML files less cluttered and also promotes code reuse across different applications.

The include directive syntax is as follows:

The above two methods tell Flex to collect the contents of the sample.as file, which is in the folder ‘actionscript’ to the current mxml file.

As an instance, I have created a AS file – sample.as (we can create AS files in Flex) and have placed it in a folder called ‘actionscript’ within the ’src’ folder.

The folder structure I have given is as follows:

External ActionScript Folder Structure

Once we run the application, we get the same output.

Output of External ActionScript Example

I hope the above information was helpful. Please let me know your feedback by posting your comments below.

Related posts:

1. Introduction to the Alert Control in Flex This article gives an introduction to the Alert Control in...
2. Events in Flex What are Events and Listeners? Events are what make an...
3. Examples on Registering Events in Flex We can register Event Handlers and Listeners in more than...

Related posts brought to you by Yet Another Related Posts Plugin.

What is a Rule in CSS?

A Rule in CSS comprises of a selector, properties and values that define an HTML element as in the example below

CSS Selector, Property and Value

The above rule is made up of 3 parts – Selector, Property and Value.
p in the above code is the selector. The Property in the above code is color and the Value of the Property is red. The colon(:) is used to define the value for the property. And the semicolon(;) at the end of the value is to denote that the Property declaration has ended and that a new property can now be included for the same Selector.

The above code can be also written as

However, it would be best if we define each Property in one line.

Syntax and Declaration

This is the general syntax of a CSS statement when defining a rule. The code within the curly braces is called the CSS Declaration of a selector.

We can include more than one property declaration for the same selector as in the example below:

The above style has 3 property declarations. The rule is to make any paragraph (the <p> tag – as the selector) to appear red in color, with a size of 14px and bolded. The output would be as follows (assuming “Lorem Ipsum” as the dummy text withing the <p> tag in HTML

Types of Selectors

The following are the different types of selectors in CSS

1. Basic Selectors
2. Class Selectors
3. ID Selectors
4. Pseudo Selectors
5. Descendant Selectors

Basic Selectors

Styles written to a HTML element with the element itself as a Selector is called Basic Selector. In the example below, h1 is an HTML element which is used to display headings.

Class Selectors

These selectors do not correspond to any HTML tag and when written always start with a ‘.‘ (dot). These selectors can be given any name, preferrable something relevant. And this name is used in the HTML by using the “class” attribute.

ID Selectors (Identifiers)

These Selectors are similar to the Class Selectors. However, instead of a ‘.‘, the symbol ‘#‘ (hash) is used to denote an ID selector. Also, another major difference between a Class Selector and and ID Selector is that, Class Selectors can be used multiple number of times within the same page. But an ID Selector can only be used once in a page.

Pseudo Selectors

These selectors help in defining the characteristics of an element. Mostly used with the link selector, it is defined as follows:

Applying the above style will format all links in a HTML page. It will originally display the link in red color. On hover with the cursor, the color of the link will change to black. On Click, it will change to green and when the link is visited, it will change to blue. You can test the above code here.

Descendant Selectors

Selectors defined based upon their HTML tree appearance are called Descendant Selectors. The below example explains a Descendant Selector. It says that for every h3 tag appearing in a table, change its color to red and make it bold.

I hope the above was informative. Please let me know your feedback/comments.

Related posts:

1. CSS for Beginners part 2 This second installment of CSS for Beginners will give you...
2. CSS for Beginners Ever wondered what is behind a beautifully designed website? The...
3. The Flex Builder IDE for beginners The Flex software is built on the widely used Eclipse...

Related posts brought to you by Yet Another Related Posts Plugin.

The sample application in Flex, done/explained in the previous posts, was to give you an experience of what is actually done with Flex. We will now take a complete look at the Flex Builder itself and see what are the several advantages that we have been provided with to create web/desktop applications.

I am assuming you have Flex installed and have the example from the previous post opened. If not, you can create one quickly.

So, we have coded our sample web application to create two Panels with different X and Y values. Great! Now, let’s take a look at the design mode within the Flex Builder. You can find the Source Mode-Design Mode buttons just above the coding area as shown in the image below:

Flex 3 Source/Design Modes

Click on the “Design” button and you will get a preview of what we have coded as it would appear in the final output. Please refer the image below:

Flex 3 Design Mode

The design mode offers a great advantage by allowing us to manipulate the layout of the application by moving the elements around. Try to drag the Panel within the blue background area, which is our root node-the application tag. When you move the panel around, you can also observe that the X and Y values of the panel are changed automatically in the source mode. Cool, isn’t it? There is more!

Now, observe the left and right panels of the Flex builder in the design mode. To the left of the design is the Flex Navigator and below that is Components Panel [Everything in flex Builder is made up of Panels. Just to avoid confusion with the Panel Component, I will call the flex Builder Panels as Sections, going forward]. You can simple drag any component on to the stage of the layout and Flex Builder will automatically adjust the code for the new component. Try playing around with the new components – select a component, drag it and drop it on the stage. Go back to the source mode and check the code that is added because of the new component. I will concentrate on each component individually in my articles to come. For now, let’s just look at the Flex Builder.

So, you can drag components and place them wherever you want. Let’s say you you want to delete the existing two Panels and want to insert a new one.
Select the Panels, one by one as shown in the image below and press “delete”.

Flex Design Mode Editing

Now, go to the components section, identify the Panel component and drag it on to the stage to the top-left. When you drag a component, the Flex Builder shows you guidelines which help you in aligning components when you are working with more than one. We now have a new Panel on the stage.

Editing in Flex design mode

What if you want to add a Title to the Panel and also you want to create a button in the Panel? You need not go back to the source code and add a “Title” attribute. You have something called Flex Properties section to your right where you can change the values as needed

Flex Properties Section

You can change properties of the Panel(like color,title, height, width, etc) as per requirement. We also have a Layout constraints section within the Flex Properties that helps us to set the position of components in complex layouts, so that the layout remains the undisturbed even the application is re sized.

I will set the ‘Title’ in the Flex Properties section to Another example of Panel. And also, I will change the width and height to 450 and 200 respectively. Please refer the image below:

Editing the Flex Properties section

The final output in the browser would now look like this

Final output of the flex application

Related posts:

1. Flex 3 – A closer look at the MXML code in the sample application So far, we have created a sample application, which does...
2. Flex 3 – Beginner example I will now show you a basic “Hello World” example...
3. Flex 3 for beginners Lets start off with Flex 3, an Adobe product to...

Related posts brought to you by Yet Another Related Posts Plugin.

Search Engine Optimization or SEO is the technique of increasing web traffic to a website from search engines. It is also the process of promoting a site to the top results in a search engine for specific keywords.

Advantages of SEO

As mentioned, SEO is a technique to increase web traffic to a particular website. So, if a website is so popular on the search engines, then users are automatically driven to that website. This will obviously increase demand for that page and advertisers would like to have their ads on that site. And this obviously means money.

Having said that, it doesn’t really mean that you can’t do anything about it. You have to make sure that you put in all the keywords, meta data and stuff in the web page to make sure that it is indexed in the search engine database.

How to make sure that your page is ranked at the top in all search engines?

Big question! Let’s take a loook at what exactly happens with search engines.

Search engines like Google, Yahoo and MSN have their own algorithms to crawl a web page and then index it. When a search term is entered in the search engine by a user, the relevancy of the content is checked from the indexed pages and then the results are shown in order of relevancy. Since the algorithms used by the search engines are different, there is no guarantee that a page ranked 2 in Google has to be ranked 2 in Yahoo, it can be ranked 100 in Yahoo. There is no consistency in the search engines.

I bet you didn’t understand that. Let’s take a closer look.

Search engines are not humans. They can’t think nor can they see a web page the way a human does. All they can do is read the content of a web page. So, content is the first and foremost thing for a search engine.
All search engines have softwares called Spiders, which crawl on a web page and go through the content. After they finish crawling, they index the page in a huge database that also contains the indexing results of other web pages. Now, when a user types a keyword in that particular search engine, it looks up the indexed pages in the database. If there is more than 1 page with the requested search keyword, it calculates the relevancy of the indexed pages against the search term and then displays the results in order of relevancy.

Again, the algorithms used by these search engines differ in logic from one search engine to the other. As a result, in most cases there is no rule that a particular web page has the same page rank in Google, Yahoo and MSN.

Having said that, you have to put in your efforts to make sure that the search engines spiders crawl your page and index it against relevant search words. How do we do that?

Importance of Keywords, Meta data, and links

Keywords are something which can keep your web page float in the current situation where we have billions of pages in the web. Keywords are a way to promote your page in search rankings. Let us, for example, say that a person has a website about Food. Given that it is one of the most frequently searched term, the person has to make sure that he includes all kinds of keywords related to the word “food” – like, “spicy food”, “junk food”, “fast food”, “chinese food”, “indian food” and so on. This will help the spiders to understand the relevancy of the food to your page and will hopefully put it in the top results next time.
One great tool to search relevant keywords and put up in your website is the Google Keyword Search.

We then have the Meta Data. Though this is an old technique to increase traffic to a page, this is still considered as a first step towards SEO. There were times when the search engines only used to look up the meta data and rank a page. Times have changed and so have search engine algorithms. Meta data is not the most important things to do these days but doing it will be no harm. So, please make sure that you have meta tags, meta description and meta keywords for your site.

Links are now growing up to be one of the most important things to superior SEO. One has to make sure that there are no broken links in a website. Also, if possible keywords should be included in the Link itself along with a title tag that gives a description of where the link leads to. Spiders look for links in a web page so, they can search other pages in the website and index them through links. It is important to make sure that all pages in a website can be accessed through something called a “Sitemap“. A page that would explain the website structure.

Content in a web page

Making sure that keywords and links are present alone doesn’t guarantee you a spot in the top page ranks. The main thing is the Content. Search Engine algorithms, these days, are so mature that they can make out a fake website from the content itself. So, content is very important. Keep the content genuine and updated and the traffic will flow in automatically. Automatically? Will it?

Promote your website

Not literally automatic. But there are socail networking sites like Facebook, Digg, Delicious etc., in which you can promote your site. Present the first paragraph of your website in a very interesting way and link it to your webpage in a network like Digg. If people like it, they will visit your website and traffic will automatically flow. This will also ensure a good page rank. However, the content needs to be genuine or, you are bound to land in trouble and your website also might face a possible ban in search engines.

So, please go through SEO carefully and make sure that you do it the most genuine way and you will be rewarded with good page ranks.

Did I miss anything? Please let me know by discussing it in the comments section below.

Related posts:

1. Blogging Blogs are fast catching up. There were days when the...
2. CSS for Beginners Ever wondered what is behind a beautifully designed website? The...

Related posts brought to you by Yet Another Related Posts Plugin.

Four reasons why people blog these days

1. Money
2. Fame
3. Fun
4. Others

Money

Most people believe that they can earn lots of money through blogging. Some people come to know about one successful person who has earned well through their blog and therefore think blogging is an easy way to hit the jackpot. While it is true that blogs can ring in money, it isn’t completely true or at least, there is no thumb rule which states that any blog can make money.

There are many reasons why a blog can fail. Some of them are as listed below

• Uniqueness: Most successful blogs are unique. Yes, a blog needs to be unique to earn big money. Not everyone can start off a blog, and write about their cat and dog and make it big. There are limitations set by readers. And without readers, your blog is no good.
• SEO: The right Search engine optimization techniques should be used to make sure the blog shows up on a good search engine. Any manipulation here can even result in the blog being removed from the search listing permanently. Therefore it is recommended to go through the valid techniques on the web and then optimize the website for search.
• Keywords, Tags, Links, Alternate text: A genuine blog with great content is of no use if the blogger doesn’t set the right keywords, tags, alternate text for images and link description. Any content in a blog should be accurately described with the tags. Links should be given the correct treatment like given the description in the “title” tag and images of course, should be given alternate text to make them optimized. All this comes under SEO, but this is so very important that I decided to write it as a separate point.
• Meta Content: Again, this is similar to the keywords. All websites and blogs must have the meta content as a part of SEO. Agreed that Meta content is getting outdated – but please note that it is still being considered and is of no harm if it is included.
• Domain Name: The domain name is as important as the content in the blog. One can not name a site “doglovers” and then write about all kinds of animals in the blog. It would be best if the domain name is related to the content and not just that a cool name will do the job. Trust me, there are people who just turn away from a site by looking at the domain name. [Ya, I know - I named my blog "developerwall" and am writing about blogs. But hey, you are in the gossip section and moreover, I think every developer is related to blogs.]

Fame

Fame, Celebrity Status, Influence are some of the things that many bloggers aim for. Although this is in a way related to Money, there is more to it. I have come across several people who look at fame as a path to success and money. Well, I won’t argue much on this as I have seen people becoming famous and then rich and also people who have become rich and then famous. So, lets just say this is one of the main reasons why there are blogs everywhere.

Fun

Some people blog for fun. They don’t expect anything in return nor do they blog seriously. But again, there are a few people who are so much obsessed with the idea of blogging and find it so much fun that they mantain around 3-4 blogs, peronally too. No wonder we see so many blogs around.

Others

Interaction, though it sounds like a silly point, can very well be a straight forward point. My colleague at work enjoys working less and interacting more with other people. These people enjoy social attention and just want to be recognized by others hoping it would pay off in the future.
Then there are socially active bloggers who blog for charity with a point of helping the needy. They make money through blogging and then donate the money to an organization or sometimes, they ask people to donate money straight forward. While there are some genuine blogs which do this, there are also blogs which is just cloaking the actual intention. So, a little research before donating will help.

Keeping the above in mind, we now know why there are an increasing number of bloggers.

The trend right now is fast changing. People are quitting jobs to become full time bloggers. This gives them more time to concentrate on their blog and earn more money. And also, if it is fun to do that, would you not quit your job to become a blogger?

What do you think can be additional reasons for increase in blogs and bloggers? Leave your comments below to discuss this.

Related posts:

1. Search Engine Optimization Introduction to SEO Search Engine Optimization or SEO is the...
2. About Hi – I am Kalyan, a web developer and designer...

Related posts brought to you by Yet Another Related Posts Plugin.

There are 3 ways we can write styles.

1. Inline
2. Internal
3. External

1. Inline CSS

Inline CSS is – writing the required style to a specific tag within the page.

For Example:

The above piece of code is to display anything within the paragraph tag in red color.

Output:

2. Internal CSS

Internal styles are written in the <head> tag of the HTML page as follows

For Example:

This is now called a class and can be referred by any other tag in the HTML to inherit the properties. Example as below

The above code will also result in displaying the text in red as in the Inline example above.

3. External CSS

External styles can be written by writing the code in a separate CSS file and then linking it in the HTML page.

For example:

The class “redtext” can be written in a separate file like say styles.css and then can be called in the HTML file with the following line in the <head> tag

The above line of code will actually link the external css file to the HTML page and all the classes defining the styles can be accessed using the “class” attribute for the HTML tags in the page.

Example:

Lets say we have the following styles in the CSS stylesheet styles.css:

This stylesheet can now be linked into a HTML page by writing the following code in the <head> as follows [If you are using softwares like Adobe Dreamweaver, there are easier ways to link the stylesheet]:

Now, you can apply the available 3 classes in the stylesheet to 3 different tags in the HTML as follows:

The output of the above code will be:

There are also priorities for each CSS level. What if there is a style written for a paragraph tag in all three levels? Whcih level of CSS is accepted.

Inline CSS has top priority. Next comes Internal CSS and then at last is External CSS. So, if a paragraph tag has all three, it will accept Inline CSS first. If there is no Inline CSS, then it looks for Internal and then finally External CSS.

Related posts:

1. CSS Selectors, Properties and Values for beginners This article descibes all about CSS Selectors, Properties and Values....
2. CSS for Beginners Ever wondered what is behind a beautifully designed website? The...
3. ActionScripting in Flex It is important to know that Flex is not here...

Related posts brought to you by Yet Another Related Posts Plugin.