Challenge: Fonts
Task
Let's apply various font properties to specific elements:
For h1:
Font family:
Arial.Font size:
36px.Font weight:
600.Font style:
italic.
For p:
Font family:
Georgia.Font size:
18px.Font weight:
400.Font style:
normal.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
This is an example of text in a paragraph. The font family is set to
Georgia, the font size is 18px, the font weight is normal, and the font
style is also normal.
</p>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h1 {
/* Change the code below this line */
font-family: ___;
font-size: ___;
font-weight: ___;
font-style: ___;
/* Change the code above this line */
}
p {
/* Change the code below this line */
font-family: ___;
font-size: ___;
font-weight: ___;
font-style: ___;
/* Change the code above this line */
}
font-family: Specifies the font family.font-size: Defines the font size.font-weight: Sets the font weight.font-style: Specifies the font style.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
This is an example of text in a paragraph. The font family is set to
Georgia, the font size is 18px, the font weight is normal, and the font
style is also normal.
</p>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h1 {
/* Change the code below this line */
font-family: Arial;
font-size: 36px;
font-weight: 600;
font-style: italic;
/* Change the code above this line */
}
p {
/* Change the code below this line */
font-family: Georgia;
font-size: 18px;
font-weight: 400;
font-style: normal;
/* Change the code above this line */
}
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 2. Kapitel 6
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
