Technology Review

Tech Review. All things .NET

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;  }
</div>                    
                    
Figure 1: CSS3 rounded corner with border-radius property

CSS 3 Tips

  • Border Radius

    • rounded corners without images
    • #some_id {
      height: 100px;
      width: 100px;
      border:  2px solid #FFF;
      /* For Mozilla: */
      -moz-border-radius: 25px;
      /* For WebKit: */
      -webkit-border-radius: 25px;
      } 
                                  
  • Border Images

    • apply image to border, let imagination float free
    • #some_id {
      /* url, top image, right image, bottom image, left image */
      border-image:  url(borderImage.png) 40 40 40 40 round round;
      }
               
  • Box Shadow

    • shadow to any element of the web site
    • #some_id {
      background: #FFF;
      border: 2px solid #000;
      /* For Mozilla: */
      -moz-box-shadow: 10px #999;
      /* For WebKit: */
      -webkit-box-shadow: 10px #999;
      }
      
                                  
  • Multi-Column Layout

  • select number of columns, the column width, column gap width, and column separator
    • #some_id {
      text-size: 10px;
      /* For Mozilla: */
      -moz-column-gap: 1em;
      -moz-column-rule: 2px solid #000;
      -moz-column-count: 4;
      /* For WebKit: */
      -webkit-column-gap: 1em;
      -webkitcolumn-rule: 2px solid #000;
      -webkit-column-count: 4;
      }
                                      
  • Multiple Backgrounds

    • multiple backgrounds on a single element
    • #some_id {
      	background:
      		url(upbg.jpg) top left no-repeat,
      		url(midbg.jpg)center left no-repeat,
      		url(downbg.jpg) bottom left no-repeat;
      }
      
                                  
  • @font-face

    • use any licensed TrueType ".tff" or OpenType ".otf" in website
    • @font-face {
      	font-family: "my-font";
      	src: url(my-font.tff) format("truetype");
      } #some_id {
      	font-family: "my-font", sans-serif;
      } 
                                          
  • Attribute Selectors

    • Select elements with title prefix of "a":
    • p[title^=a] {
      /* Attributes to provide. */
      }
                                
    • Select elements with title suffix of "a":
    • p[title$=a] {
      /* Attributes to provide. */
      }
                                
    • Select elements with title contain at least one instance of "a":
    • p[title*=a] {
      /* Attributes to provide. */
      }
                                
  • Opacity

      #some_id {
      background: #F00;
      opacity:  0.3;
      }
                                  
  • RGBA Colors

    • The "a" in RGBA stands for alpha, equal to opacity.
    • #some_id {
      background: rgba(255, 212, 45, 0.5);
      }
                                  

CSS 3 Resources

About me
Published
Copyright © 2013 - 2014 Nils-Holger Nägele