Unable to get out put after adding the css tag

1

The page became blank on the chrome index.html
After adding css tag and refreshing it

1000033940
10000339401920Ă—1440 193 KB

1 Like
2

Use inline CSS or external CSS to check if CSS is working properly.

1 Like
3

Hi @jevilpatel568,

It seems like you have not closed the style tag and there are unnecessary line breaks or incorrect syntax in some places

Make the following changes and the code should work as expected

  1. Add closing </style> tag after the CSS rule for h1.
  2. Fix the incorrect line breaks and syntax errors within the span and p tags.

Here is the corrected code

<!DOCTYPE html>
<html>
<head>
<title>Best coffee store in India</title>
<style type="text/css">
h1 {
    color: blue;
}
</style>
</head>
<body>
<div style="background-color: grey;">
    <a href="https://www.boltoit.com" target="_blank"> 
        <img src="bolt_logo.png" alt="Bolt Logo">
    </a>
</div>
<div style="background-color: orange;">
    <p style="color: green;">
        This <span style="background-color: yellow"> is a paragraph. </span>
    </p>
    <p style="color: red;">
        This is paragraph 2
    </p>
</div>
<h1>This is Heading</h1>
<h2 style="color: #00ff2b">This is me</h2>
<h3>This is my cat</h3>
<h4>This is not me</h4>
<h5>This is a lion</h5>
<h6>This is my friend Raju</h6>
<div style="background-color: grey;">
    <img src="bolt_logo.png" width="296" height="80" alt="Bolt Logo">
</div>
</body>
</html>
1 Like
4

Thank you sir for your help

5

You forgot to close the style tag after writing your css. Just add closing style tag at the end of your css code. check for any unnecessary line breaks or incorrect formatting within the span and paragraph tags to keep the content clean. Fixing these should solve the issue.

6

If your webpage became blank after adding CSS styles, it suggests there may be syntax errors or issues with how the styles are applied. Start by checking your CSS file (styles.css) for any syntax mistakes, such as missing semicolons or mismatched curly braces. Use a CSS validator tool to ensure there are no errors in your CSS code.

Next, verify that the CSS file is correctly linked in your index.html file using <link rel="stylesheet" href="styles.css"> in the <head> section. Ensure the path (href) to the CSS file is correct relative to your index.html.

Additionally, clear your browser cache to ensure you’re seeing the most recent version of your webpage. You can do this by pressing Ctrl + F5 (Windows/Linux) or Cmd + Shift + R (Mac) to refresh the page without using cached files.

If the issue persists, use your browser’s Developer Tools (Ctrl + Shift + J or Cmd + Option + J in Chrome) to check for any error messages in the Console tab. Look for CSS parsing errors or warnings that might provide clues to what went wrong.

Lastly, consider temporarily simplifying your CSS styles or commenting out sections to isolate the problematic code. This approach can help identify which part of the CSS is causing the blank page issue. By following these steps, you should be able to diagnose and resolve the issue effectively.

7

Make sure that your html file and the css file in the same folder…
Also the style type is stylesheet and the css refrence link should be .css
Avoid inline css as it would create confusions

Check if there are any other html syntax error and You are good to go!

8

The style tag isn’t closed. Put </style> just above </head> and it should work.