0

So, I'm currently learning #html & #css and I'm on the topic of relational selectors. In the example, the code below is suppose to display a web page with orange text. The text is still black even after trying several variations. Can someone help?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="products">
    <p>Lorem ipsum dolor sit.</p>
</section>


</body>
</html>



styles.css
body {
margin: 10px;
}

#products p {
color: orange;
}
ojcodes7
  • 1
  • 1

3 Answers3

1

It works just fine,but you have to link the css file using tag

<link rel="stylesheet" href="style.css">
Niyooooo
  • 103
  • 6
0

You have to connect your CSS file to the HTML by linking to it in the <head>, like so:

<link rel="stylesheet" href="./style.css" />

(and if the CSS file is in a folder, it will be ./foldername/style.css)

Cassidy
  • 3,328
  • 5
  • 39
  • 76
0

There are three ways you can implement style to HTML documents:

  1. External CSS
  2. Internal CSS
  3. Inline CSS

You could include your style code in the document (Internal CSS). To do so you would need to enclose it in style tags like this:

<style>
body {
margin: 10px;
}

#products p {
color: orange;
}

</style>

Hide that element in your , or at the end of your , and you should be fine. Generally, it's frowned upon to use Internal or Inline CSS, but you can do if you want to!

WildRyc
  • 31
  • 5
  • It didn't work for me because I didn't link the stylesheet. I got it now though, thanks for your help! – ojcodes7 Oct 20 '22 at 00:11