-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
237 lines (235 loc) · 8.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
HEADINGS! - A primer on h1-h6
</title>
<meta name="author" content="@sndsgns">
<meta name="description" content="Simple CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/tachyons.min.css">
</head>
<body class="wi-100 bg-primary-lightest">
<header style="background-image: linear-gradient(180deg, #B8F8FF,
#B8FFF3);" class="black-80 pvx pvxl-l bg-white phs">
<h1 class="f2 mega-ns center tc mbxs mtn">HEADINGS</h1>
<h2 class="tc book f5 f4-ns ttu">A Quick Reference on Default stylings for h1-h6 elements</h2>
<div class="tc pvm">
<a href="https://twitter.com/share"
class="twitter-share-button"
data-text="A quick guide to default styles for html headings"
data-via="sndsgn" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</header>
<main class="phm bg-white">
<div class="cf center mw8">
<h1 class="f3 f2-ns fl wi-100 tc mbx mtx">Type and margin settings</h1>
<div class="wi-100 wi-50-ns fl-ns prn prl-ns">
<h1 class="f4">Defaults for h1-h6 elements</h1>
<p class="mw6 lh-copy">
The HTML spec provides information about the default styles for the
heading elements. Find below, a visual reference of the default
font-sizes and margins for each heading element. The default
type-scale starts at 2em and steps down to .67em.
The background color on each heading is to help visualize the margins between elements.
</p>
<div class="outline">
<h1>
<small class="book f5 db">font-size: 2em</small>
Default h1 size</h1>
<h2>
<small class="book f5 db">font-size: 1.5em</small>
Default h2 size</h2>
<h3>
<small class="book f5 db">font-size: 1.17em</small>
Default h3 size</h3>
<h4>
<small class="book f5 db">font-size: 1em</small>
Default h4 size</h4>
<h5>
<small class="book f5 db">font-size: .83em</small>
Default h5 size</h5>
<h6>
<small class="book f5 db">font-size: .67em</small>
Default h6 size</h6>
</div>
</div>
<div class="wi-100 wi-50-ns fl-ns pln pll-ns">
<h1 class="f4">Defaults for nested <h1> elements</h1>
<p class="mw6 lh-copy">
If an <code>h1</code> has a parent element of <code>aside</code>,
<code>article</code>, <code>aside</code>, or <code>section</code>,
it will change the default font-size and margin as shown below. Just like the
default heading type-scale, these sizes start at 2em and
step down to .67em with the margins starting at .67em and step up
to 2.3em.
</p>
<div class="outline">
<h1>
<small class="f5 db book">font-size: 2em</small>
Default h1
</h1>
</div>
<section class="outline">
<h1>
<small class="book f5 db">font-size: 1.5em</small>
Default h1 style nested once</h1>
<section>
<h1>
<small class="book f5 db">font-size: 1.17em</small>
Default h1 style nested twice</h1>
<section>
<h1>
<small class="book f5 db">font-size: 1em</small>
Default h1 style nested thrice</h1>
<section>
<h1>
<small class="book f5 db">font-size: .83em</small>
Default h1 style nested four times</h1>
<section>
<h1>
<small class="book f5 db">font-size: .67em</small>
Default h1 style nested five times</h1>
</section>
</section>
</section>
</section>
</section>
</div>
</div>
<section class="mw7 center bt b--light-gray mtx">
<h1 class="tl f3 f2-ns wi-100 mtx">Shared Styles</h1>
<p class="f5 f4-ns wi-100 tl mbn lh-copy">Note that the below styles are
shared by headings h1-h6. Since they default to display: block, that also means
they will default to have a width that is 100% of their parent element.</p>
<div class="bg-near-white pvm mvl phm phl-ns">
<pre class="pvm dib br2 tl mtn">
<code class="small f5-ns">
h1, h2, h3, h4, h5, h6 {
display: block;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
</code>
</pre>
</div>
<h1 class="f3 f2-ns wi-100 tl mtx ptx">All Styles</h1>
<p class="f5 f4-ns wi-100 tl mw7 lh-copy">Note that these are the typical defaults for
heading elements recommended for browsers by the html spec.</p>
<div class="bg-near-white pvm mvl phm phl-ns small f5-ns">
<pre>
<code>
h1 {
display: block;
font-size: 2em;
margin-before: 0.67em;
margin-after: 0.67em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
</code>
</pre>
<pre>
<code>
h2 {
display: block;
font-size: 1.5em;
margin-before: 0.83em;
margin-after: 0.83em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
</code>
</pre>
<pre>
<code>
h3 {
display: block;
font-size: 1.17em;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
</code>
</pre>
<pre>
<code>
h4 {
display: block;
margin-before: 1.33em;
margin-after: 1.33em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
</code>
</pre>
<pre>
<code>
h5 {
display: block;
font-size: .83em;
margin-before: 1.67em;
margin-after: 1.67em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
</code>
</pre>
<pre>
<code>
h6 {
display: block;
font-size: .67em;
margin-before: 2.33em;
margin-after: 2.33em;
margin-start: 0;
margin-end: 0;
font-weight: bold;
}
</code>
</pre>
</div>
</section>
<section class="mtx center mw7 ptm pbx">
<h1 class="f2">Reference</h1>
<p class="f4">Find additional references about html heading elements within the spec.</p>
<ul class="list mln pln lh-copy">
<li class="db"><a class="link b f4 db" href="http://www.w3.org/TR/html-markup/h1.html">HTML Spec h1</a></li>
<li class="db"><a class="link b f4 db" href="http://www.w3.org/TR/html-markup/h2.html">HTML Spec h2</a></li>
<li class="db"><a class="link b f4 db" href="http://www.w3.org/TR/html-markup/h3.html">HTML Spec h3</a></li>
<li class="db"><a class="link b f4 db" href="http://www.w3.org/TR/html-markup/h4.html">HTML Spec h4</a></li>
<li class="db"><a class="link b f4 db" href="http://www.w3.org/TR/html-markup/h5.html">HTML Spec h5</a></li>
<li class="db"><a class="link b f4 db" href="http://www.w3.org/TR/html-markup/h6.html">HTML Spec h6</a></li>
</ul>
</section>
</main>
<footer class="mw7 center wi-100 ptl pbx mtl">
<ul class="pln tc black-70">
<li class="list pbm">Built by <a class="link b dim"
href="http://www.github.com/sndsgn">sndsgn</a> using <a
class="link dim" href="http://tachyons.io">tachyons</a></li>
<li class="list dib mrxs"><a class="link b dim phm pvs btn small db" href="http://www.github.com/sndsgn">GitHub</a></li>
<li class="list dib mlxs"><a class="link b dim phm pvs btn small db" href="http://www.twitter.com/sndsgns">Twitter</a></li>
</ul>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60526536-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>