7 new techniques every web developer should know

CSS3 media queries With the rise of mobile devices, and on the other hand, of very wide displays, creating a website that looks great in both big and small devices is definitely a challenge for web designers and developers. Happily, the CSS3 specification have a new feature which allow web developers to define styles for a specific display size only. For example, the code below show how to apply a specific style only if the client display is smaller than 767px. More info: Create an adaptable website layout with CSS3 media queries Font resizing with REMs CSS3 introduces a few new units, including the rem unit, which stands for “root em”. The em unit is relative to the font-size of the parent, which causes the compounding issue. More info: Font resizing with REMs Cache pages for offline usage HTML5 introduces a great feature, offline caching. Caching pages is pretty easy. AddType text/cache-manifest .manifest CACHE MANIFEST CACHE index.html style.css image.jpg Server-side JavaScript CSS animations

10 CSS3 Features You Will Love and Want to Use Even though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques introduced. CSS3 has taken a very large step forward in helping web developers get away from importing mass amounts of images/JavaScript and making it possible to do this only by using pure CSS. I am going to go over 10 CSS3 features you will love to start using! Border Radius The ability to have rounded corners without images and JavaScript is one of the most sought after features of CSS3. Border Images This is one of my favorite upcoming features, having border images will allow developers and designers to take there site to the next level. Box Shadow Before CSS3, we had to either use a shadow image or JavaScript to apply a shadow or create the shadow directly in the image. Multi-Column Layout Another CSS3 feature that developers, including myself are very eager to start using is the Multi-Column Layout. Multiple Backgrounds @font-face Attribute Selectors Opacity RGBA Colors

Get Started With CSS 3 If you follow CSS, you’re probably sick of hearing promises of CSS 3 — the next generation style sheet language that should have been here several years ago. Well, the specification document still isn’t finalized. If you’re impatient, you’re not alone. Browser manufacturers have already started rolling out support for many of the new features even if they aren’t yet set in stone. Opera and Safari have been leading the way when it comes to CSS 3 features, but Firefox 3 packs in a few and 3.1 promises to bring Firefox alongside the others. Yeah, we know what you’re thinking: “I can’t do it. Well, you’re right. We’re willing to admit that most of these rules are still a year or two from being mainstream, but it doesn’t mean you can’t start learning them now. Want to bleed from the cutting edge of web design? Rounded Corners The number one rule of Web 2.0: If it has rounded corners, it’s modern. Say you have some HTML that looks like this: Add this style definition to round off the element:

Stunning CSS3: A Project-based Guide to the Latest in CSS | A book by Zoe Mickley Gillenwater Top 10 Sites for learning CSS Cascading Style Sheets (CSS) is a style sheet language, which enables web designers and web developers to change the way their websites look. The power of CSS lies in its capability to separate the content of a web site from its presentation, and it also allows webmasters to make changes to numerous web pages that use the same CSS file. CSS offers accessibility, flexibility, easy page formatting, and side-wide consistency, and is applicable to pages, written in HTML and XTML, as well as XML, SVG and XUL. What are the top ten sites for learning CSS? W3Schools this is one of the best-known tutorial websites, which has a CSS section. HTML dog Has CSS Beginner, Intermediate, and Advanced tutorials, all of them supported with examples and all of them very easy to follow. Csstutorial.net Entirely dedicated to CSS, this website offers tutorials, videos, tips and tricks, news, and even a podcast. CSS Basics CSS dog HTML Goodies Tizag Site Point CSS Easy CSS3.com