Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Hi, I’m trying to set my img element to have a display of block and my #image ID to a max-width of 100%, but I think I’m not getting something right as it’s not working. I don’t see any provision to write my css in an external file, so I don’t know how to target those two elements separately. Help, please ?Thanks

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title>Tribute Page Test</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main id="main">
    <h1>Nelson Mandela</h1>
    <p id="title">The man who saved a million South-African  lives</p>
    <div id="img-div">
      <img src="https://media.npr.org/assets/img/2013/06/18/04_ap900211033_wide-8bb4588be28dc584ba4a6d799d13398d1dd8face-s800-c85.webp" id="image" height="auto" width="100%" display="block">
      <figcaption id="img-caption">The day Nelson Mandela walked out of prison</figcaption>
      </div>
      <p id="tribute-info">
        Nelson Mandela, in full Nelson Rolihlahla Mandela, byname Madiba, (born July 18, 1918, Mvezo, South Africa—died December 5, 2013, Johannesburg), Black nationalist and the first Black president of South Africa (1994–99). His negotiations in the early 1990s with South African Pres. F.W. de Klerk helped end the country’s apartheid system of racial segregation and ushered in a peaceful transition to majority rule. Mandela and de Klerk were jointly awarded the Nobel Prize for Peace in 1993 for their efforts.
      </p>
      <p>Here is a link to read more about <a href="https://en.wikipedia.org/wiki/Nelson_Mandela" id="tribute-link" target="_blank">Nelson Mandela</a></p>
  </main>
</body>
</html>




/* file: styles.css */


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

I just noticed after submitting this question that all my inline styling was removed. Where am I supposed to write my css ?

3

There’s a separate file for the stylesheet in styles.css. Be sure to link to it in the head of the document.

 <link rel="stylesheet" href="styles.css">
4

click on styles.css tab to open editor for css file

5

I linked it, but where do I actually write the codes?

6

Oh! thank you! I’ll do this now.

7

Hi. I Can’t seem to find it on the page. Where do I look,please ?

8

there are links for index.html and styles.css files to edit them on top left side of the page

9

Thank you so much. I had to reload the page to see the links. I really appreciate the help.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.