Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ddf6a28

Browse files
bgatesbgates
committed
add Tuesday files
1 parent 04daa28 commit ddf6a28

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed

‎08-display.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Display</title>
6+
<style>
7+
html {
8+
background: #ccc;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
body {
13+
background: white;
14+
width: 800px;
15+
margin: 0 auto;
16+
padding: 1em;
17+
}
18+
h1 {
19+
margin: 0;
20+
/*width: 50%;*/
21+
border: 1px solid black;
22+
padding: 1em 0;
23+
/*box-sizing: border-box;*/
24+
}
25+
.inline {
26+
/* padding: 0;*/
27+
}
28+
.inline li {
29+
display: inline;
30+
/* width: 33%;*/
31+
/*display: inline-block;*/
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<h1>Block vs Inline</h1>
37+
<p>Here is a list:</p>
38+
<ul>
39+
<li>uno</li>
40+
<li>dos</li>
41+
<li>three</li>
42+
</ul>
43+
<p>Here is a list styled to display <em>inline</em>:</p>
44+
<ul class="inline">
45+
<li>eins</li>
46+
<li>zwei</li>
47+
<li>bier</li>
48+
</ul>
49+
</body>
50+
</html>

‎09-units.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Units</title>
6+
<style>
7+
html {
8+
background: #ccc;
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
body {
14+
background: white;
15+
width: 800px;
16+
margin: 0 auto;
17+
padding: 1em;
18+
/* font-size: 16px; */
19+
/* font-size: 1em; */
20+
/* font-size: 0.5em; */
21+
/* font-size: calc(8em/16); */
22+
/*padding: 1rem; */
23+
/*height: 100%;*/
24+
/* height: 100vh; */
25+
}
26+
h1 {
27+
margin: 0;
28+
/*width: 50%;*/
29+
border: 1px solid black;
30+
padding: 1em 0;
31+
/*padding: 1rem 0; */
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<h1>Units</h1>
37+
<p>This page starts out with a font size of 16px for text in the body, such as in this paragraph tag. You can confirm that by looking in the <code>Computed</code> tab in the <code>Elements</code> tab in Developer Tools. (Be sure the 'show all' filter has been checked.)</p>
38+
<p>The font size is inherited from the html element, but I was surprised to learn that it's not part of the user agent stylesheet settings for that element. In fact, the font size is controlled through the browser by entering <code>chrome://settings/</code> in the address bar. That is so users can customize the base font size for all web pages, to accomodate visually impaired users &emdash; or, I suppose, users who just like to read really large (or really small) print.</p>
39+
<h2>Ems vs px</h2>
40+
<p>A pixel is a fixed size for a particular screen. For instance, my MacBook Air is 1440x900px, which I confirmed by looking under the Apple logo for <code>About This Mac &gt; Displays</code>. An equally common unit in web design is the <em>em</em>. An em is the font size that an element has, which is either inherited from its parent or set on the element itself. For instance, the body element by default inherits the font size of 16px that the html element has by default, so for the body element, 1em is 16px. The padding on the body has been styled to equal 1em, and you can see in the box model diagram in the style tab of Developer Tools that the padding on the body is 16px. Change the font size of the body and check what happens to the padding.</p>
41+
<h2>Ems vs rems</h2>
42+
<p>The nice thing about ems is that they are relative. An element with padding, margin, or width specified in ems can have its font size changed, and the padding etc will automatically be changed to match. The problem with ems is that they compound: if an element's font size is set in ems, and its parent or more distant ancestor gets a new font size, the element will change too. The newer rem unit solves this problem, by being relative <em>to the root element (html).</em></p>
43+
</body>
44+
</html>
45+

‎10-position.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Position</title>
6+
<style>
7+
html {
8+
background: #ccc;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
body {
13+
background: white;
14+
width: 800px;
15+
margin: 0 auto;
16+
padding: 1em;
17+
}
18+
h1 {
19+
margin: 0;
20+
padding: 1em 0;
21+
}
22+
.outer {
23+
height: 500px;
24+
width: 500px;
25+
background: blue;
26+
}
27+
.outer p {
28+
color: white;
29+
}
30+
.inner {
31+
height: 100px;
32+
width: 100px;
33+
background: red;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<h1>Positioning</h1>
39+
<div class="outer">
40+
<div class="inner"></div>
41+
<p>Here is some text inside a blue box.</p>
42+
</div>
43+
<h2>Things to Try:</h2>
44+
<ul>
45+
<li>.inner {position: relative; left: 10px}</li>
46+
<li>.inner {position: relative; right: 10px}</li>
47+
<li>.inner {position: relative; right: -10px}</li>
48+
<li>.inner {position: relative; top: 10px}</li>
49+
<li>.inner {position: absolute; top: 10px}</li>
50+
<li>.outer {position: relative} .inner {position: absolute; top: 10px}</li>
51+
<li>.outer {position: relative} .inner {position: absolute; top: 10px; bottom: 20px;} (and unset the height on .inner)</li>
52+
<li>.outer {position: relative} .inner {position: relative; top: 10px}</li>
53+
</ul>
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)