HTML and CSS Reference
In-Depth Information
chapter 13
n n n
Styling Web Forms and
Views with CSS3
As an ASP.NET developer wishing to harness the power of HTML5, your primary area of interest is the
programmable features of HTML5. However, as a part of developing real-world professional web
applications, you also need to look into the styling aspects of those web applications. When it comes to
styling web forms and views, Cascading Style Sheets (CSS) is the de facto standard, and CSS3 adds many
enhancements that make styling even better. CSS3 isn't part of HTML5, but they're evolving together and
complement each other well.
CSS3 specifications group improvements over CSS 2.1 into what are known as
modules
. There are
around 50 modules in CSS3. The idea behind grouping the improvements and additions into modules is
that browser vendors can decide which modules to implement in their products. When a module is
implemented, developers also know which features they can use. Because CSS3 is still an evolving
specification, this modular approach makes it easy for browser vendors to support and refine CSS3
features in an incremental fashion.
There are many new additions to CSS3, including things such as rounded borders, web fonts,
shadows, transparency, and transforms. This chapter gives you a detailed overview of some important
CSS3 features that are frequently needed by developers because they're commonly used while styling web
pages. Using these features, you can beautify web forms and views in a better way. Specifically, you learn
the following:
• Working with CSS3 selectors
• Using custom fonts that are downloaded automatically at the client side
• Enhancing boxes using rounded corners, shadows, gradients, and transparency
• Using transitions and transforms
• Targeting different devices with media queries
The chapter concludes with information about using Modernizr to apply CSS3-specific features.
CSS3 Selectors
In Chapter 2, you learned about jQuery selectors that allow you to select elements for further manipulation
in your jQuery code. CSS selectors do exactly the same job, with the difference that they select elements for
