Skip to content

Commit e294bca

Browse files
code-warriorcode-warrior
committed
Update all examples in the CSS folder
1 parent 44630a2 commit e294bca

File tree

34 files changed

+535
-412
lines changed

34 files changed

+535
-412
lines changed

‎tutorials/css/combinators/adjacent-sibling/index.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Combinators — Adjacent Sibling</title>
6-
<style>
4+
<meta charset="utf-8">
5+
<title>Combinators — Adjacent Sibling</title>
6+
<link rel="stylesheet" href="../../../../styles/reset.css">
7+
<link rel="stylesheet" href="../../../../styles/base.css">
8+
<style>
79
li + li {
8-
color: #f00ba3;
9-
list-style-type: none;
10+
color: #f00ba3;
11+
list-style-type: none;
1012
}
11-
</style>
13+
</style>
1214
</head>
1315
<body>
14-
<header>
15-
<nav>
16-
<ul>
17-
<li>Home</li>
18-
<li>Portfolio</li>
19-
<li>About</li>
20-
<li>Contact</li>
21-
</ul>
22-
</nav>
23-
</header>
16+
<header>
17+
<nav>
18+
<ul>
19+
<li>Home</li>
20+
<li>Portfolio</li>
21+
<li>About</li>
22+
<li>Contact</li>
23+
</ul>
24+
</nav>
25+
</header>
2426
</body>
2527
</html>

‎tutorials/css/combinators/direct-descendant/index.html‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Combinators — Direct Descendant</title>
6-
<style>
7-
div > em {
8-
border: 1px solid #aaa;
4+
<meta charset="utf-8">
5+
<title>Combinators — Direct Descendant</title>
6+
<link rel="stylesheet" href="../../../../styles/reset.css">
7+
<link rel="stylesheet" href="../../../../styles/base.css">
8+
<style>
9+
main > em {
10+
border: 1px solid #aaa;
911
}
10-
</style>
12+
</style>
1113
</head>
1214
<body>
13-
<main>
14-
<div>
15-
I am <em>emphasized</em> with a border.
16-
<p>I am <em>emphasized</em>, also, but without a border.</p>
17-
</div>
18-
</main>
15+
<header>
16+
<h1>The Direct Descendant Combinator</h1>
17+
</header>
18+
<main>
19+
I am <em>emphasized</em> with a border.
20+
<p>I am also <em>emphasized</em>, but without a border.</p>
21+
</main>
1922
</body>
2023
</html>

‎tutorials/css/combinators/general-sibling/index.html‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Combinators — General Sibling</title>
6-
<style>
4+
<meta charset="utf-8">
5+
<title>Combinators — General Sibling</title>
6+
<link rel="stylesheet" href="../../../../styles/reset.css">
7+
<link rel="stylesheet" href="../../../../styles/base.css">
8+
<style>
79
h3 ~ h5:first-letter {
8-
font-size: 3rem;
10+
font-size: 3rem;
911
}
10-
</style>
12+
</style>
1113
</head>
1214
<body>
13-
<h1>The New York Times</h1>
14-
<h2>Regional</h2>
15-
<h3>NY</h3>
16-
<h4>New York City</h4>
17-
<h5>Queens</h5>
18-
<h6>Flushing</h6>
19-
<h5>Brooklyn</h5>
20-
<h6>Red Hook</h6>
15+
<header>
16+
<h1>The New York Times</h1>
17+
</header>
18+
<main>
19+
<h2>Regional</h2>
20+
<h3>NY</h3>
21+
<h4>New York City</h4>
22+
<h5>Queens</h5>
23+
<h6>Flushing</h6>
24+
<h5>Brooklyn</h5>
25+
<h6>Red Hook</h6>
26+
</main>
2127
</body>
2228
</html>

‎tutorials/css/css-specificity/index.html‎

Lines changed: 38 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,52 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>CSS Specificity Calculations</title>
6-
<link rel="stylesheet" href="styles/reset.css">
7-
<link rel="stylesheet" href="styles/fonts.css">
8-
<link rel="stylesheet" href="styles/main.css">
4+
<meta charset="utf-8">
5+
<title>CSS Specificity Calculations</title>
6+
<link rel="stylesheet" href="../../../styles/reset.css">
7+
<link rel="stylesheet" href="styles/fonts.css">
8+
<link rel="stylesheet" href="styles/main.css">
9+
<link rel="stylesheet" href="../../../styles/base.css">
910
</head>
1011
<body>
11-
<h1>CSS Specificity Calculations</h1>
12-
<table>
12+
<header>
13+
<h1>CSS Specificity Calculations</h1>
14+
</header>
15+
<main>
16+
<table>
1317
<thead>
14-
<tr>
15-
<th>Selector Type</th>
16-
<th>Specificity</th>
17-
</tr>
18+
<tr>
19+
<th>Selector Type</th>
20+
<th>Specificity</th>
21+
</tr>
1822
</thead>
1923
<tbody>
20-
<tr>
21-
<td>Universal selector (the <code>*</code> operator)<br>
22-
Combinators (the <code>+</code> operator)</td>
23-
<td><code>0, 0, 0, 0</code></td>
24-
</tr>
25-
<tr>
26-
<td>Element identifier (such as <code>p</code>, <code>ul</code>, etc.)<br>
24+
<tr>
25+
<td>Universal selector (the <code>*</code> operator)<br>
26+
Combinators (the <code>+</code> operator)</td>
27+
<td><code>0, 0, 0, 0</code></td>
28+
</tr>
29+
<tr>
30+
<td>Element identifier (such as <code>p</code>, <code>ul</code>, etc.)<br>
2731
Pseudo-element identifier (such as the poorly supported <code>:first-line</code> and <code>:first-letter</code>)</td>
28-
<td><code>0, 0, 0, 1</code></td>
29-
</tr>
30-
<tr>
31-
<td>Class identifier (elements that begin with the dot operator (<code>.</code>))<br>
32+
<td><code>0, 0, 0, 1</code></td>
33+
</tr>
34+
<tr>
35+
<td>Class identifier (elements that begin with the dot operator (<code>.</code>))<br>
3236
Pseudo-class identifier (such as <code>a:link</code>, etc)<br>
3337
Attribute identifier (selection based on the attribute assigned to an HTML tag, such as <code>img[width]</code>.</td>
34-
<td><code>0, 0, 1, 0</code></td>
35-
</tr>
36-
<tr>
37-
<td>ID identifier (elements that begin with the pound, or hash, mark: <code>&#035;</code>)</td>
38-
<td><code>0, 1, 0, 0</code></td>
39-
</tr>
40-
<tr>
41-
<td>Inline style (style information included directly inside an HTML tag)</td>
42-
<td><code>1, 0, 0, 0</code></td>
43-
</tr>
38+
<td><code>0, 0, 1, 0</code></td>
39+
</tr>
40+
<tr>
41+
<td>ID identifier (elements that begin with the pound, or hash, mark: <code>&#035;</code>)</td>
42+
<td><code>0, 1, 0, 0</code></td>
43+
</tr>
44+
<tr>
45+
<td>Inline style (style information included directly inside an HTML tag)</td>
46+
<td><code>1, 0, 0, 0</code></td>
47+
</tr>
4448
</tbody>
45-
</table>
49+
</table>
50+
</main>
4651
</body>
4752
</html>

‎tutorials/css/float/float-left--example-1.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="utf-8">
55
<title>The Font Shortcut</title>
6-
<link rel="stylesheet" href="styles/reset.css">
6+
<link rel="stylesheet" href="../../../styles/reset.css">
7+
<link rel="stylesheet" href="../../../styles/base.css">
78
<link rel="stylesheet" href="styles/main.css">
89
</head>
910
<body>

‎tutorials/css/float/styles/main.css‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
11
body {
2-
color: #222;
3-
margin: auto;
4-
width: 60%;
5-
font: 24px / 1.4 'Times New Roman', serif;
6-
}
7-
8-
h1 {
9-
font: 36px / 1 Helvetica, Arial, sans-serif;
10-
font-weight: 700;
11-
margin: 36px 0;
12-
text-align: center;
13-
font-size: 48px;
2+
color: #222;
3+
margin: auto;
4+
width: 60%;
145
}
156

167
p {
17-
margin: 24px 0;
8+
margin: 20px 0;
189
}
1910

2011
.pull-left {
21-
font: message-box;
22-
float: left;
23-
width: 200px;
24-
margin-left: -220px;
12+
font: message-box;
13+
float: left;
14+
width: 200px;
15+
margin-left: -220px;
2516
}

‎tutorials/css/float/styles/reset.css‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎tutorials/css/generated-content/css/main.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
p::before {
2-
content: 'Hello! ';
1+
main > p:last-of-type::before {
2+
content: 'Hello! ';
3+
border: 1px solid #00000066;
34
}
45

5-
p::after {
6-
content: ' Good bye!';
6+
main > p:last-of-type::after {
7+
content: ' Good bye!';
8+
border: 1px solid #0000FF66;
9+
}
10+
11+
main > p:last-of-type::before,
12+
main > p:last-of-type::after {
13+
border-radius: 4px;
14+
padding: 4px;
715
}

‎tutorials/css/generated-content/index.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Generated Content</title>
6-
<link rel="stylesheet" href="css/main.css">
4+
<meta charset="utf-8">
5+
<title>Generated Content</title>
6+
<link rel="stylesheet" href="../../../styles/reset.css">
7+
<link rel="stylesheet" href="../../../styles/base.css">
8+
<link rel="stylesheet" href="css/main.css">
79
</head>
810
<body>
9-
<p>It’s nice to meet you!</p>
11+
<header>
12+
<h1>Generating Content with the <code>::before</code> and <code>::after</code> Pseudo-elements</h1>
13+
</header>
14+
<main>
15+
<p>A black border appears around <code>::before</code> and a blue border around <code>::after</code>. See <a
16+
href="css/main.css"><code>css/main.css</code></a></p>
17+
<p>It’s nice to meet you!</p>
18+
</main>
1019
</body>
1120
</html>

‎tutorials/css/including-css-in-html/embed-internal/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Including CSS in your HTML — The Embedded/Internal Way</title>
6+
<style>
7+
body {
8+
width: 80%;
9+
margin: 0 auto;
10+
font-family: Helvetica, sans-serif;
11+
}
12+
13+
p {
14+
padding: 20px;
15+
}
16+
17+
strong {
18+
border-bottom: 1px solid #999;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<header>
24+
<h1>Including CSS in your HTML — The Embedded/Internal Way</h1>
25+
<p>View the <code>head</code> section of this document’s source code to see how CSS was included via the <code>style</code> element.</p>
26+
</header>
27+
<main>
28+
<p><strong>Animal rights</strong> is the idea that all non-human animals are entitled to the possession of their own lives and that their most basic interests — such as the need to avoid suffering — should be afforded the same consideration as similar interests of human beings.</p>
29+
</main>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)