Last month, Sitepoint.com was giving away its great CSS book: The Art & Science of CSS in PDF format. It covers topics such as headings, images, backgrounds, navigation, forms, rounded corners, and tables.
Here is a copy (.pdf) if you didn’t get yours.
I’m not a fan of creating a script that only works in one browser or differently in other browser(s). I had to create a link on a website for work that made a URL their home page. This annoying task proved difficult as there wasn’t much good information online and it seems only IE allows this. The Firefox browser will only allow you to make a web page a ‘favorite’.
So I found the code to make it work on both IE and Firefox (will not work on any other browser), as well as improving its ‘unobtrusiveness’. As you can see from the code, I only display the link if the browser is either Internet Explorer or Firefox otherwise the link text is blank.
The ‘Browser.Detect’ object is from a script from the JavaScript guru himself, PPK which detects what browser the visitor is using. Browser detection isn’t used as much today as it once was but it is still needed on some occasions.
A great reference book (.pdf) on everything you would ever need to know about CSS.
Note: For short reference checkout out the Core CSS RefCardz:
Part 1 and Part 2 (.pdf) by Molly Holzschalg.
All modern browsers support the most common media attributes, which are supplied within the link element to target specific style sheets in a specific situation. For example, to ensure only visitors viewing the web site on a monitor, you add media = “screen” to the link element to call your default style sheet. Underneath that a second link element can be used with media = “print” added to call a print style sheet with only basic styling, such as black text on a plain white background, and all graphics removed.
I admit it. I use tables when I need to layout a form. It is just so quick and easy to do. Though as we all know (or should know), tables were only intended to be used for layout of tabular data. So with all the buzz about semantic markup and accessiblity, I thought I’d look into learning how to layout a simple form the right way. After a few hours of head scratching, I finally came up with a form that uses CSS that looks practically the same as one using tables.
Have you ever seen a web site that has clickable blocks of text?
Ever wondered how they were done?
Well, I found out how from Christian Watson.
I know the basics of CSS (Cascading Style Sheets), but beyond that I sometimes need to bumble and fumble around looking for answers in books or online. One aspect of CSS that gives me some occasional problems (and I’m sure others as well) are floats.
When you float an element, it becomes a block-level element that can then be shifted to the left or right on the current line. A floated box is laid out according to the normal flow of elements, but it’s then taken out of the flow and shifted to the left or right as far as the containing element will allow. Floats are a must for placing images in context, creating columns and other neat design ideas.
HTML attributes tend to just have a single class assigned, but this doesn’t mean that that’s all you’re allowed. You can combine as many classes as you wish, meaning a CSS palette containing just a few basic ingredients can leand to a much wider range of styles if combined intelligently.
Classes should be separated with a space, not a comma. If any style rules overlap between the classes, a class further down the CSS document will always override those above.
<h6 class="boxout highlighted">...</h6>
If you want to build modern web sites, you need to know about Cascading Style Sheets (CSS). CSS gives you the power to style and lay out web sites so they are usable, compact, good looking, well structured, and easy to maintain.
The basic purpose of CSS is to allow the designer to define style declarations, and to apply those styles to selected portions of HTML pages using selectors which are references to an element or grop of elements to which the style is applied.
A common selling point when explaining the benefits of CSS to a client, is that their site will look identical across all platforms Anyone using Internet Explorer 6 however, will soon realize that this is a slight fib.
Fortunately, IE contains a feature called ‘conditional commenting’. Simply make yourself a new IE6 friendly stylesheet, include it in your page as usual and wrap it in a conditional comment to hide it from everything except the guilty browser.
<!--[if IE 6]> <link rel="stylehseet" type="text/css" href="ie6styles.css" /> <![endif]-->
