Posts tagged with 'CSS'

Top 10 CSS3 commands

By Paul McCarthy on 12 August 2010

Tags:

Whilst recently updating our advanced CSS training course to include some CSS3 commentary, I became inspired by the amount of CSS3 that’s already out there. Browsers such as Firefox and Safari have really started embracing CSS3, which means that there’s a significant audience that you could be demonstrating your CSS3 skills to.

I have put together Top 10 CSS3 commands, some of which are fairly widely known and also some that personally I find interesting (Box-sizing - Old school box model).

Please let me know what you think and also any sites that you’ve seen using CSS3 as well.

Comments:

Leave a comment on Top 10 CSS3 commands

Useful extension for simple CSS forms

By Brigitte Simard on 19 January 2010

Tags:

Forms are common on a wide variety of websites and it’s important that they’re well designed and laid-out. There are many tools and extensions to help with this and one I came across recently is a free CSS form designer extension for Dreamweaver from DMXzone.DMXzone CSS form designer extension

It allows you to create forms visually, using a simple drag and drop interface and a variety of CSS styles. It’s very useful for creating short simple forms and allows you to populate fields with default values such as days of the week or with dynamic values from a Dreamweaver record set.

There are however, a few things that could be improved with this extension. Firstly, the HTML mark-up isn’t 100% accessible as labels aren’t properly assigned to checkboxes and radio buttons (they have been implemented following an out-of-date w3c recommendation). It would also be difficult to manage a form with a complex layout with this extension, as the HTML mark-up is not really flexible and when new field elements are added, they’re automatically added at the end of the form (not within context) and have to be dragged and dropped into position. Also, the CSS produced by this tool isn’t cross-browser compatible.

So in summary, this is a useful free tool for creating short, simple forms, but to really be suitable for longer, more complex forms, the extension requires a few modifications. You can try it yourself by downloading the CSS form designer extension for free from DMXzone.

Comments:

Leave a comment on Useful extension for simple CSS forms

The !important CSS declaration

By Brigitte Simard on 22 December 2009

Tags:

We’ve been a bit light on web development tips on the blog of late, but I had some thoughts on the !important CSS declaration that I thought I’d share.

The declaration’s been valid since CSS1 but it seems to have acquired a bad reputation over the years. But, it can be a useful and powerful command if used properly. The declaration is a keyword that can be added at the end of any CSS pair of property/value. For example:

p {margin-left: 5px !important}

It assigns a weight to each rule depending on the specificity of its selector and its position in the source. This determines which style is applied to an HTML element. When the !important declaration is used on a pair of property/value, that value becomes the most important for that property and overrides any others.

The !important declaration can be used for other things such as overriding inline styles and print stylesheets. It has its downsides but, if used carefully, it can save time and effort.

If this is of interest then look out for a much more in-depth article on this command, with examples, which will be published on our website in January 2010.

Comments:

Leave a comment on The !important CSS declaration

What’s your favourite Firebug feature?

By Paul McCarthy on 2 June 2009

Tags:

I think it’s probably fair to say that we (CSS developers) owe the people who created Firebug a big wet kiss. But there are still people muddling on without this wonderful Firefox toolbar.

The more time I’ve spent with Firebug, the more I’ve come to rely on it and the more I discover it can do. So it’s got me thinking, maybe there’s stuff it does that I just haven’t discovered yet.

So I’d like you to take a moment to tell me your firebug top tip, that really saves you time. It doesn’t matter how small or obvious. To get the ball rolling here are two features I love:

net-panelThe net panel - amongst other things it ensures you aren’t referencing any missing files plus checking things aren’t taking too long to load. Great for making sure you haven’t referenced any old files and that everything is neat and tidy.

box-modelThe lovely layout panel - more obvious but so useful. Just inspect an item and it’s margin, border, padding are shown as a box model diagram! Brilliant.

Let us know what your favourite Firebug feature is?

Comments:

3 comments on What’s your favourite Firebug feature?

CSS pseudo class tip

By Paul McCarthy on 12 May 2009

Tags:

Having contributed to a feature in last month’s Web Designer Magazine on great CSS secrets, we thought that the blog would be a great place to share the tip we came up with for clearing a float container without extra HTML mark up:

If a floated element is nested within a box that has a border or a background colour applied to it, the floated element will not force its container to stretch all the way down (mainly in standards compliant browsers).

To force the container box to enclose the floated div(s), it needs a ‘cleared’ element added after the last floated div. Rather than adding extra HTML mark up such as a clearing div or paragraph we can use CSS.

Using the pseudo-class :after it’s possible to add content at the end of an element with the following CSS commands:

#id:after {
content:".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}

Sometimes the container will also collapse in Internet Explorer. Unfortunately IE still doesn’t support the :after pseudo-class yet, so a simple declaration of height: 1% to the floated containing div will stop it from collapsing.

#id {
height:1%
}

Comments:

3 comments on CSS pseudo class tip

 

View top searches