Run on Code 'The New'

Running and Coding in Action. All things .NET

Intro to CSS3

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics(the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

What is CSS3?

This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.

CSS3 contains the following features:

  • Borders
    • border-color
    • border-image
    • border-radius
    • box-shadow
  • Backgrounds
    • background-origin and background-clip
    • background-size
    • multiple backgrounds
  • Color
    • HSL colors
    • HSLA colors
    • opacity
    • RGBA colors
  • Text effects
    • text-shadow
    • text-overflow
    • word-wrap
  • User-interface
    • box-sizing
    • resize
    • outline
    • nav-top, nav-right, nav-bottom, nav-left
  • Selectors
    • attribute selectors
  • Basic box model
    • overflow-x, overflow-y
  • Generated Content
    • content
    • text-overflow
    • word-wrap
  • Other modules
    • CSS3 Transitions
    • media queries
    • multi-column layout
    • Web fonts
    • speech

Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web.. Figure 1 demonstrates how to create rounded corners:

<div class="code">  
.box{ border: 3px solid yellow; border-radius : 30px; width: 90px; padding: 5px; text-align:center;  }
Figure 1: CSS3 rounded corner with border-radius property

CSS 3 Tips

CSS 3 Resources

About me
All Rights Reserved © 2013 - 2014 Nils-Holger Nägele