Category: HTML And CSS

HTML and CSS tips and tricks

HTML (Hyper Text Markup Language) is the language behind the web pages of the Internet, created by Tim Berners-Lee, and uses a system of tags for applying layout, formatting and links to content. CSS (Cascading Style Sheets) are used to describe the presentation of the HTML. This section contains howtos, tips and tricks about how to use HTML and CSS.

HTML form honeypots and autofill/autocomplete

A honeypot field in an HTML form is a hidden input field designed to work out whether or not it is a spam bot submitting your contact form, comments form or similar. For some reason I’ve never actually covered this myself on this blog so will point you in the direction of a couple of other blogs which explain how these work, and then talk about an issue I discovered recently with autofill in Google Chrome. It may also be an issue with auto complete in other browsers.

Read More »

Download/embed fonts with @font-face

I wouldn’t normally bother with anything other than the default web fonts but the design for the new Personalised Plates website (still in development) calls for a stylized font which is similar to that used on the plates themselves for headings, lead-in paragraph text and so on. As a result I’ve been messing around with @font-face this week and present how to do this here, along with a bunch of useful references online.

Read More »

Change element’s properties with CSS based on body id or class

This post shows a similar technique to the one used in my CSS Sprites – making one of the buttons active with the body id post from the other day. In this post I show how to modify a particular element on a page depending on the body’s id or class. In this example it’s to change the masthead that appears at the top of the page.

Read More »

Remove webkit border on input on focus

When a text input has focus it is slightly highlighted in Firefox and Internet Explorer and much more so in the the webkit based browsers (Chrome, Safari, Konqueror). Normally this behavior should be left as-is but I personally recently needed to prevent the highlighting behavior, especially in the webkit based browsers.

Read More »

Cross browser transparency

The CSS3 standard introduces the opacity property for making elements opaque or transparent. Older browser also have support for opacity using various other properties and, in the case of Internet Explorer, filters. This post looks at how to achieve cross-browser, and backward compatible transparency.

Read More »