CSS by nature is cascading and will apply or overwrite styles as it reads top down through any CSS rules you have declared. For example, if you declare something at the top of your CSS and then declare it again later, the last declaration will take precedence. In most cases this is fine, but you might want to force a CSS rule to be applied no matter where it is located in the CSS. That’s where !important comes into play. If you add !important after any of your CSS rules, it will become the highest priority.
Here are a few examples to illustrate it better. This first example has 2 normal CSS rules, the 2nd rule will take precedence and the div will have a blue background.
div {
background-color: yellow;
}
div {
background-color: blue;
}
However, if we apply the !important keyword to the first rule, the div will have a yellow background.
div {
background-color: yellow !important;
}
div {
background-color: blue;
}
Everyone’s favorite browser
Ah yes, what would a CSS tip be without stating the obvious that Internet Explorer sucks and won’t necessarily work as intended. IE6 will not respect the !important keyword and will just use the standard top down technique when applying the CSS. IE7 and above seem to work ok as long as you use a doctype (which you always do, right?!).
This post is the second in a series about getting started with MooTools.
Part 1 can be found here.
Part 2 of this series on getting started with MooTools provides some more comparisons between vanilla JavaScript and MooTools. The most striking example is the Ajax, just check out how much of a mess traditional JavaScript is!
Hopefully these examples are illustrating the benefits of using a JavaScript framework and the immense time and effort it can save you in addition to the excellent browser compatibility. Post a comment on what specific MooTools concepts you would like me to focus on for future posts.
Continue Reading
Last week’s post about Rounded corners using CSS3 is an intro for this post.
I worked on the CSS Sculptor extension for Dreamweaver at WebAssist and some of the presets we ship with have rounded corners. However, those designs use images to ensure Internet Explorer works as expected. Using images has several limitations. Each layout has multiple color schemes and each of those has a handful of images. If you want to customize the layout you need to slice new graphics and plug them in using the wizard. This is obviously not as flexible as we would like. If you want to resize the columns in your layout, again not super easy since the images need to be adjusted and resliced. Images are still the way to go to ensure fully compatibility with Internet Explorer, but for the modern browsers CSS3 makes it infinitely easier.
This is where CSS3 rounded corners come into play. I have re-created all of the CSS Sculptor rounded corner layouts using only CSS and no images! These designs will only work in a modern browser that supports CSS3 rounded corners – Chrome, Firefox, and Safari are the main three.
There are 3 layouts (3 column, 2 column left sidebar, 2 column right sidebar) in the zip file and since they are fully CSS, you don’t have to slice any new images and you can simply change the width on a column and everything will adjust itself as needed. You can import the zip using the WebAssist Preset Manager in Dreamweaver.
Download the presets
This post is the first in a series about getting started with MooTools.
The MooTools website states – “MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”
If you are just getting started with MooTools, the syntax is quite a bit more streamlined than stock JavaScript. I wanted to provide some examples of stock JavaScript and the MooTools equivalent. In general its easier to start learning by example then once you get some of the core ideas down you can be more successful as you continue to learn MooTools. Future parts in this series will focus on the individual concepts in more details, but for now the point is to get you writing streamlined MooTools code.
Note: The MooTools docs are an excellent source for any questions you have since there is tons of great info and examples there as well.
Core and More
MooTools is split into 2 files, Core and More. The Core library is the main file for MooTools that you will always need. The More library contains additional plugins that might be useful to you. There is a More builder that allows you pick and choose what optional components you need. This way you can keep the More size down to only the extra things you need. For now, I’ll just be dealing with concepts in the Core library.
Continue Reading
This post was originally written by me for the WebAssist blog. I’m re-posting it here because it will setup a blog post for next week.
Rounded corners are quite common these days across lots of websites. They are definitely appealing and help change it up from the normal square boxes a browser renders by default.
There are several techniques to create rounded corners (i.e. nest 4 divs and have a corner image aligned in each one), but my favorite by far is using the new CSS3 border radius property. Essentially, you can just use a few lines of CSS and create awesome looking rounded corners for an element on your webpage. In fact, I use this CSS3 technique all over something cliche.
Continue Reading
