Skip to content

Commit dcff308

Browse files
committed
sume updates
1 parent 9c391bc commit dcff308

File tree

19 files changed

+104
-8
lines changed

19 files changed

+104
-8
lines changed
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
a {
6+
/* change this style to yellow */
7+
color: red;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
13+
</body>
14+
</html>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
/* Your code here */
6+
</style>
7+
</head>
8+
<body>
9+
Hello! My background should be blue!
10+
</body>
11+
</html>
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
</head>
6+
<body>
7+
My background should be blue.
8+
</body>
9+
</html>
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* your styles here:
2+
1. Select the body tag.
3+
2. Add the background rule equal to blue.
4+
*/
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>02 Background</title>
6+
</head>
7+
<body>
8+
My background should be an image with th size "contain"
9+
</body>
10+
</html>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
background-image: url(https://ucarecdn.com/8e2758c5-6e04-4aa8-8919-dcf542f633f1/);
3+
background-size: cover;
4+
background-repeat: no-repeat;
5+
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>03 Inline Styles</title>
6+
</head>
7+
8+
<body>
9+
<table>
10+
<tr>
11+
<td>Hello</td>
12+
</tr>
13+
<tr>
14+
<td>My brother</td>
15+
</tr>
16+
</table>
17+
</body>
18+
</html>

exercises/01.1-The-Style-Tag/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ You can have as many style tags as you want but it is recomended to have only on
1010

1111
## 📝 Instructions
1212

13-
Add a `<style>` tag into your website and make the select thethe `<p>` to run its text into blue color.
13+
Add a `<style>` tag into your website and using CSS select the all `<p>` tags to turn their text into blue color.
1414

1515
## 💻 Preview
1616

exercises/02-Separate-Stylesheet/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# `02` Separate Sylesheet
1+
# `02` Separate Stylesheet
22

33
If you use the html `<link>` tag, you can also have your styles on a separate file that we normally call `styles.css`.
44

exercises/03-Inline-Styles/index.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
6-
<link rel="stylesheet" type="text/css" href="./styles.css" />
74
<title>03 Inline Styles</title>
85
</head>
96

exercises/03-Inline-Styles/styles.css

Whitespace-only changes.

exercises/04-Class-Selector/README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# `04` Class Selector
2+
3+
There are many ways to select HTML elements to apply styles to them, so far we have only use the `tag selector`:
4+
5+
| `tag` selector | Use the tag name of the HTML element to select it, the styles will be applied to all elements with that tag |
6+
| `.class` selector | Use the class property of the HTML element to select it. Styling rules will apply to all elements with the same class value |
7+
| `#id` selector | Use the id property of the HTML element to select it. IDs should be unique, only one element must have the same ID. |
8+
9+
# 📝 Instructions:
10+
11+
12+
# Hint:
13+

exercises/04-Combined-Rules/index.html renamed to exercises/04-Class-Selector/index.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width" />
64
<link rel="stylesheet" type="text/css" href="./styles.css" />
75
<title>
86
04 Combined Rules
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.b-blue {
2+
background: blue;
3+
}
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./styles.css" />
5+
<title>
6+
04 Combined Rules
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="myBox">Hello!</div>
12+
</body>
13+
</html>

exercises/04-Combined-Rules/styles.css renamed to exercises/04.1-Combined-Rules/styles.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
.myBox {
1+
.what {
22
width: 50px;
33
height: 50px;
44
padding-top: 10px;
55
padding-left: 30px;
66
padding-right: 190px;
77
padding-bottom: 50px;
8+
/* padding: 10px 30px 50px 190px; */
89
background: rgb(189, 189, 189);
910
background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg);
1011
background-position-x: 100px;

0 commit comments

Comments
 (0)