Sass: Syntactically Awesome Style Sheets   What is Sass? Sass is a CSS preprocessor—a layer between the stylesheets you author and the .cssfiles you serve to the browser. Sass (short for Syntactically Awesome Stylesheets) plugs the holes in CSS as a language, allowing you to write DRY code that’ll be faster, more efficient, and easier to […]

The font-family property hold several font names . CSS3 has adapted font combinations technology. In here,if the browser doesn’t support the first font then it tries the next font .   Below are some commonly used font combinations Serif Fonts Georgia, serif “Palatino Linotype”, “Book Antiqua”, Palatino, serif “Times New Roman”, Times, serif   Sans-Serif Fonts Arial, […]

Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. .gradientBg { /* fallback/image non-cover color */ background-color: #f00; /* fallback image */ background-image: url(images/fallbackgradient.png); /* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#f00)); /* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #f9f9f9, […]

Responsive Web Design To create the web pages look good in all devices like ( Desktop, Tablets and Mobiles / Phones ). It is about using CSS and HTML to hide, resize, enlarge, shrink or move the content to make it look good on any screen.   These days every new client wants a mobile […]

This example expresses that a certain style sheet (example.css) applies to devices of a certain media type (‘screen’) with certain feature (it must be a color screen). Here the same media query written in an @import-rule in CSS: @import url(color.css) screen and (color); ——————————– @media only screen and (max-device-width: 480px) { } To target small […]

CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate […]

It is possible to create multiple columns for laying out text With CSS3 – like in newspapers! with single html tags Below are multiple column properties: » column-count » column-gap » column-rule Browser Support Internet Explorer does not yet support the multiple columns properties. Firefox requires the prefix -moz-. Chrome and Safari require the prefix […]