|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>CSS Reset</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>CSS Reset</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"> <div class="intro"> |
|
|
31 |
<p class="deprecated"><em> |
|
|
32 |
<strong>Note:</strong> The files "reset.css" and "reset-context.css" are deprecated, use "cssreset.css" and |
|
|
33 |
"cssreset-context.css" instead. |
|
|
34 |
</em></p> |
|
|
35 |
<p>The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to build upon. With CSS Reset loaded, write explicit CSS your project needs.</p> |
|
|
36 |
|
|
|
37 |
<p><strong>Note:</strong> <a href="../cssbase/">CSS Base</a> can complement <a href="../cssreset/">CSS Reset</a> by applying a style foundation for common HTML elements that is consistent for our <a href="http://developer.yahoo.com/yui/articles/gbs">browser baseline</a>.</p> |
|
|
38 |
|
|
|
39 |
</div> |
|
|
40 |
|
|
|
41 |
<h2 id="start">Getting Started</h2> |
|
|
42 |
|
|
|
43 |
<h3 id="dependencies">Include Dependencies</h3> |
|
|
44 |
|
|
|
45 |
<p>To use CSS Reset, include the following source file in your web page:</p> |
|
|
46 |
|
|
|
47 |
<pre class="code prettyprint"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css"></pre> |
|
|
48 |
|
|
|
49 |
|
|
|
50 |
<h3 id="context">Global vs. Contextual</h3> |
|
|
51 |
|
|
|
52 |
<p>YUI's CSS resources apply rules to HTML elements directly (using <a href="http://www.w3.org/TR/CSS21/selector.html#type-selectors">type selectors</a>). An alternate version of the resource is available that target elements by context only. This contextual <code>-context.css</code> version selects HTML elements only when they descend from the <code>.yui3-cssreset</code> classname.</p> |
|
|
53 |
|
|
|
54 |
<p>Here is how to include the contextual version of CSS Reset:</p> |
|
|
55 |
|
|
|
56 |
<pre class="code prettyprint"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.3/build/cssreset-context/cssreset-context-min.css"></pre> |
|
|
57 |
|
|
|
58 |
|
|
|
59 |
|
|
|
60 |
<h2 id="using">Using CSS Reset</h2> |
|
|
61 |
|
|
|
62 |
<h3 id="start-globally">Using CSS Reset Globally</h3> |
|
|
63 |
|
|
|
64 |
<p>CSS Reset is easy to use. When CSS Reset is loaded it removes the inconsistent styling of HTML elements provided by browsers. Now, just begin writing the CSS rules your project needs without being burdened by what the browser <em>thinks</em> you need.</p> |
|
|
65 |
|
|
|
66 |
<p>Here is an <a href="cssreset-basic.html">example page showing HTML elements</a> once CSS Reset has been included in the page globally.</p> |
|
|
67 |
|
|
|
68 |
<h3 id="start-contextually">Using CSS Reset Contextually</h3> |
|
|
69 |
|
|
|
70 |
<p>If you're using the contextual version, CSS Reset's rules are only applied to nodes that descend from a node with a class value of <code>.yui3-cssreset</code>. In this example, CSS Reset applies to the <code>h1</code> in the left column, but does not impact the <code>h1</code> in the right column:</p> |
|
|
71 |
|
|
|
72 |
<pre class="code prettyprint"><div> |
|
|
73 |
<div id="left-column" class="yui3-cssreset"><h1>Lorem Ipsum</h1></div> |
|
|
74 |
<div id="right-column"><h1>Lorem Ipsum</h1></div> |
|
|
75 |
</div></pre> |
|
|
76 |
|
|
|
77 |
|
|
|
78 |
<p>Here is an <a href="cssreset-context.html">example page where only a portion of the page is impacted</a> because it is being used contextually.</p> |
|
|
79 |
|
|
|
80 |
|
|
|
81 |
|
|
|
82 |
|
|
|
83 |
|
|
|
84 |
</div> |
|
|
85 |
</div> |
|
|
86 |
</div> |
|
|
87 |
|
|
|
88 |
<div class="yui3-u-1-4"> |
|
|
89 |
<div class="sidebar"> |
|
|
90 |
|
|
|
91 |
<div id="toc" class="sidebox"> |
|
|
92 |
<div class="hd"> |
|
|
93 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
94 |
</div> |
|
|
95 |
|
|
|
96 |
<div class="bd"> |
|
|
97 |
<ul class="toc"> |
|
|
98 |
<li> |
|
|
99 |
<a href="#start">Getting Started</a> |
|
|
100 |
<ul class="toc"> |
|
|
101 |
<li> |
|
|
102 |
<a href="#dependencies">Include Dependencies</a> |
|
|
103 |
</li> |
|
|
104 |
<li> |
|
|
105 |
<a href="#context">Global vs. Contextual</a> |
|
|
106 |
</li> |
|
|
107 |
</ul> |
|
|
108 |
</li> |
|
|
109 |
<li> |
|
|
110 |
<a href="#using">Using CSS Reset</a> |
|
|
111 |
<ul class="toc"> |
|
|
112 |
<li> |
|
|
113 |
<a href="#start-globally">Using CSS Reset Globally</a> |
|
|
114 |
</li> |
|
|
115 |
<li> |
|
|
116 |
<a href="#start-contextually">Using CSS Reset Contextually</a> |
|
|
117 |
</li> |
|
|
118 |
</ul> |
|
|
119 |
</li> |
|
|
120 |
</ul> |
|
|
121 |
</div> |
|
|
122 |
</div> |
|
|
123 |
|
|
|
124 |
|
|
|
125 |
|
|
|
126 |
<div class="sidebox"> |
|
|
127 |
<div class="hd"> |
|
|
128 |
<h2 class="no-toc">Examples</h2> |
|
|
129 |
</div> |
|
|
130 |
|
|
|
131 |
<div class="bd"> |
|
|
132 |
<ul class="examples"> |
|
|
133 |
|
|
|
134 |
|
|
|
135 |
<li data-description="When CSS Reset is included in a page, it removes the browser-provided styling for HTML elements."> |
|
|
136 |
<a href="cssreset-basic.html">Global (Page-Level) Example</a> |
|
|
137 |
</li> |
|
|
138 |
|
|
|
139 |
|
|
|
140 |
|
|
|
141 |
<li data-description="CSS Reset applied to a portion of a page based on the location of a class value."> |
|
|
142 |
<a href="cssreset-context.html">Contextual Example</a> |
|
|
143 |
</li> |
|
|
144 |
|
|
|
145 |
|
|
|
146 |
</ul> |
|
|
147 |
</div> |
|
|
148 |
</div> |
|
|
149 |
|
|
|
150 |
|
|
|
151 |
|
|
|
152 |
</div> |
|
|
153 |
</div> |
|
|
154 |
</div> |
|
|
155 |
</div> |
|
|
156 |
|
|
|
157 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
158 |
<script>prettyPrint();</script> |
|
|
159 |
|
|
|
160 |
<script> |
|
|
161 |
YUI.Env.Tests = { |
|
|
162 |
examples: [], |
|
|
163 |
project: '../assets', |
|
|
164 |
assets: '../assets/cssreset', |
|
|
165 |
name: 'cssreset', |
|
|
166 |
title: 'CSS Reset', |
|
|
167 |
newWindow: '', |
|
|
168 |
auto: false |
|
|
169 |
}; |
|
|
170 |
YUI.Env.Tests.examples.push('cssreset-basic'); |
|
|
171 |
YUI.Env.Tests.examples.push('cssreset-context'); |
|
|
172 |
|
|
|
173 |
</script> |
|
|
174 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
175 |
|
|
|
176 |
|
|
|
177 |
|
|
|
178 |
</body> |
|
|
179 |
</html> |