Graphic Euphoria» CSS

Font stacks, the !important css declaration and some html tips

Si — Wed, 03 Jun 2009 18:34:33 +0000

It’s been a good week for subscribing to blogs, they are a endless stream of new and useful information, here are a few good tit-bits from my reader account!

Font Stacks

It’s a basic CSS declaration but not many people are aware of what font stacks do. In a world where most fonts are not available on the web, or ‘web-safe’ as we like to call it, you have to stick to a limited amount. Luckily CSS enables the developer to list his ideal fonts in an order of preference. Therefore if the first font, or most ideal, isn’t available then the next one will take over. This is called the font stack. Unit Interactive wrote a great article about font stacks and also created a downloadable PDF document with examples. This is a great tool to help explain to designers what is possible in true web design. As many developers will know, you typically get a PSD file from a designer and find you have to go back to them to explain why they can’t use a certain font. via firstwebdesigner.com & CSS Globe

!important CSS Declaration

Impressive Webs – everything you need to know about the !important CSS declaration This is another great article which explains a common CSS declaration. CSS, by it’s nature, is cascading or in other words heiracial. This basically means it sets properties as it is read from top to bottom. A duplicated selector further down the page will overwrite the previous properties (where properties match). There are also instances where someone has used in-line styling or you have no choice but to use in-line styling (i can’t think of one). ‘!important‘ can also overwrite this! Typing ‘!important‘ after any CSS property tells the browser that this CSS declaration is the most important one and overwrites all other declarations. It is great for overwriting common classes or properties where you might want to use an exception or perform a minor tweak. via CSS Globe

Finally, some good html tips

Line25.com – html crimes you shouldn’t commit This article provides a quick list of 10 html good practices which would improve your coding. The majority are straight forward and known to many, the most being about out-dated tags, but still it’s great to see a blog going back to the basics. One great thing about using the more updated tags is that you can wrap the older tags around html elements, reset them with CSS (font-weight:normal), and use them together with a Javascript frame work to create advanced effects!

Checklist for a Successful Website Launch

Si — Thu, 19 Feb 2009 00:01:55 +0000

Moxie.com have blogged a useful checklist. They list 13 steps you would do well to consider before launching a website to the world wide web! 13 Steps to a Successful Website Launch via e-moxie.com. I agree with all their points and can think of a couple extra.. 14. Gzip all your javascript (if supported by your server). Otherwise use a javascript compressor to shrink the code. 15. Compress all your CSS using a CSS compressor. Try to compile it into one file and with different media types for print and screen. 16. Remove all your annotations from your code and insert a copywrite comment. 17. Run a broken link checking site to find all the problem links. 18. Use a sitemap generator to create your sitemap.xml. 19. Verify your site with google webmaster tools. 20. Finally, don’t forget a favicon! Wow, that’s seven more tips! I hope you find this useful. more posts coming soon..

Shorthand CSS: Easier to learn, read and update!

Si — Sat, 14 Feb 2009 14:32:03 +0000

Well, I’m slowly getting through all my bookmarks, blogging the important sites I’ve discovered over the last couple of years. I’ve found another gem.. If you write CSS then you will be aware how bulky it can become and, more importantly, difficult to read. Using shorthand CSS you can cut through a lot of the bulk by removing excessive property declarations and with a quick scan you can find a property to change or update. Roger Johansson over at www.456bereastreet.com has written a good post about the most common forms of shorthand. A summary of efficient css with shorthand properties Typically they combine many declarations into one single declaration. The most important thing to remember from these findings is the order of the attributes within the new longer declaration! One other thing is worth mentioning again.. if you are setting a value to zero or 0 you don’t need to add the measurement on the end (it is px by default). For example:

Margin:0;

is the same as

Margin:0px;

and finally, this is purely my own habit, when setting margin or padding i always use..

Margin:0 0 0 0; Padding:0 0 0 0;

..even if i just want to change one value. It saves typing, keeps things neat and if you do need to go back and alter something you have already included it so you just change the value!

Free loader bar animated gif creator website!

Si — Sat, 14 Feb 2009 14:13:20 +0000

I just stumbled across this site while googling for a loader bar. I admit i just couldn’t be bothered to make one and planned to steal one.. Thanks to the creator of ajaxload.info i never have to again! Simply choose your style, foreground colour , background colour then download your loader gif. Loader bar.. Done!

Free Online CSS Framework Generator

Si — Sat, 14 Feb 2009 14:09:00 +0000

Today I stumbled across a cool new online Web 2.0 application. It’s called ‘CSS Frame Generator‘ but I think that title is a little bit confusing to what it actually does.. Since CSS is hierarchical and semantic you can greatly condense your style sheets by cutting out the over use of classes and id’s. For example, if I were to have a list within a div, you only have to give the containing div and id name to style all the contents. This is where the CSS Frame Generator comes in. Basically you enter your (x)html, with the main elements given id’s, and the application will create a stylesheet full of empty CSS attributes. You can then start filling in the style attributes and finally delete the ones you don’t use! So, to sum up, it doesn’t help with design but could just save you some time and make your code better!

CSS quick reference and comparison table

Si — Sat, 14 Feb 2009 13:51:25 +0000

Two of the trickiest problems when coding with CSS is knowing the property name, the order of the property attributes (if using shorthand) and knowing which browser supports what.. This is what you need: CSS quick reference sheet and CSS Property Index

Combine all CSS media types into one style sheet

Si — Sat, 14 Feb 2009 13:48:29 +0000

I have stumbled across another great CSS tip! Combine Your CSS Media Styles Into One File As you are probably already aware you can declare a media type for your CSS stylesheet. This enables you to have a specific style for online, mobile, print etc. Declaring these sheets seperately means you have extra http requests. The more requests per page the less efficient it becomes.. CSS has a built in method of declaring the type as if it were an ‘if’ statement. Hence you can keep all your CSS in the one file! F.A.B.

@media all
{
/* all other attributes (web, mobile etc) */
}

@media print
{
/* print attributes */
}

The BEST CSS cheatsheet yet and it’s all about shorthand

Si — Sat, 14 Feb 2009 13:43:37 +0000

Well, it’s one of the best CSS cheat sheets I’ve seen yet. It sums up exactly what you want to know. It helps my productivity as the only thing i can’t remember is the order of the values in CSS shorthand. Specifically the font attributes! So many thanks to leigeber.com this one is a gem.. download it here!

CSS horizontal drop down menus: A great resource list!

Si — Sat, 14 Feb 2009 01:59:32 +0000

I was very pleased to get this link in my daily blog subscription as i was just looking into these at work today! Getting a CSS drop down menu to work across all browsers can be very tricky especially as internet explorer doesn’t really like a hover state on anything other than a anchor tag! Check out this great collection of popular solutions including pure CSS, Javascript and AJAX! Multilevel Drop Down Navigation Menus: Examples and Tutorials

CSS Reset: the first step to browser compatibility

Si — Fri, 13 Feb 2009 01:59:58 +0000

As everybody knows, getting a website to look the same across different browsers is a tricky task to get right, if not impossible. That is because every browser has it’s own standard default CSS styling sheet built in. So Mozilla Firefox will have a different default style to IE7 or even IE8. Even though these differences are subtle they are enough to give you some surprising results when you view your design in a new browser or platform. The only way to fix this is to include at the top of your own CSS style sheet a ‘CSS Reset‘ script. A while ago i stumbled across a basic CSS reset script and after some research i discovered Eric Meyer’s CSS Rest Reloaded script. Eric has created a really comprehensive script but as ever i felt the need to edit it for my own use. I personally felt it could be stripped down slightly and sometimes went too far. Specifically the body, blockquote, q resets and setting list-style to ‘none’. The following is what i had left:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; line-height:100%;}
:focus {
/*outline: 0; if used define new style */
}
ol, ul {list-style:circle;}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}