Skip to content

Commit 1668aa3

Browse files
alesanchezralesanchezr
committed
added new exercise
1 parent a310e4f commit 1668aa3

File tree

7 files changed

+89
-9
lines changed

7 files changed

+89
-9
lines changed

‎exercises/04-Class-Selector/README.md

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,33 @@
11
# `04` Class Selector
22

3-
There are many ways to select HTML elements to apply styles to them, so far we have only use the `tag selector`:
3+
There are many ways to select HTML elements to apply styles to them, so far we have only use the `tag` selector, but there are others:
44

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. |
5+
#### 1) `.class` Selector
6+
7+
The most popular css selector, you will use it every 5 minutes.
8+
Use the class property of the HTML element to select it. Styling rules will apply to all elements with the same class value
9+
10+
```css
11+
.small{
12+
font-size: 9px;
13+
}
14+
```
15+
Note: any html tag with the `class="small"` will have a font-size of 9px.
16+
17+
#### 2) `#id` selector
18+
19+
```css
20+
#small{
21+
font-size: 9px;
22+
}
23+
```
24+
Use the id property of the HTML element to select it. IDs should be unique, only one element must have the same ID.
25+
Note: The html tag with the `id="my_number_one"` will have a font-size of 9px.
826

927
# 📝 Instructions:
1028

29+
Right now there is a class selected on the CSS that is called `.b-blue`.
30+
31+
Please apply that class to both of the `<p>` tags in HTML.
1132

12-
# Hint:
1333

‎exercises/04-Class-Selector/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33
<head>
44
<link rel="stylesheet" type="text/css" href="./styles.css" />
55
<title>
6-
04 Combined Rules
6+
04 Class selector
77
</title>
88
</head>
99

1010
<body>
11-
<div class="myBox">Hello!</div>
11+
<p>Hello!</p>
12+
<p>World!</p>
1213
</body>
1314
</html>

‎exercises/04.1-Combined-Rules/README.es.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# `04` Reglas Combinadas
1+
# `04.1` Reglas Combinadas
22

33
Los archivos CSS ocupan espacio en tu servidor y también tardan en descargarse (como todo); es otro documento de texto que el navegador debe descargar antes de mostrar la página, por lo que es importante mantener el documento CSS lo más pequeño posible.
44

‎exercises/04.1-Combined-Rules/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# `04` Combined Rules
1+
# `04.1` Combined Rules
22

33
CSS files take space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why is important to keep the CSS document as small as possible.
44

‎exercises/04.2-Apply-several-classes/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# `04.2` Apply several classes
2+
3+
We have prepared a small CSS Stylesheet that contains the CSS styles to replicate poker cards.
4+
5+
We are going to use to classes and apply them to the same `<div>` element.
6+
7+
```html
8+
<div class="card spades">9</div>
9+
```
10+
11+
The class `card` contains the styling rules to make the div look like a card: Borders, Height, Width, etc.
12+
The class `spades` contains the styling rules needed to make the card turn into a spades suite (black and with a spades sybbol).
13+
14+
There are two possibl suite classes you can apply to the html element and it will make it look like a real poker card.
15+
16+
# 📝 Instructions:
17+
18+
Replace the class property `spades` of the `<div>` with the class `heart` and look at the results.
19+
20+
![Poker Card Heart](https://ucarecdn.com/e792fe99-61af-4164-a09a-3966e9e540e9/)

‎exercises/04.2-Apply-several-classes/index.html

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 Class selector
7+
</title>
8+
</head>
9+
10+
<body>
11+
<div class="card spades">9</div>
12+
</body>
13+
</html>

‎exercises/04.2-Apply-several-classes/styles.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.card {
2+
display: inline-block;
3+
width: 50px;
4+
height: 80px;
5+
position: relative;
6+
border: 1px solid black;
7+
text-align: center;
8+
line-height: 80px;
9+
border-radius: 5px;
10+
}
11+
.card:after {
12+
font-size: 70%;
13+
font-weight: bold;
14+
}
15+
16+
.spades,
17+
.spades:after {
18+
content: "♤";
19+
color: black;
20+
}
21+
22+
.heart,
23+
.heart:after {
24+
content: "♡";
25+
color: red;
26+
}

0 commit comments

Comments
 (0)