Master Stylesheet. Solutions to common common css issues. CSS Cheat Sheet. Five CSS tricks. Getting a lot of hits from the 53 CSS-Techniques You Couldn’t Live Without post on Smashingmagazine I realised I don’t really need a lot of those (although a lot are cool). Instead let me share with you CSS techniques that saved my a*** whenever I had to create a layout using CSS or proving those wrong that claimed layout tables cannot be replaced. None of these are new, and many will be the comment that people knew about this, but I can safely say that knowing about the following and some scripting allows me to create almost any of the fancy 53 techniques mentioned.
Tabula Rasa – the global whitespace reset In October 2004 I found Andrew Krespanis’ global whitespace reset on his still (to me ) beautiful site leftjustified. The idea behind it is so simple, it is ingenious: as every browser out there has an own mind when it comes to rendering styles with a built-in stylesheet, you can overcome all the differences with a simple * selector that undoes everything the browser did. CSS Best Articles - Spellbook - IT mage's best friend. CSS and round corners: Making accessible menu tabs. One of the best websites out there, in terms of functionality, is, Amazon. In terms of accessibility though, it's not too great. The problem Amazon's menu tabs with their nice round corners, for example, look really nice but are rather inaccessible.
First of all, they're missing ALT tags. When an appropriate markup language exists, use markup rather than images to convey information This basically means don't use images to display text - site users with poor vision are unable to resize text that's displayed through images and screen magnifier users may be unable to read text embedded in images as it can appear blurry and pixelated to them. The solution: CSS menu tabs CSS, as usual, comes to our rescue. Adjust the text size in your browser now. We start with a simple link: <div id="navigation"><a href="#">Home</a></div> We'll assign it this CSS code: Which gives us: Home Needs a bit of work, right? Adding the left menu tab corner - here's one I made earlier.
And the right corner Perfect! Giving us: Ten more CSS tricks you may not know. Our article, Ten CSS tricks you may not know has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know. 1. Block vs. inline level elements Nearly all HTML elements are either block or inline elements. The characteristics of block elements include: Always begin on a new line Height, line-height and top and bottom margins can be manipulated Width defaults to 100% of their containing element, unless a width is specified Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Begin on the same line Height, line-height and top and bottom margins can't be changed Width is as long as the text/image and can't be manipulated Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.
To change an element's status you can use display: inline or display: block. 2. Padding: 2em; border: 1em solid green; width: 20em; width/**/:/**/ 14em; 3. 4. IE has a rather strange way of doing things. 5. 6. 7. Reset CSS. After a bit of time to bake and a few more suggestions from readers, I have what I’m willing to call the final version of my take on the topic of reset styles. To wit: So what changed from the last iteration? I added background: transparent; to the first rule.
It’s probably not as necessary as some of the other bits here, but it seemed like a good thing to add.Added a :focus rule to try to suppress link outlining. Why? So that you remember to define your own. I also asked for help in figuring out how to simulate inherit in IE/Win. [The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch. So that works for me, and I think for most people who have outlooks similar to mine.
Use the script and syntax contributed by Jonathan Snook and Dean Edwards. My thanks to everyone who commented, not just those I linked above. CSS and web standards tutorials, info and help. 53 CSS-Techniques You Couldn’t Live Without | CSS | Smashing Mag. CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. CSS is important. Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Let’s take a look at 53 CSS-based techniques here at Smashing Mag you should always have ready to hand if you develop web-sites. 1. 2. 3. 4. 5 Powerful Tips And Tricks For Print Style Sheets 5.
Generated content was first introduced in the CSS2 specification. 7. 8. 9. 10. Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. 11. 12. CSS Properties. CSS Background Properties. Step by step CSS float tutorial. Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Floating an image and caption Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons". Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9. All CSS Properties Listed Alphabetically.