One of my friend in FB shared one website with me where you can create comparison tables with the ease of few clicks, i found it very useful thought may come handy for you guys.
Create beautiful HTML & CSS comparison tables with Compare Ninja.
http://www.compareninja.com/generator.php
Hope it helps!
CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence.
The easiest way to explain this is with some examples.
Let’s say we declared paragraph tags in the #example div to be colored blue, and then further down the style sheet (or in another style sheet also linked to in the page) that they be colored red:
The later rule overrides the earlier rule, and paragraphs within #example will be red.
If we assigned !importand to the first rule, then the second rule would be ignored because the first rule now has precedence:
The first rule now has precedence so the later rule is ignored and the paragraph will be blue.
If the !imporant declaration is used again in the later definition, then the normal cascading rules will apply, and the style assigned will be the latest !important one:
In the above example the paragraph will be red.
Ideally you shouldn’t use inline styles, but here’s a couple of examples when using them with !important.
!important in the CSS style sheet will override any inline styles as well:
In the above example, the paragraph will be in blue text and not green as in the inline style because of the !important declaration in the CSS.
However, if you add !important to the inline style then that will of course have precedence:
So in the above example the paragraph will be green.
Naturally this works in all currently used browsers with exceptions for Internet Explorer – but then would you expect any different?
Internet Explorer 6 will apply whatever the last style declared is, and takes no notice of !important declarations. So in Example #1 above, the other browsers would display the paragraph in blue but IE6 would display it in red.
The situation was fixed in IE7, but if it’s in quirks mode, or you don’t specify a doctype at all, then IE7 will revert to the same behaviour as IE6 and use the last declaration.
Internet Explorer 8, on the other hand, seems to always support !important declarations no matter what I did to try to make it act quirky.
Chromium OS is an open-source project that aims to build an operating system that provides a fast, simple, and more secure computing experience for people who spend most of their time on the web. Here you can review the project’s design docs, obtain the source code, and contribute. To know more click here.
The theme being used is stored in the wp_options table in the database. Simply run these MySQL scripts and your site will be set to using the default theme (it’s based on the theme folder name):
update wp_options set option_value = ‘default’ where option_name = ‘template’
update wp_options set option_value = ‘default’ where option_name =’stylesheet’
Hopefully that’ll save you some time ripping your hair out if you stumble on a theme that trashes your admin.
Good typography is just as important on a Web page as it is in any other medium. The fact that it appears on a computer screen and not on a piece of paper is immaterial; it should still be pleasing to look at and easy to read.
In every situation where type is used — in publishing, signage, packaging, television, etc. — designers have to adapt their techniques to suit the medium.
A headline style that works just fine in a magazine spread would not necessarily work on a poster. A magazine is always viewed straight-on at arms length, so letter spacing can be as tight as you like and the words will still be readable. A poster is, more often than not, viewed obliquely, which distorts the type to some extent. Here, a little extra letter spacing helps identification of the individual characters, and hence the words.
Designing for a computer screen has its own set of problems. Add to these the elastic nature of a Web page, which has to work across different computer platforms and screen sizes, and the problems get even worse. It is the designer’s job to understand these issues and to address them — to maintain some kind of control when everything else is shifting.
The SeveNet font family is no longer available from this site, but may be available from the Fountain Type Foundry in Sweden. As with MINI 7, it is a 7-point Macintosh screen font. It has no PostScript or TrueType printer font and no lowercase characters. The PC version is a regular TrueType font. You can use these fonts at multiples of 7 points (14, 21 etc) if you want a deliberately pixelated look. You should do this in Photoshop with anti-aliasing turned off.
If you are familiar with style sheets in your page layout or in word processing programs, you will understand how it is possible to create a set of type specifications and apply them to a block of text or a whole site. You can make all headlines 48-point Times bold, subheadings 32-point Helvetica bold, and the body text 10-point Times New Roman with whatever leading and indents you like. If you want to change the overall look of your layout to something more technical, you only need edit the style sheet. You could change the headings to Arial Black, the subheads to Arial Bold, and the body text to Arial quickly and easily.
Using Cascading Style Sheets (CSS) in fourth-generation browsers gives similar capabilities. Of course you will still be restricted, for the moment, by the availability of fonts on the user’s system. CSS can’t magically produce Frutiger Extra Bold, Bold, Roman, and Light fonts out of nowhere. Yes, there are a few font-embedding technologies available now, but they are not reliable enough for general use just yet.
The idea behind CSS is that content and type markup are kept separate, giving the designer control over type that hasn’t been provided for in basic HTML. Apart from the ability to make global changes to styles very easily, it is also possible to deliver the same content with different specifications according to the browser being used. Whether the user has a whiz-bang computer with a large 24-bit monitor or a small black-and-white organizer, it is technically feasible to invoke a different set of styles that give the optimal user experience in any browser. And, if the browser doesn’t have CSS capabilities, the layout will degrade gracefully to give, at least, a satisfactory display.
This particular block of text is, as far as HTML is concerned, one paragraph. The fact that it is visually broken up into numerous indented paragraphs using <br> tags and runs of means that it will degrade better on non-CSS capable browsers. Normally I would alternate s with regular spaces, but the CSS implementation in MsIE ignores the spaces and halves the indent.
The style named “normaltext” is providing the type size, specified in pixels, not points, because pixels are absolute across platforms and points are not. In normaltext, I have also specified the typeface and line-height. If all that CSS could do was to add a provision for line spacing, it would still be invaluable.
In the next section, “alttext” supplies the typeface specifications and color and provides the indents.
Just like HTML and all the other cross-platform and cross-browser issues, CSS implementation is not very consistent at the moment. It is supported by Netscape and Explorer 4 and above, and partly in Explorer 3.x, but the results are not always predictable.
You can do a lot more with CSS than I have mentioned in this primer. The basic facilities are now reasonably reliable across browsers, but some of the more esoteric features can cause problems. Even this relatively simple, justified section with paragraph indents behaves quite differently in Netscape and Explorer depending on whether I use <div> or <p>.
As with any other Web page design uncertainties, you really need to test-fly your pages on as many computers and browsers as you possibly can.
The examples here only scratch the surface of what CSS can do. In addition to creating custom styles, you can modify most of the existing HTML styles. You could, for instance, redefine the <pre> tag to be a larger type size or a different color, or adjust the <H2> tag to be a particular font, size, and style.
If you want to find out more, check out the CSS links in the Links section and in the advanced section under Cascading Style.
Finally, some readers won’t be able to see the results of your CSS. It’s important to make sure your pages still look good in older browsers too.
Aliasing is a term used to describe the undesirable effects produced when visual information is presented at a lower-than-optimal resolution. For example, do you remember in cowboy films when the stagecoach wheels seemed to spin backwards? That was because the resolution of 24 frames per second was insufficient to capture the true forward motion of the wheels, and the illusion of the spokes moving backwards was because, in subsequent frames, the next spoke was almost reaching the position of the spoke in the previous frame.
Anti-aliasing in computer graphics was popularized by Quantel in their Paintbox computer systems back in the early ’80s. Much of what we take for granted now in programs like Adobe Photoshop was pioneered in early videographic systems costing hundreds of thousands of dollars. With the relatively coarse resolution of computer screens, individual pixels (picture elements) are quite apparent. Lines of pixels that perfectly fit the grid on a computer screen because they are horizontal, vertical or at 45 degrees cause no problem. Lines drawn at any other angle have to be approximated because they conflict with the natural grid and look stepped. As this magnified view shows, the cyan line is at odds with the grid and changes from two to three runs of pixels.
If the runs form a regular pattern, i.e. always two or always three, then you get a “sweet” line which, although stepped, is evenly stepped and doesn’t look as objectionable as the arbitrarily stepped one above. The anti-aliased version below smooths out the stepping.
The enlarged views are at 1200% and the pixel grid simulated, there are no tiling lines like this in reality, just perfectly butting squares.
For type, any edge that does not fall on the natural grid produces steps. Some cleverly designed screen fonts keep to the natural grid and look fine, but type that is really intended to be printed on a high resolution printer can look bad — or at least severely compromised — on a computer display.
Pixels are a fixed size and can’t be chopped up like ceramic tiles or building bricks. If you want to smooth out these unsightly steps, you can only do so using tone and color. By introducing pixels of a color somewhere between the foreground and background colors, you can effectively smooth the edges of the lines. To smooth the edge of a simple black-on-white character on the screen, a program like Photoshop will create 16 to 20 intermediate tones of gray to fill in the steps and, from normal viewing distances, the type will look smooth. No matter what the type or background color — it might be a full-tone photograph for instance — pixels of an intermediate tone and color are used to give the illusion of smoothness.
This strategy assumes that the display can handle all these colors. But on, for instance, an 8-bit display with only 256 colors, all these subtleties of tone are going to get lost, and colors are going to snap to their nearest Web palette counterparts. The image below shows how the individual pixels have “posterized” in the 8-bit rendition by a browser, yet still give an acceptable result.
Now, this is all very well for large, bold type, but as the type gets smaller, the conflict with the natural pixel grid becomes increasingly more severe. The main horizontal and vertical strokes of a typeface should, ideally, align perfectly with the pixel grid. When they don’t, you can do one of two things. You can move the strokes so they do align with the grid — at the expense of the proportion of the characters. This is called “hinting,” and is often used in higher resolution devices like PostScript printers to improve image quality.
Or, you can try to simulate the true position of the strokes using the same tonal illusion used to smooth edges. To get the impression of a line that should strictly be between two pixels, you can put down lighter tones of the colour in adjacent rows of pixels. In the Gill Sans Light here, the strokes of the smaller sizes should be thinner than a pixel, which they obviously can’t be, so the characters blur into one another and become unreadable. The anti-aliasing on the 18 point Bold is a proportionally smaller part of the overall character shape and does what it is supposed to do — smooth the edges.
Three staggered lines of anti-aliased 12-point Helvetica show how the strokes either hit or miss the natural grid. The fact that each line is starting at a different horizontal position means the relationship between the grid and the stroke differs in each case. The first and third lines are almost but not exactly the same.
The zoomed-in version shows what happens when a stroke misses the natural grid. In the first line, the letter “l” is spread across two pixels, but in the second, it is perfectly formed. The initial capital H has one stroke that hits the grid perfectly, and one that doesn’t, so no placement of the capital H will ever be perfect at this point size.
Exactly the same thing happens to the horizontal strokes, but in this instance, I have been lucky. If I take the best characters from each line, and the best half of the capital H, and cut and paste them into a single composite, I get the best of both worlds. However, in doing so, I have to hint the characters and adjust their shapes and spacing by half a pixel.
This really is a labor of love!
There does come a point when it is just impossible to describe the shape of a letter in a given number of pixels using these techniques, but the quality of the type suffers drastically long before you even get there.
For small type sizes, it is better to use a well designed screen font. By that, I mean one that has been designed pixel by pixel in sympathy with the screen grid, and not one that is imposed upon the grid. For HTML text, you don’t have much choice in the matter — it will differ from one surfer’s machine to the next — but if you are incorporating type into buttons or graphics, you can choose. Type sizes of 14 pixels up can usually be anti-aliased quite successfully. Around 12 pixels high, it depends very much on the weight and design of the typeface. Below that, you really should look at using a properly designed screen font without anti-aliasing.
The PC and Mac type samples here are borderline cases where you have to choose between using the crisp but pixelated font or the smoother edged but blurred anti-aliased versions.
There are a number of different coding techniques used to produce anti-aliasing, and some are better than others. Try setting the same text in different programs, compare the results, and decide for yourself which is best.
Typographic design means different things to different people. Some like their type neatly arranged in grids, everything lined up with not a letter out of place. Others prefer a more free-form approach. But no matter what your stylistic preferences, being able to prioritize information successfully is one of typographic design’s most essential functions.
When a reader scans a printed or Web page, they are looking for information — fast! The designer can make it easier for people to find the information they need if it is presented in a logical manner. Any page of text starts out as a solid block of type. Without any other intervention, the reader will start at the top left and work down to the bottom right – so there is a natural flow there from the beginning.
The first necessity is to break that mass of words up into smaller, more easily digested chunks — paragraphs. Each paragraph will have one or more sentences and will be visually separated from the next using an indent or paragraph space.
Because indenting paragraphs on Web pages is a little more difficult, many people just use a blank line. The effect of this not only ruins the flow of reading but give a very disjointed look to the page. It is better to use paragraph indents for paragraphs, and paragraph spaces for sections — collections of related paragraphs.
Web page layout is closer to a word processor document than anything else — there just isn’t the typographic control that you would get in a publishing program. There aren’t even any tabs in regular HTML, so all kinds of tricks are necessary to get even the most basic typographical control. There may be a little control over type size, but very little over weight or other styles.
Web page typography needs a slightly different approach from that of conventional print. You have to work within the medium and its constraints.
Newspaper 
Book 
Browser 
Fields of view are related to viewing distance and type size. When reading any page at a normal reading distance, there is a certain field of view that the eye can cope with — enough to scan a line of text and be aware of that line’s relationship to its surroundings. If you have to move your head, you are changing the field of view completely and the brain has to try to relate the new field of view to the previous one.
With a newspaper page, there will be considerably more head movement required than with a paperback book. For Web pages, it depends very much on the browser size on the screen. Scroll bars allow the field of view to change, but one of the most common mistakes on Web pages is to allow the text to flow to the browser width. This is word-processor thinking, not design, and is much too wide for a comfortable horizontal field of view on even a small monitor.
Having to scroll a Web page vertically makes it more difficult to break the natural top to bottom flow than with a newspaper or magazine, because the physical act of scrolling takes considerably more effort than eye or head movement. There is little point in trying to fight the top-down approach for information on Web pages. This constraint suggests a couple of basic rules.
For any single Web page, the information should flow in a serial manner from the top to the bottom of the page. Where information is more random access, use hyperlinked headlines to pages or blocks of serial information. These headlines can be at the tops of longer pages or on completely separate menu pages.
There are various opinions of what maximum page lengths should be, but it’s generally agreed that the length of any single page should not be excessive. I believe it depends more on the page layout and file size than the number of words.
Bearing in mind the natural top-down flow of reading, certain elements of importance need to be given visual emphasis. The trick here is to introduce foils to the natural flow of reading by adding maverick elements. Anything that breaks with the norm will stand out. In typography, all elements are only relative to one another and, indeed, this is one of the underlying principles of HTML type markup.
The most basic form of prioritizing is to make certain type larger or bolder than the rest. This gives emphasis to that type, because it looks more important than its neighbors. If the type was all bolder or bigger, then that would put you back at square one.
In scanning a page, the emphasized elements stand out from the others, which means they take priority and will be read first. Conversely, if you want to de-emphasize some information, you can make it smaller or lighter than the normal. Lighter is not usually an option in Web design, as you can’t have strokes thinner than one pixel, so we are stuck with two weights of type — normal (Roman) and bold.
Italics are often used in printed matter to give emphasis to a word or two within a block of regular Roman text. Italic type is generally harder to read than Roman, because the reader has to slow down to read it. It gives emphasis firstly because it looks different from the upright stress of the Roman and also because the reader’s flow is impeded.
As the simple test above shows, the eye is drawn immediately to the line that contradicts the pattern. In fact, recognizing such deviations in regular patterns is one of the human brain’s major strengths.
Although italics work well on a printed page, they pixelate horribly on a computer screen. They clash with the natural square pixel grid and are best avoided on Web pages, especially at smaller sizes.
Underlining was a technique much used with typewriters in days gone by. Few typewriters had any mechanism other than underlining to give emphasis and, unfortunately, the habit carried over into word processing.
Underlining has a special meaning on a Web page. It indicates a hypertext link, so it is really not a good idea to use underlining for any other purpose, or it may confuse the reader.
Color is considered a luxury in print, certainly as far as text is concerned. On a Web page, it costs nothing extra and can be used to compensate for other typographic deficiencies. Again, it is the deviation from the norm that causes visual disruption and therefore emphasis.
Many pages on this site use colored type for emphasis. Instead of using bold or italic, the type color changes — the more it changes, the more emphasis it creates. So, there is a hierarchy of emphasis — yellow stands out more than green on a blue background, and green dominates over pale blue. In designing a more conventional black-and-white Web page, different shades of gray can be used to emulate the effect of type weight.
A line of type that is upside-down on a page is very noticeable, but also difficult to read. On a printed page, the reader would simply turn the page around, but that’s not quite so easy with a monitor.
Type that runs up or down the page vertically is impossible with HTML text, but can be easily implemented with a GIF, JPG, or PNG. Used sparingly, it can be effective in a horizontal world. Balanced with other typographic attributes, size, weight, and colour, a headline on its side like this can be prominent or recessive. Of course, this is true for any line of type, but the sideways orientation is acting as a visual foil, contradicting the natural flow and bring attention to itself. As it spans a certain number of lines and paragraphs of related body text, it also has the effect of further unifying them.
As with the maverick type style, a line of type that is in an unusual position will stand out. Breaking the regular geometry of a page with an indent or hanging indent will draw the attention to that element, even overriding the natural top down flow. A common exercise for students of typography is to take a piece of information, such as an exhibition flyer, and to do various layouts using only one prioritizing technique on each — weight, size, color, position, etc. Any element that looks as if it doesn’t belong for some reason will draw attention to itself.
Remember: Like all hard and fast rules, grids are meant to be broken!
A line of 8-point type in the middle of a blank page dominates the page completely. On a page full of 12-point type, it gets lost. Not only are the relative type sizes important, but the space that surrounds the type is significant too.
The effective counter play between solid and void areas is one of the finest skills used in modern architecture, abstract painting, and typography, and requires a substantial amount of training and experience. At its simplest level, isolating typographical elements in space is a sure way to give them emphasis.
Converting priority of information into typographic emphasis successfully is one of the most basic skills of typographic design. It works at both functional and aesthetic levels and can be achieved with a little common sense.
Creative typographers use a whole gamut of techniques to prioritize information and make a page more visually interesting. Even within the confines of HTML, a little imagination can prove fruitful and be visually rewarding.
Much has been written about the death of typography as we know it — that, with the boom of the Web, old typesetting traditions are abandoned in favor of a more democratic approach to an information-based medium. But I always wondered what those programmers of the early Web browsers had been smoking when they chose the standard fonts for displaying text on the web. Up until the time when the <font face> tag was introduced, a designer’s choice for specifying typefaces on the web was limited to Times for proportional and Courier for monospaced type.
This is a handy site where you can just upload the image of which you want to generate icon in just two clicks, which will be resized automatically no need to use any image editor (unless you want something custom)
Note: After uploading the favicon to the root you have to add the following HTML code to your web page, in between and tags:
For Static:
<link rel=”shortcut icon” href=”favicon.ico” >
For Animated:
<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” type=”image/gif” href=”animated_favicon1.gif” >
The tutorials below are a great ways to start learning jQuery.
– Learning jQuery is a great blog with tutorials/examples from basic to advanced skill level.
Guys this is fun and you will come to know how strong your eyes are 
, give it a try
Ishihara Color Blindness Test
All You Need Know About Color Deficiency
body:nth-of-type(1) p{
color: #333333;
}
Only the Google Chrome and Safari 3.1 browsers will show paragraphs as grey. The logic is:
:nth-of-type()Use it as a predecessor to more specific selectors targeting the body’s children.
Powered by WordPress
