NOTE: If you are unfamiliar with Cascading Style Sheets, please check out my earlier article on the basics of CSS.

Cascading Style Sheets (CSS) have been around for years. They contain styling information to apply to a web page and they are a recommended way to separate content from layout. The Worldwide Web Consortium (W3C) released a new set of CSS recommendations – known as “CSS3” – at about the same time they released the HTML3 recommendations, so these two specification sets are often spoken of together. CSS3 adds a number of new and useful selectors, selector filters, and styles to provide more flexibility in styling web pages.

VALIDATION

CSS3 adds a number of filters to refine selector criteria. Some of these support valid and invalid input.

For example, if a web page contains an input textbox with the “required” attribute, that textbox is invalid until the user types something into it. We can specify a different style for valid versus invalid input, using the “:valid” and “:invalid” selection filters, as shown below

input:invalid {
    border:3px solid red;
 }
 input:valid {
    border:3px solid gray;
 }
…
<input type=“text” id=“FirstName” name=“FirstName” required> 

In the example above, the “FirstName” textbox displays with a red border until the user types text into it.

FONTS

Font types are controlled by the “font-family” style. This style accepts a list of preferred fonts for the selection.  In earlier CSS versions, a list was necessary because browsers were unable to display a font unless it was physically installed on the user’s machine. If you wanted to display text using an unusual font, you had to either convince each user to install this font locally, or convert the stylized font text to a picture.

With CSS3, you can use the “@font-face” declaration to define a server-side font; then, point the font-family style to that font. This gives far more flexibility and control when applying fonts to text.

The syntax is

@font-face {
 font-family: FriendlyFontName;
 src: url('fontname.woff') format('woff');
}
selector {
 font-family: FriendlyFontName;
} 

WOFF is a common file format that contains font information. An example (using the desyrel font, found at fontsquirrel.com), is listed below:

@font-face 
   {
    font-family: desyrel;
    src: url('desyrel-webfont.woff') format('woff');
   }
   .wreckless 
   {
    font-family: desyrel, Arial;
    font-size: 30pt;
   } 

The style above assumes that the desyrel-webfont.woff file is in the same folder as the web page being accessed. The results would look something like this:

TEXT SHADOWS

Text shadows were nearly impossible to achieve with earlier version of CSS. Again, developers had to resort to pictures of text. But with CSS3, the “text-shadow” style accomplishes this. This style accepts 4 arguments: for the horizontal offset (positive values to the right), vertical offset (positive values down), blur (higher numbers cause blurrier shadows), and color of the shadow. The following example causes a gray dropshadow below and to the right of the text in Div1:

   #Div1 
   {
    text-shadow: 30pt 25pt 15px gray;
   } 

Here is sample text with that style applied:

RESIZE

With the CSS3 “resize” style, you can declaratively allow users to resize an object by dragging its edges. The style takes the following parameters

resize: The direction to allow resizing (none, horizontal, vertical, or both)

overflow: Always “auto”

max-width: (optional) The maximum width to which a user may resize the object

max-height: (optional) The maximum height to which a user may resize the object

The following example allows users to resize Div1 horizontally to a maximum width of 600 pixels and vertically as much as they want.

#Div1{    
    resize: both;
    overflow: auto; 
    max-width: 600px; 
} 

ROUNDED CORNERS

A few years ago, everyone rushed to add rounded corners to their web layouts. The problem was that this was difficult to do with the CSS of the time. With CSS3, it is straightforward to round the corners of an object using the new “border-radius” style and its derivatives.

Border-radius style rounds all 4 corners of an object; while “border-top-left-radius”, “border-bottom-left-radius”, “border-top-right-radius”, and “border-bottom-right-radius” styles each rounds only a single corner of an object. Increase the parameter value to provide more curvature to the object corners.

The following example, rounds the two left corners of Div1.

#Div1 {
  border-top-left-radius:2em;
  border-bottom-left-radius:2em;
} 

The results are something like the object below

CONCLUSION

In this article, we covered a few of the new styles introduced in CSS3. In the next article, we will demonstrate a few more CSS3 features.