@charset "utf-8";
/* CSS Document */

css reset

    Home
    CSS Tutorials
    Free Weekly Training

Free Weekly CSS Training
Video Tutorials

Enter your email to get the best hand-picked CSS videos & tutorials by email every Tuesday!

Unsubscribe any time. No spam.
CSS Reset » Yahoo! (YUI 3) Reset CSS
Yahoo! (YUI 3) Reset CSS
by Joss  –  follow on Twitter here	


Yahoo! YUI 3 is a next-generation JavaScript / CSS library, written collectively by the Yahoo! Developer Network, which also powers the Yahoo! homepage. It incorporates over five years of dedicated library development by Yahoo!, and includes core CSS/JS components, a full suite of utilities, Widget Infrastructure, and a few default Widgets.

It’s completely open source under the BSD-license, and Yahoo! provides a dependable hosted API like to the YUI Reset, as well as its other modules.

The YUI 3 CSS Reset mitigates the inconsistent styling of HTML elements by browsers, in the same way as any other CSS Reset, to create a dependably flat foundation upon which to build out websites and webapps.

Where it really comes into its own is when coupled with the other CSS modules, which are also available via reliable hosted API links. Here are the official descriptions of the three extra available modules:
cssbase.css

    CSS Base is an optional CSS file that complements YUI’s core CSS foundation (CSS Reset and CSS Fonts). CSS Base applies a style foundation for HTML elements that is consistent for A-grade browsers.

    CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.

cssfonts.css

    The foundational CSS Fonts provides cross-browser typographical normalization and control while still allowing users to choose and adjust their font size. Both Standards and Quirks modes are supported in A-grade browsers.

cssgrids.css (beta)

    The foundational CSS Grids provides a simple system for layout out content. The basic components are “grids” and “units”. A “grid” (yui3-g) contains one or more “units” (yui3-g). The type of “unit” chosen describes how it should be sized (e.g. “yui3-u-1-2″ takes up half the grid, “yui3-u-1-3″ takes up one-third, et cetera).

The three modules listed above are available at the Yahoo! YUI Website linked above. To try out the basic YUI CSS library, you could write the following at the top of your stylesheet to pull in the minified (compressed) versions:

    @include url('http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css');
    @include url('http://yui.yahooapis.com/3.5.0/build/cssbase/cssbase-min.css');
    @include url('http://yui.yahooapis.com/3.5.0/build/cssfonts/cssfonts-min.css');

However, for what it’s worth, I’d recommend copy/pasting them into your own stylesheet if you’re interested in hacking them or seeing how they work.

Now, the code!
Yahoo! YUI 3 CSS Reset – Full Version (1.64KB)

    /**
    * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
    * http://cssreset.com
    * Copyright 2012 Yahoo! Inc. All rights reserved.
    * http://yuilibrary.com/license/
    */
    /*
    TODO will need to remove settings on HTML since we can't namespace it.
    TODO with the prefix, should I group by selector or property for weight savings?
    */
    html{
    color:#000;
    background:#FFF;
    }
    /*
    TODO remove settings on BODY since we can't namespace it.
    */
    /*
    TODO test putting a class on HEAD.
    - Fails on FF.
    */
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td {
    margin:0;
    padding:0;
    }
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    fieldset,
    img {
    border:0;
    }
    /*
    TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
    */
    address,
    caption,
    cite,
    code,
    dfn,
    em,
    strong,
    th,
    var {
    font-style:normal;
    font-weight:normal;
    }
     
    ol,
    ul {
    list-style:none;
    }
     
    caption,
    th {
    text-align:left;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-size:100%;
    font-weight:normal;
    }
    q:before,
    q:after {
    content:'';
    }
    abbr,
    acronym {
    border:0;
    font-variant:normal;
    }
    /* to preserve line-height and selector appearance */
    sup {
    vertical-align:text-top;
    }
    sub {
    vertical-align:text-bottom;
    }
    input,
    textarea,
    select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    }
    /*to enable resizing for IE*/
    input,
    textarea,
    select {
    *font-size:100%;
    }
    /*because legend doesn't inherit in IE */
    legend {
    color:#000;
    }
    /* YUI CSS Detection Stamp */
    #yui3-css-stamp.cssreset { display: none; }

Yahoo! YUI 3 CSS Reset – Minified (0.7KB)

/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

A Note About Contexts

The Yahoo! YUI CSS Modules (Reset, Base, Fonts and Grids) by default apply to every HTML element, regardless of context. But what if you want to only apply the reset to a certain section, subsection or specific element (and its children) of the page or application?

Well, Yahoo!’s got your back. You can load a contextual CSS Reset (or contextual versions of any of the other modules), which only apply to elements with a certain CSS class in the markup – and their descendants. Check out their documentation for details!
Video Tutorials

Enjoyed this article? We really think you'll love the free training:
  No Spam
Leave a reply
Name (required)
Email (will not be published) (required) this will never be published

+ add your website or Twitter username (we’ll link to ‘em)
Comment
Free Weekly Training

Subscribe to get the best hand-picked CSS videos & tutorials every Tuesday!
No Spam
About cssreset.com

CSSReset.com is a free resource and daily tutorial site made by Joss, creator of MotionCAPTCHA, money.js, Open Exchange Rates and other things.

On the homepage, you'll find the most popular CSS Reset scripts to copy/paste, with documentation for each. Check out the daily tutorials, and make sure to grab the free weekly training!
Latest CSS Tutorials

    CSS Automatic Numbering Tutorial Counter For HTML Elements
    Using CSS Pseudo-Classes to Style Your Links
    CSS3 Keyframe Animations - iPhone Wiggle Effect
    Creating Four Very Cool Text Effects Using the CSS Text Shadow Property
    Creating Sleek, Semantic, Sliding Buttons with CSS3!

Reset CSS Scripts

    Eric Meyer’s “Reset CSS” 2.0
    HTML5 Doctor CSS Reset
    Tripoli CSS Reset
    ‘undohtml.css’ – Tantek Celik
    Universal Selector ‘*’ Reset
    Vanilla CSS Un-Reset
    Yahoo! (YUI 3) Reset CSS

Popular Topics

    css(34)
    intermediate(18)
    basic(18)
    css3(16)
    :hover(14)
    advanced(12)
    layout(10)
    position(10)
    CSS functions(9)
    color(9)

Facebook Community
Google Plus

All words, images and code copyright © 2010 - 2013 cssreset.com. All rights reserved.
About • Contact • Terms & Conditions • Privacy
RSS / Email / Twitter:   RSS Email Twitter