How can I use header in css file

Question

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

you have defined header as class and referring it in css using #header..use .header and it will work — Dhaval Chheda
– Dhaval Chheda, Commented May 27, 2016 at 8:07
it is working for me in my text editor , you need to check on your end — Dhaval Chheda
– Dhaval Chheda, Commented May 27, 2016 at 8:15
yes it is in the same file. all others are work fine but only #header is not work. you can see in the image below @PranavKumar — Furkan İlhan
– Furkan İlhan, Commented May 27, 2016 at 8:16

user6314898 · Accepted Answer · 2016-05-27 08:54:48Z

3

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

answered May 27, 2016 at 8:54

user6314898

Sign up to request clarification or add additional context in comments.

Comments

Con Stambo · Accepted Answer · 2016-05-27 08:15:55Z

2

Dhaval is wrong - You had it right with the #header since you have it as an id in your HTML.
remove the <style></style> tags from your CSS sheet.

Let me know how you go

Regards,
Kostantinos

answered May 27, 2016 at 8:15

Con Stambo

564 bronze badges

1 Comment

Con Stambo Over a year ago

No problem, glad to have helped :)

Kaveri · Accepted Answer · 2019-05-10 15:25:01Z

0

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.

answered May 10, 2019 at 15:25

Kaveri

1,0882 gold badges14 silver badges22 bronze badges

Collectives™ on Stack Overflow

How can I use header in css file

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related