The benefits of using CSS

With CSS, or Cascading Style Sheets, there are many advantages over plain HTML. First there is the ability quickly align content or to move an object (whether text, images, or animation) to another place on the site. Second, is speed. CSS files are only downloaded once and all the tags that were used in the HTML are now called from the CSS file, making for faster loading times and more viewing pleasure. Third, the layout and position of items can be fixed across the entire site, something that was only previously available by using frames. This all comes together to help those who prefer to view only the real content of your website, not all the code that was woven into it, which is a great advantage for those with difficulty in vision. When all of this is combined together you have people going to your site and enjoying the experience more. Unfortunately CSS is not the total answer, although it is a very good start. Some software manufacturers are slow to adept to the changes and therefore do not comply to all of the standards for the modern web. I will not point fingers but those of you that know me can guess of whom I am speaking. I hope that I have opened your eyes more to the available options in web design.

Stylish and Accessible Forms using CSS

The majority of sites designed these days have at least one form. If you’re a web designer then you’ll know that creating a template is essential if you are to be efficient in your work.

Many times I’ve compromised on a form’s design due to time restrictions. Below is a template that I use and that is quite flexible in its design. This form allows for any type of input field from a simple text field to a group of radio buttons. If your quite comfortable with CSS then please feel free to adapt this code.

The fun you can have with this form can really change the way your forms look and make a great deal of difference to your overall web site design.

XHTML CODE

The link below shows a basic form structure. I’ve used ordered lists (ol) to segment the form and (li) tags for each row of the form just as I find this easily breaks up the code for use by novice CSS users.

XHTML Code and example

Additional Tags

If you look through the code you will see some tags which you may deem as unnecessary (i.e
tags after the radio button). These are to enable a cross browser compatible layout. Within the CSS code you will notice at the beginning that all the margins and padding are set to zero. Alternatively you could place the form in a div with zero margins and padding but it is entirely up to you.

CSS Code

CSS Code and example

Browser Compatibility

Currently this form has been tested and works in IE5.5, IE6.0 and IE7 and Firefox.

Advertisements
Author:
We hope, We will become the best, creative and inspiring community for web and graphics. Join Us! Can be part of the growing Team. Just write something Creative and Interesting. Click here to become a member.

Comments

No comments yet. Be the first to leave a comment !
Leave a Reply

Copyright © 2020 Freebies, Free Fonts, WordPress Themes, Logos & Tutorials. All Rights Reserved.
Powered by Wordpress.
About Us | Advertise | Write For Us | Contact Us
0 Shares
Tweet
Share
Share
Pin