Html Question posted in
Some basic documentation can be found here.

How to external css code work for html code in same file

I am currently workingon my School HTML and CSS code that I have experienced before, however even I tried various method such as copying teacher’s example or refer to my past project, my CSS code doesn’t work at my HTML, Do you know how to fix this?
(My past CSS code and HTML code works normally)

HTML code

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
</head>
<link rel="stylesheet" type="text/css" href="Webstyle.css">
<body>
    <div id="header">
        <h1>Webpage Example</h1>
    </div>
    
    <div><img src="Myself.jpg" alt="Arata" height="300" class="center"> ##Allign to the right</div>

    <br>

    <div>
        <p>・Self Introduction</p>
        <p>・My work</p>
        <p>・Contact</p>
    </div>

    <div>
        <h1>Self Introduction</h1>
        <p> My Name : ○○</p>
        <p>My nationality : ○○</p>
        <p>My age : ○○</p>
        <p>Current job : ○○</p>
        <p>Skill : Drawing</p>
        <p>Hobby : Vudeo recordings, Video games</p>
        <p>Favourite food :Fried food</p>
    </div>

    
</body>
</html>

CSS code

@charset "UTF-8";
/* CSS Document */

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

The CSS code should works normally to make the title of webpage as black background in white text and aligned in center. I tried to fix my refering to my past work.

Tags:

3

Answers


  1. 0

    The link element needs to be moved inside your head tag.

    Login or Signup to reply.
  2. 0

    1. Changed background-colour to background-color in css file.

    2. Moved the <link> tag inside the <head> section.

    Example:

    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="Webstyle.css">
</head>

    Note: Ensure the Webstyle.css file is in the same directory as your HTML file, or adjust the href attribute in the <link> tag accordingly.

    Login or Signup to reply.
  3. 0

    You can check these things below:

    1. Make sure webstyle.css and your html file are in the same folder.
    2. Better not to use text in uppercase for file name. Webstyle.css (no), the right way would be webstyle.css (yes). It doesn’t affect much but still.
    3. background-colour (no), it should either be only background:black; or background-color:black; (yes)
    4. Always link style files in the <head></head> section after the meta tags.

    Try above and check again!

    See below image for naming the files:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search