CODEWITHSUNDEEP
htmlcss
John Cañero
John Cañero

Reputation: 75

The CSS Code does not Display in HTML Server

Hello Stack Overflow Community,

I would like to ask for help regarding my concern on CSS not showing in my HTML Display. I am still new to the Programming World. Please bear with me. I am doing a tutorial course in HTML YouTube by PinoyFreeCoder.

Here is the HTML that I made:

    <title>PinoyFreeCoder Blog</title>
    <style type="text/css"> 
        body{background-color: #F5F5F5; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px; 
          font-family: sans-serif;}
   </style>
  <link rel="icon" href="Images/John Canero Logo.png" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="Style.css">**
 </head>

 <body>
 <header id="main header">
      <h1>PinoyFreeCoder.com</h1>
 </header>

Here is the Style.css that I made:

  *{
  font-family: Arial, Helvetica, sans-serif;
   }

  #main-header{
  text-align: center;
  background-color: black;
  color: white;
  padding: 10px;
  }

Thank you!

Upvotes: 1

Views: 74

Answers (1)

Uttam
Uttam

Reputation: 776

Here if you are applying styling in HTML page itself. Then, whatever CSS you want to give to your webpage you can mention it betweeen <style></style> tag.

<title>PinoyFreeCoder Blog</title>
    <style> 
        body{background-color: red; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding:10px 10px 10px 10px; 
          font-family: sans-serif;}
   </style>
  <body>
  <header id="main header">
      <h1>PinoyFreeCoder.com</h1>
 </header>
  </body>

And if you are using external CSS then you have to attach the <link rel="stylesheet" href="styles.css"> between your <head></head> tag. Then only all the CSS written in your external stylesheet will be applied.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Hello World!</h1>

<h2>I am formatted with a linked style sheet.</h2>

<p>Me too!</p>

</body>
</html>

styles.css

body{
 background-color: red;
}

Upvotes: 1

Related Questions