Relational Selectors in html and css-CodePudding

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;
}

CodePudding user response：

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

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

CodePudding user response：

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)

CodePudding user response：

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

External CSS
Internal CSS
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!