You can use simple cascading style to make your hyperlinks come alive. The following four examples use cascading style sheets (CSS) to create custom hyperlinks. Try out any one of them by modify the code in your web site and see the power of CSS.
Enjoy!!!
Example One: Create hyperlinks in which the underline formatting is displayed in a different color
Create a file call linktest.html and save the following code using any text editor and test it out on any browser
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }
a:link { border-bottom-color: blue } a:visited { border-bottom-color: purple }
a:hover { border-bottom-color: green } a:active { border-bottom-color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
Example two: Create hyperlinks that use hover buttons
This example creates hyperlinks that use hover buttons that have a solid background.
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { text-decoration: none; padding: 3px }
a:link { color: white; background-color: blue }
a:visited { color: white; background-color: purple }
a:hover { color: white; background-color: green }
a:active { color: white; background-color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
Example 3: Create hyperlinks that use outline hover buttons
This example creates hyperlinks that use outline hover buttons. When you rest on these hyperlinks, a colored box appears around the hyperlink text. This creates an outline effect.
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px }
a:link { border-color: blue } a:visited { border-color: purple }
a:hover { border-color: green } a:active { border-color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
Example 4: Create hyperlinks that use different text formatting
This example formats hyperlinks to use non-underlined, italic, lowercase text. When you rest on these hyperlinks, the text becomes uppercase.
<head>
<style>
body { color: black; background-color: white; font-family: arial }
a { text-decoration: none; font-style: italic; text-transform: lowercase }
a:link { color: blue; font-weight: bold } a:visited { color: purple }
a:hover { color: green; text-transform: uppercase }
a:active { color: red }
</style>
</head>
<body>
<p>Please see <a href=”http://www.kwunho.com”>http://www.kwunho.com</a> for more css tutorial info.</p>
</body>
Word Camp in San Francisco has been a wonderful experience for me. This year, there are over seven hundred people attending. This event has been one of the best that i have attended in recent past. They were given out free T-Shirts, all the food and drinks are free. I notice that there are many well educated developers willing to share their different ideas and are willing to help to make everyone to become successful in blogging and designing their WordPress site. I have learn a lot in this one day conference. I can’t wait to attend the next one. Here are some of the pictures i took at the event. Enjoy!!!
This is me just get to the event in the mornings.
Look at all the people waiting for the conference to start.
This event is well organize and planned.
The event start of with a keynote from matt
One of the many speakers at the event
Look at all the Free Food and Drinks… Yum.. Yum..
Every speaker is well educated and their presentation is well organized.
Overall i give the organizers of this year’s WordCamp an A+ for their exceptional job in organizing this event for all the WordPress Developer and Blogger. I had a great time this weekend and I would highly recommend all of you to attend a future WordCamp if you have not done so already.
Google Kwun Ho
People asked me all the time as to how can they get their site to show up on the first page of Google.com? The answer is you got to do what search engine like, which is a science of it’s own. But a good clean website fill with useful contents and keywords that focus on site’s contents often find they way to the top of the search engine. Using good clean code can often enable search engine to index your site correctly and therefore it will rank high on your contents.
To create good search engine friendly website, you need to work with a developer that have a good understanding of HTML and CSS (Cascading Style Sheets). Using CSS is the best styling tool for the search engine because it define most of the design elements and graphics in a CSS file which is stored away from the actual HTML page. Therefore you can simplify your actual HTML page with relevant content to make the search engine’s job easier to index your contents. A site with useful and relevant contents is good way that will rank high on the various search engines.
Once you have your site set up with search engine friendliness in mind, you can follow the following techniques that will for sure boost your site’s search engine ranking.
SEO101 Technique One: Do not use Flash or JavaScript
Web designers like to use Flash the spice up their websites, and it makes their portfolio look flashy. But Flash does absolutely nothing for your search engine ranking. It will sometime hurts you instead. Most search engines cannot read Flash. Even through some may tell you that they can interpret them, but as of this writing, the technology just isn’t here yet. So, if your site is done in flash it is likely that you don’t score high on the major search engine. Using JavaScript is also bad for SEO because a lot of browsers still cannot interpret JavaScript correctly.
SEO101 Technique Two: Use HTML Header (h1, h2, and etc) tags
Using correct Header tags on headlines and subheading is a must for readability and good SEO practices. Use Header and “H” tags for all your headlines and subheading will give more attention and let the search engines know what is important on your site. The Heading and subheading should include the keywords and phrases that you want the search engine to rank high and target on.
SEO101 Technique three: Use of good Meta tags
You really only need to focus on the title, description and keywords tags of your site when creating meta tags. The title will tell the search engine the topic of your page and the description tell them what the content is and take good care in using your keywords and phrases in the tags that you want the search engine to rank high on. If you are targeting a certain keywords, make sure they are in all of the Meta tags.
SEO101 Technique four: Do not over use your Keywords in the Contents
The modern search engine is smart enough to know if you try to over use a keyword on your content. Search engine often calculate your keyword density on your page to determine the relevant or irrelevant of the keywords. A good ratio is between three to seven percent of your content is fill with your keywords. Remember not to over use your keyword, otherwise it will hurt your search ranking.
To conclude, you need to take good care of using good clean coding when setting up your site to make your site search engine ready. This will be an important big first step in gaining SEO success. By following the technique noted above. Your site will rank high on the major search engine in no time.
In the Book Joomla! 1.5: A User’s Guide: Building a Successful Joomla! Powered Website, 2nd Edition, It walks through the steps of creating a template. Specifically, you can create a template that uses Cascading Style Sheets (CSS) to produce a layout—without using tables.
Read More on
Creating Pure CSS Template Here…
CSS or Cascading Style Sheets has evolved over time with version CSS1, CSS2, and the most recently CSS2.1. Most of the newer major browser such as Internet Explorer 8, Firefox 3 and Safari provide support for the new feature in CSS 2.1. However, some of the most widely used browsers such as Firefox 2.0, Internet Explorer 6 and 7 do not support all the new features that CSS2.1 utilize.
Even though commonly used browsers such as Firefox 2.0 and Internet Explorer 6/7 do not render some of the new features correctly, they do render most common CSS features faithfully. So as long as the stylesheet use predominantly CSS1 and commonly used CSS2/CSS2.1 features, the Web pages should render consistently across different platform
To ensure that our style sheet is cross-browser compatible, designers should have a good understanding of the new CSS 2.1 Specification and to utilize css vaildation tools such as W3C CSS Validation Service to help them ensuring their style sheet is vaild.
Designer needs to ensure that not only are they are writing vaild CSS code, but the new features are test across different platform to ensure that older browser can render the new feature correctly and make any necessary adjustment to ensure compatibility.
Writing clean code is not hard as long as the designer have a clear understanding of what they need to be accomplish to ensure cross-browser compatibility in all CSS that they create and to utilize vaildation tools in all CSS work.
Tags: css 2.1, CSS Vaildation tools
Backlinks are incoming links to a domain or several web pages at a domain. People count the total number of backlinks as a one of the key indicators of the importance of the link popularity which a web page receives. Link popularity of course is only one indicator of the importance for search engines. Other indicators are Page Rank (Google TM) or the relevance of the anchor text compared to the other text on a web page which links to another web page. Basically, a backlink is every link which a domain receives from another domain. Other wordings for Backlinks are also incoming links or inbound links or in links and also inward links.
The basic concept behind link building is that if your site has several backlinks from other web sites, search engines consider your web site to be important. However, it is not just quantity, but also quality matters. Choosing quality inbound links is very important to get a high page rank. High page rank means high search engine results for your website.
Furthermore, well placed links are an excellent source of consistent and targeted traffic. Top search engines like Google and Yahoo use link popularity to evaluate a website for their ranking. And if your site is included in top results, the probability of generating traffic to your website will increase.
Relevant content is an important part of quality. Your site receives quality links if your site contains potentially relevant content. Hence, you will have to make sure that your contents are of good quality, fresh, up to date, relevant, and informative.
If you are waiting to get link popularity, you can initiate the move to link your site to other sites. However, while undertaking this link building activity, you must make sure that the contents of the site to which you are linking your site possess good quality. To offer a potential link building material to other sites, you must also check your site’s keywords. You should make sure that the keywords are properly sprinkled on your site. They must also be related and up to date.
Last but not the least, when it comes to link popularity, you must have a system which can continually monitor the functionality of the links established by you. There’s nothing more frustrating to a user than to click on a link that doesn’t work. This permanently damages a company’s reputation in the eyes of its prospective customers.
If all these instructions are properly followed while undertaking any link building activity, you can expect a high page rank and search engine rankings for your WordPress website.
Tags: backlinking, backlinks, Seo
Margin ,padding and borders are the three most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element. Border can be useful to add spice to an element and can be change to meet different design needs.
Change the CSS code for h2 to the following:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom,margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.
The Box Model
Margins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually
represented like this:
Margin box
Border box
Padding box
Element box
You don’t have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that’s a powerful thing!
Borders
Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.
border-width sets the width of the border, which is usually in pixels. There are also properties for bordertop-width, border-right-width, border-bottom-width and border-left-width.
Finally, border-color sets the color. Add the following code to the CSS file:
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).
Tags: CSS Border, CSS Margin, CSS Padding
Often when i need graphics, my first step is to go to the Microsoft’s Office Online Clip Art page. Now, I know, you’re probably thinking, He must be high on something to recommend us to use such a novice tools to design site.
Hear me out. I’ve poked around quite a bit on the Web for clip art. I often get frustrated and a little annoyed at how many clip art sites are badly organized, really badly designed (with blinky letters,a thousand pop up ads, and links that go nowhere), and also disguised to the fact that they want to charge you for art. Microsoft’s clip art page is pretty straightforward, always seasonally appropriate, free and, best of all, makes searching for what you need quick and easy.
I should also mention that it doesn’t only offer clip art created by Microsoft. It offers resources from Animation Factory, iStockphoto, Presentation Pro, and several other suppliers who offer high quality (and dependably virus- and spyware-free) resources. I would highly recommend all of you to check it out.
Tags: clipart, designs, graphics, site development
You can alter the size and shape of the text on a web page with a range of properties, outlined below:
font-family
This is the font itself, such as Times New Roman, Arial, or Verdana.
The font you specify must be on the user’s computer, so there is little point in using obscure fonts. There are a select few ’safe’ fonts (the most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specify, the browser will go through the list until it finds one it does have. This is useful because different computers sometimes have different fonts installed. So font-family: arial, helvetica, for example, is used so that similar fonts are used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used).
Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family:
“Times New Roman”.
font-size
The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings (h1, h2 etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people).
font-weight
This states whether the text is bold or not. In practice this usually only works as font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but seeing as many browsers shake their heads and say “I don’t think so”, it’s safer to stick with bold and normal.
font-style
This states whether the text is italic or not. It can be font-style: italic or font-style: normal.
text-decoration
This states whether the text is underlined or not. This can be:
text-decoration: overline, which places a line above the text.
text-decoration: line-through, strike-through, which puts a line through the text.
text-decoration: underline should only be used for links because users generally expect underlined text to be links.
This property is usually used to decorate links, such as specifying no underline with text-decoration: none.
text-transform
This will change the case of the text.
text-transform: capitalize turns the first letter of every word into uppercase.
text-transform: uppercase turns everything into uppercase.
text-transform: lowercase turns everything into lowercase.
text-transform: none I’ll leave for you to work out.
body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
Text spacing
The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length or normal.
The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so ‘2′ will be two times the font size, for example), a length, a percentage or normal.
The text-align property will align the text inside an element to left, right, center or justify.
The text-indent property will indent the first line of a paragraph, for example, to a given length or percentage.
This is a style traditionally used in print, but rarely in digital media such as the web.
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
In next article, we will be working with CSS Margins and Padding of individual elements.
Tags: Css Fonts, CSS Text element
There are 16,777,216 millions of colors available for us to choose from when we working with CSS. CSS work with RGB (red/green/blue) standard and accept color values in hex code.
The three standard values in the RBG are from 0 to 255, 0 being the lowest level, 255 being the highest level (for example full red). These values can also be a percentage.
Hexadecimal is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.
The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.).
The three-digit version is often easier to understand (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color.
For example:
red
Is the same as rgb(255,0,0)
Which is the same as rgb(100%,0%,0%)
Which is the same as #ff0000
Which is the same as #f00
CSS Color Definiation
CSS has defined seventeen valid predefined color names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white,yellow and transparent which is also a valid value.
Colors can be applied by using color and background-color
A blue background and yellow text could look like this:
h1 {
color: yellow;
background-color: blue;
}
These colors might be a little too harsh, so you could change the code of your CSS file for slightly different
shades:
body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1 element) have changed to yellow and blue.
You can apply the color and background-color properties to most HTML elements, including body, which will change the colors of the page and everything in it. I hope this article has given you a the basic of CSS coloring format and on my next article we will go into more detail by looking at how CSS format Text element.
Stay tune…
Tags: CSS Color Element