CODEWITHSUNDEEP
htmlcssheader
Furkan İlhan
Furkan İlhan

Reputation: 65

How can I use header in css file

I have an external CSS file name main.css. The ID of nav and footer are working fine but the ID of header doesn't work. When I put the header part in HTML file, it works.
Why does it not work in CSS file.

HTML File:

        <!DOCTYPE html>
        <html>
        <head>
            <link rel="stylesheet" href="main.css">
            <meta charset="UTF-8">
        </head>    
        <body>    
            <div id="header">
                <h1>Furkan İlhan</h1>
            </div>
            
            <div id="nav">
                Hakkında<br>
                Kariyer<br>
            </div>
        
            <div id="footer">
            Tüm Hakkı Saklıdır. Furkanilhan.com
            </div>
        </body>    
        </html>

CSS File:

    <style>        
        #header {
            background-color:black;
            color:white;
            text-align:center;
            padding:5px;            
        }
        
        #nav {
            line-height:30px;
            background-color:#eeeeee;
            height:300px;
            width:100px;
            float:left;
            padding:5px;    
        }
        
        #footer {
            background-color:black;
            color:white;
            clear:both;
            text-align:center;
            padding:5px;
        }
    </style>

The image of result

Upvotes: 1

Views: 4685

Answers (3)

Kaveri
Kaveri

Reputation: 1088

It seems the links require id to be defined in each <div></div> to work, not just the class name.

My case was a bit different, where the links didn't work with just class defined in html and .clasname defined in css file.

Upvotes: 0

user6314898
user6314898

Reputation:

Because You Use class="header" Property And External CSS Defined ID # Header.

So You Change

#header {

}

Use This Code In CSS

.header {

}

Work 100% Perfectly

Upvotes: 3

Con Stambo
Con Stambo

Reputation: 56

  1. Dhaval is wrong - You had it right with the #header since you have it as an id in your HTML.

  2. remove the <style></style> tags from your CSS sheet.

Let me know how you go

Regards,
Kostantinos

Upvotes: 2

Related Questions