This tutorial explains how the :nth-child pseudo-selector can be used to style specific HTML elements depending on their position within your markup.
Category Archives: CSS
How to use the :nth-child selector
Beginners Guide to Responsive Design
The web used to be relatively easy to design for. In a lot of cases you could simply pick the most common screen resolution, whether that be 640, 760 or 1024 and design for a fixed width. If you wanted to go a step further then you could use percentages so your layout adapted its width however with the variety of device sizes increasing all the time this is no longer an option.
CSS Text shadow
Applying css text shadow is very simple to apply using CSS3. Within this article are some sample code snippets to easily apply a text shadow to text in a webpage.
CSS3 Buttons
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.
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.
CSS3 Box sizing
The box model is pretty straight forward in most scenarios so we know that when creating CSS for an element that width + border + margin + padding = the rendered width. However, when dealing with percentage widths things become a bit trickier but there is a solution.
CSS Font Stacks
Web designers are often constrained by the so called “Web Safe Fonts” when creating web pages and whilst 95% of machines worldwide now have these fonts, they were first packaged with Windows XP back in 2001. As 2011 is quickly approaching are we still limited to these 10 web safe fonts or should we adapt and use fonts within CSS that aren’t in this list of fonts?
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.
Using CSS3 Selectors in Internet Explorer
CSS3 is the next big thing to really help during the web development process but any web developer that has been following the progress of CSS3 will have become increasingly frustrated at the lack of support from Internet Explorer. However Keith Clark has put together a clever solution which means you can start using some of the selectors now and they’ll even work in Internet Explorer 5 and upwards.
Internet Explorer 9: CSS3 Support
Internet Explorer 8 hasn’t long been on the market but Microsoft are working hard to make Internet Explorer 9 their best browser yet.