In years gone by, the only way to create nice looking buttons was to use an image but these were difficult to maintain without image editing software. However, with CSS3 we can apply nice looking gradients and and rounded corners very easily for modern browsers that support them.
Category Archives: HTML
CSS3 Buttons
CSS Tabs
I’ve written a couple of examples of CSS Tabs in the past but both are a little outdated now so I thought it was a good time to revisit these and rewrite them using CSS3 that degrades gracefully and works in all browsers.
Using em’s for font sizing
Many web designers still use pixels for sizing their fonts within a web page, however this presents an accessibility problem on devices and browsers (namely Internet Explorer) which don’t allow pixels to be resized. The solution is to use ems or percentages to size the font so that they’re relative to the base font size set within the browser and it’s really not as difficult as a lot of people might think.
7 Common Mistakes When Using the HTML Heading Element
The heading element is an important part of any HTML document but is misused in a lot of websites. When used correctly it adds semantic meaning, helps with accessibility and can boost your search engine rankings however when used wrongly it can cause problems for your users and search engine rankings. This article explains how heading tags are often misused and how this can be put right.
Cufón Font Replacement
Cufón is a font replacement method similar to the sIFR method. But where sIFR was sometimes slow in replacing the font, required flash and was tricky to setup, Cufón looks set to do away with all those problems.
Creating FAQs Using a Definition List
With a lot of web developers finally becoming conscious of using the correct semantic elements for marking up their HTML document, I’m often asked how frequently asked question (FAQ) pages should be marked up. Within this tutorial, I’ll explain how I deal with FAQ pages and provide you with a couple of options that I’ve used in the past.
HTML Elements Quiz
How many HTML elements can you name in five minutes?
Block and Inline elements: Part two
In Block and Inline elements: Part one, I explained the difference between block and inline elements and how the default display for these elements is presented.
Within this part, I’ll explain how you can use CSS to alter the display of these elements to help with the presentation. Continue reading
Block and Inline elements: Part one
CSS is an important part of any web designer’s skills and therefore it’s extremely important that a designer understands how block elements and inline elements work together and how they can be styled using CSS. This article will explain the default display values of the most commonly used HTML elements whilst part two of this article will explain how CSS can be used to alter the display and visual appearance of these elements.
Debugging HTML and CSS
HTML and CSS is an art. Give the same design to different developers and the code they deliver will never be identical. This can cause a number of problems when developing a website and ultimately in tracking down problems. This article has been created, not to solve all HTML and CSS issues but to ultimately help designers and developers to track down those annoying little layout problems and to at least demonstrate how to isolate issues with their code. Continue reading