Design a Blog Post Card - Design a Blog Post Card

Curriculum Help
,
1

Tell us what’s happening:

I think the issue is with console, as I have called the .blog-post-card and defined the border-radius at 20%, but it continue showing wrong.

plus its saying I already target the .read-more color when I haven’t.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post Card</title>
</head>
<body>
    <div class="blog-post-card">
        <img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="laptop open and on, with a google doc window page ">

        <div class="post-content">
            <h2 class="post-title">blog test</h2>
            <p class="post-excerpt">building blogs</p>
            <a class="read-more">Read More</a>


        </div>
    </div>

</body>
</html>

/* file: styles.css */
.body{
  background-color: blue;
}

.blog-post-card {
  border-radius: 25%;
  background-color: white;
  border: 5px;
  width: 100px;
  text-align: center;

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-blog-post-card/66eaddd04a9e533fba689001.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @k123,

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

Have you linked your stylesheet?

Happy coding

3

are they not linked automatically?

4

This may be the first time in this curriculum that the code to link the CSS file to the HTML file hasn’t already been done for you. At any rate, that’s why the note was included in the instructions. You will need to add it.

Please refer to this reference: How to add CSS

You may also want to review to what is said about external stylesheets in this theory lecture:
What Is CSS? - What Are Inline, Internal, and External CSS, and When Should You Use Each One? | Learn | freeCodeCamp.org

Happy coding

5

Yeah, that worked! It fixed most of the errors I was getting. I guess that’s a good reminder to always check the basics first. What I’m still confused about, though, is why some of the CSS appeared to be working even though the stylesheet wasn’t linked to the HTML. I’m curious how the console was able to detect or reference it.

6

There is no way the html file can know what is in the css file without linking the two. What styles from your stylesheet do you think were applied?

7

In the instructions, it was showing that Step 15 was completed because it had a checkmark. Step 15 was: “You should target .read-more and set its color property.” I originally thought it was a console issue because I hadn’t targeted .read-more in my CSS or used any inline CSS.