Getting Started With HTML5 & CSS3

Getting Started With HTML5 & CSS3

Using HTML5 and CSS3 can help you make a spectacular website, but, unfortunately most designers don’t use them because they aren’t supported by all browsers. Most Internet users are still using Internet Explorer, so the code will not display properly for most people. Since over half a website’s traffic is with a browser that does not support these two languages, most designers do not use them for popular websites.

Both HTML5 and CSS3 are still in progress, but it is a good idea to familiarize yourself with them now so you can use them when they are the new standard in web design. Both languages will help you get a clean look for your website using simpler code.

HTML5

HTML 5

HTML stands for Hypertext Markup Language, and HTML5 is the latest version. Currently, it is only supported by a few browsers, but is expected to increase in popularity and usage in the next year. The entire language is expected to be fully written sometime in 2014, but some features are available now.

Since Flash is infamous for crashing and bugs, Apple does not allow it on iOS mobile phones and devices. As Apple increases in popularity, this creates a problem for developers who want the features of Flash, but also want their apps and websites viewable on an iOS device. HTML5 offers many of the same features of Flash, but runs with less bugs and more stability.

Google will be releasing a HTML5 version of YouTube soon, so this reaffirms how important this update will be in the future of the Internet. Mozilla’s Firefox, however, is resisting HTML5 and IE does not support it, so developers are hesitant to jump on the bandwagon. To further complicate things, different browsers may support different features of HTML5, and not all browsers will support all features. Designers must find out what features will be supported by different browsers when creating a website.

HTML5 lets you create smaller parts that combine and work together to make up the entire page. It allows the designer to create advanced pages with new features that aren’t always possible to create with older versions of HTML. HTML5 is built on HTML4, so designers can build upon existing code to improve the website. This eliminates the need to code the website from scratch, and new features can be added easily.

HTML5 Features

  • Cache allows the user to navigate web apps while offline.
  • Canvas element lets you place 2D images directly within the code.
  • Editing is easier. Change text quickly by adding contenteditable=“true” to an element.
  • Video and audio support is greatly improved, and you will be able to add both without using a plugin.
  • It does require a doctype so a browser can display the page in a standard mode, but the doctype has been simplified. Now it is <!DOCTYPE html>.

Why Use HTML5?

  • Uses WebSockets, so it loads faster than older versions of HTML.
  • Smartphone apps from all phone brands and models will be able to read one language.
  • Greater flexibility.
  • Video, images and audio are embedded within the code, so users do not need an outside plugin.
  • The language is getting more popular, so websites that do not use it will soon be outdated.
  • Is is based on HTML4, so you can added new elements within the code.
  • HTML5 coupled with CSS3 gives you many features and benefits not possible previously.

CSS3

CSS, which stands for Cascading Style Sheets, gives designers flexibility in presenting a website. It allows you to create better looking websites with unique features. Like HTML5, CSS3 isn’t supported by all browsers yet, but it is gaining popularity. CSS3 lets you add effects to the page without using Javascript or other plugins.

One disadvantage to using CSS is that you need to use filters to alter how things appear on the screen for different browsers. Internet Explorer is most known for being buggy and displaying CSS improperly, but Chrome and Firefox can also have bugs. Designers get around this by creating different codes for different browsers or utilize filters to block CSS completely.

CSS3 Features

Rounded Corners

Sample of CSS3
Demo: http://psdslicer.com/

Before, you had to use JavaScript to mask the corner of an image or create a separate image for just the corner. Now, you can round corners with the following code:

div {
border: 5px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 500px;
}

RGBA Colors

Sample of CSS3
Demo: http://vivid-ness.co.uk/

You had to use a PHP script within the CSS code to trick the browser into displaying colors in RGBA. This added unnecessary code in the PHP file. Or, you had to memorize color codes for each color, but now you can specify the amount of each color and their opacity within the code.

Here is the code for CSS3:

background: rgba(150, 25, 150, 0.5);

Text Shadow

Sample of CSS3
Demo: http://www.foundationsix.com/

A text shadow adds a drop shadow below text to make it stand out or give it visual interest. Previously, the designer had to create two elements with the same text and give one a different color. The darker color was then offset by a couple of pixels and placed behind the other text. With CSS3, use the following code for text shadow:

h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Opacity Level

Sample of CSS3
Demo: http://www.teehanlax.com/

In previous version of CSS, you had to create PNG files with transparency or use filters for Internet Explorer. Now, you can use the following code:

opacity: 0.5;

Box Shadow

Sample of CSS3
Demo: http://glo.id.au/

Box shadows let content slide under another area, such as the page’s footer. It makes it look like the content is sinking into the bottom of the website. With CSS3, you don’t have to create an image for this effect. You can also make the shadow appear by hovering over the area.

Before CSS3, you had to use a JavaScript plugin for a box shadow or create an image of the shadow. Now, you can use the following code with CSS3 for a box shadow:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

Add Fonts

Previously, websites could only display a font found on the visitor’s computer. Now you can upload a font file to your server and use CSS to call upon that file to display on the page.

Border Images

Now you can use any image as a border rather than using a boring line or dots as a border.

Transform

Lets you code how big you want an area to be when the user hovers over it.

Resizing Elements

Now working in Chrome, Firefox and Safari, this gives users a tool to resize elements. Use the following code:

div {
resize: both;
}

Multiple Backgrounds

Sample of CSS3
Demo: http://www.hangingupthemoon.com/

Lets you overlay more than one background on a single page with the following code:

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

Final Thoughts

Although not all browsers currently support HTML5 and CSS3, they will in the future. More and more web users and switching from Internet Explorer to Mozilla Firefox or Google Chrome, so designers need to create web pages that work on these browsers and with the features they support.

Both of these languages used together let you reduce or eliminate the need for third-part plugins, which makes it easier for visitors to use your website. Now you can embed pictures, audio and video directly within the website so pages load faster for users.

The two languages provide you with features that were not available before without having to use multiple programs. Now you can code your page quicker and easier with just two languages rather than using outside plugins that require learning yet another programming or web design language. Pages will not display faster and users do not have to waste time downloading the latest versions of plugins.

Both languages have the flexibility of being used for different browsers. Turn off portions of the code for browsers that do not support that code, and use feature rich code for browsers that do support it. HTML5 and CSS3 will soon be supported by smart phones and mobile devices, so designers can use the same page for both mobile and standard versions.