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?!).
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 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
This post is tackles two things, how to create a CSS menu and how to vertically center text.
The menu is a standard horizontal menu that is a little bit of HTML and CSS. Its best practice to use an unordered list so the code degrades gracefully.
If you remember back to the good old days of using table based layouts, you use a handy valign=”middle” attribute in HTML or vertical-align: middle; in CSS. The modern way to layout a page ditches tables and uses CSS positioning instead (of course tables can still be used where they make sense – tabular data!). CSS layouts have numerous advantages over tables and is definitely the way to go. However, there are some workarounds needed and one such workaround is for vertically aligning text.
Gone is the valign attribute and vertical-align pretty doesn’t work in the scenarios you would expect. A great example that uses vertically aligned text is a menu. In this example, I’ll use line-height to accomplish the vertical alignment. It’s pretty clean and you don’t have to worry about setting top/bottom padding this way either.
Continue Reading
If you have ever create a multi column CSS layout, you probably have had to clear the elements after your columns. If not, the general technique is to have a wrapper div with floated columns then a a clear div to make sure the content from then on starts below the longest of the floated columns.
If you don’t clear the floats, the markup occurring after the floats will be positioned incorrectly and will cause some unsightly overlap issues.
Note: A multi column layout is just one example since floated elements obviously have lots of other uses as well.
Continue Reading
Have you ever noticed those sweet blue outlines around input fields when using Safari? Something that looks like this?
In theory, it sounds like a good idea for Safari to automatically indicate what has focus on the page. However, I doubt the default blue is going to match your website color scheme too well. We can use a little CSS to prevent this default blue border.
Continue Reading
