Nouran Samy Nouran Samy - 2 months ago 15
CSS Question

Internal CSS style heading

So this is my first html code and I'm having trouble with the internal style of the h1 heading although I wrote body style after h1 and it works fine and i removed all the inline styles in heading. Could someone tell me where the problem is ??



<head>
<style>
h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
</style>
</head>

<body>
<h1> My First trial of a site </h1>
</body>





This is the whole code as when i ran this code snippet above it on jsfiddle it worked fine but the whole code didn't show the styling.(If it is not okay to post the whole code please tell me to delete it as I'm a newbie here.)

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>

Page title

</title>
<style> <!-- Internal CSS style-->

h1{
color: DarkCyan !important;
border: 10px solid crimson !important;
font-family: courier !important;
text-align: center !important;
}
body{
color: #8e0035;
background-color: Beige;
font-family:verdana;
}

a:link{
color:Purple;
text-decoration: transparent;
}

a:visited{
color:grey;
text-decoration: transparent;
}
a:hover{
color: green;
text-decoration: underline;
}
</style>
</head>
<body>

<h1> My First trial of a site </h1>
<hr>
<p title = "Hover over the paragraph one more time!" style="color:
black;"><a href="https://www.sololearn.com target="_blank""> This link will
take you to sololearn site <br/> with a link anchored to it </a></p>
<img src="download (6).jpg" alt="An image here">
<hr>
<pre> <!-- font family in body doean't apply here -->
The preformatted tag

will preserve line breaks and spaces.
</pre>
<hr>

<!-- Formatting of text -->

<h3>Formatting of text:</h3>
<ul>
<li><b>Bold</b></li>
<li><strong>Strong</strong></li>
<li><i>Italic</i></li>
<li><em>Emphasized</em></li>
<li><mark>Marked</mark></li>
<li><small>Small</small></li>
<li><del>Deleted</del></li>
<li><ins>Inserted</ins></li>
<li><sub>Subscrpted</sub>text</li>
<li><sup>Superscripted</sup>text</li>
</ul>
<hr>

<h3>Quotations forms:</h3>
<p><ins>Small Quote:</ins><q>This one here with double quotes</q></p>
<p><ins>Block quote:</ins><blockquote>This is a large quote with
indentation</blockquote></p>
<p>This word here "<abbr title="Laughing Out Loud">LOL</abbr>" is written
using abbreviation. </p>
<p><bdo dir="rtl">This text will be written from right to left.</bdo>(Bi-
directional override)</p>
<p style="border: 1px solid crimson;"> This is a bordered Paragraph. </p>
<!--Inline CSS style-->

</body>
</html>

Answer Source

comments in css use of /* */ no <!-- -->.

Change :

<style> <!-- Internal CSS style-->

To:

<style> /* Internal CSS style */