Getting Acquainted with HTML5 and CSS3

Getting Acquainted with HTML5 and CSS3

CSS3 and HTML5 have been highly anticipated by web developers and designers for several years.   Although both languages are currently considered “works in progress,” some of their key features have recently been made available for demonstrational use on the most popular browsers.  For anybody familiar with traditional CSS and HTML, the new techniques should be fairly easy to implement.

CSS3 Improvements

CSS3 LogoCSS3 is simply an evolution of the well-known styles and cascade of traditional CSS.  It introduces several new features, including new properties, selectors, and pseudo-classes.  This facilitates setting up layouts quickly and efficiently.  Most of the basic rules concern typography, background colors, etc.

  • The @font-face feature will let you easily add custom fonts.  You can do this by uploading the font file to your server, linking to a CSS file, or creating a font family.
  • Use the Multiple Columns feature to divide your text into columns.  You have the option to choose the number of columns, column width, column spacing, and column separators.
  • The Multiple Backgrounds feature allows you to place multiple backgrounds on any element.
  • With the Border Image feature, you can replace any element’s border with a specified image.
  • The Box-Shadow feature provides for easy creation of inner and outer drop shadows on any element.  You can specify values for color, offset, and blur.

HTML5 Improvements

HTML5 LogoHTML5 is the next generation of HTML.  It has been designed to facilitate the search engines’ navigation and categorization of a website.  The main attraction of HTML5 is its simplified, built-in video element.  It also introduces offline storage capability for offline use of web applications and new design tools that allow easier creation of websites.  HTML5 generally looks like old-fashioned HTML.  However, there are a few key changes to be aware of.

  • Including a doctype in HTML5 is not necessary, but some older browsers may need to have it included. Only one doctype is needed: <!DOCTYPE HTML>.  This simply notifies the browser of the existence of an HTML document.
  • The Canvas tag allows developers to create two-dimensional images and graphics directly within the element.  This eliminates the need to use separate software for image creation.
  • The Content Editable tag is a new element that will let your users edit any text that you place within the tag.  This tag can be written as (ul contenteditable=true).
  • The Application Cache element supports caching of web pages and apps for use offline.
  • HTML5, once it is fully supported, will allow you to embed and playback audio and video without the use of any plugin.  This will be extremely useful in relation to mobile devices, which are currently unable to access Flash or similar media content.

HTML5 and CSS3 can be used in conjunction with technologies such as JavaScript to improve the speed, format, and style of any web page.  Due to their advanced features and improved elements, these two languages are poised to transform the way we create and use the Internet.

1. Tattoos By Neal

Tattoos By Neal

2. Woody Wide Web

Woody Wide Web

3. Delostrelecke Tvrze Adam

Delostrelecke Tvrze Adam

4. One-Nyne Design

One-Nyne Design

5. Lab (1.0) – HTML5 Theme

Lab 1.0 HTML5 Theme

6. CatCubed

CatCubed

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *