Lighte
March 13, 2025, 3:14pm
1
I have been on the second task for a long time. My background color code is not working
Business Card
{
background-color: rosybrown;
font-family: Arial,sans-serif;}
<p {margin-top:5px;}
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Business Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> <style>{
background-color: rosybrown;
font-family: Arial,sans-serif;}
<p {margin-top:5px;}
</style>
</body>
</html>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Design a Business Card - Design a Business Card
Lighte
March 13, 2025, 3:18pm
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Business Card</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: rosybrown;
font-family: Arial, sans-serif;
text-align: center;
}
p {
margin: 5px 5px;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline;
}
.business-card {
width: 300px;
background-color: white;
padding: 20px;
margin: 100px auto;
text-align: center;
font-size: 16px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.profile-image {
width: 100px;
height: 100px;
border-radius: 50%;
}
.social-media {
margin-top: 20px;
}
.social-media h2 {
font-size: 18px;
}
.social-media a {
display: block;
margin: 5px 0;
font-weight: bold;
}
</style>
</head>
<body>
<div class="business-card">
<img class="profile-image" alt="Profile picture" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg">
<p class="full-name">Favor Muoneke</p>
<p class="designation">COO</p>
<p class="company">Greenera Technologies</p>
<hr>
<p>favorchidi@gmail.com</p>
<p>08166212005</p>
<a href="https://www.instagram.com/chidieberefavor/">Portfolio</a>
<hr>
<div class="social-media">
<h2>Connect with me</h2>
<a href="https://mobile.x.com/FavorChidiebere/status/1663041432217681920">Twitter</a>
<a href="https://www.linkedin.com/in/your-profile">LinkedIn</a>
<a href="https://github.com/your-username">GitHub</a>
</div>
</div>
</body>
</html>
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Welcome to the forum
It looks ok to me? Did you already solve this problem? It looks like you’ve udpated your code.
Lighte
March 13, 2025, 3:33pm
5
I observed that I did not paste the entire code initially. The recent I shared is the same code that is not working
You’ve linked to an external stylesheet, but you’ve added internal styles.
Please review this video (or the transcript):
https://www.freecodecamp.org/learn/full-stack-developer/lecture-what-is-css/what-are-inline-internal-and-external-css
Lighte
March 13, 2025, 4:01pm
8
This is what happens when I remove the internal CSS style element.
You removed the style elements inside the head element. If you are linking to the external styles.css file, why aren’t you using it? Please review the video I suggested to get clear about the difference between internal styles and external styles and why the latter is almost always best practice.
Lighte
March 13, 2025, 4:05pm
10
I have reviewed the video
Great! Did that help you understand where your CSS rules should go?
Lighte
March 13, 2025, 4:14pm
12
I am to style within the head element.
Lighte
March 13, 2025, 4:16pm
13
What exactly am I missing here?
Where in the instructions does it ask you to set up CSS rules inside a style element? Instead, the very first instruction says:
You should link the style sheet styles.css using the link tag in the head section of the HTML file.
Which you did. Why do you think you would do that? Is that link element pointing to styles written internally or is it pointing to an external file?
UPDATE: Here’s a quote from the video transcript:
External CSS is written in a separate .css file and linked to the HTML document using the link element in the head section.
You can use these buttons to access different files to edit.
1 Like
Lighte
March 13, 2025, 5:19pm
16
Wow!
Thanks so much. This is so reliving. God bless you
1 Like
