External CSS file not working properly

Question

My CSS style sheet header is not working. It works best in internal stylesheet or embedded stylesheet, but did not work when its code in external stylesheet. Only the header class did not wok but other code working best.

        .header1{
            background-color: brown ;
            padding: 20px;
            background-image: url("pics/saqib.png");
        }
        #pic{
            float: right;
        }
        ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

        li {
                float:left;
                background-color: #333;
                border-top-left-radius: 35%;
                border-top-right-radius: 35%;
                margin-left:2px;
            }

        li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            /* Change the link color to #111 (black) on hover */
        li a:hover {
                background-color: green;
        }
        .navbar{
            padding: 20px;
            margin-top: 150px;
        }
        /* End nav bar */
        .skin{
            background-color: lightblue;
        }
        .table {
            margin-top: 0px;
            width: 100%;
        }
        .table .sidebar{
            border-right: 2px solid black;
            width: 20%;
        }
        .footer{
            background-color: blue;
            padding: 20px;
            padding: 100px;
        }
        .left{
            float: left;
            display: block;
            width: 40%;
            color: gray;
            border-right: 2px solid white;
            border-color: gray;
            padding-right: 70px;
        }
        .right{
            float: right;
            display: block;
            width: 40%;
            color: gray;
        }
        pre a{
            font-family: helvatic, sanshrif;
            font-size: 15px;
            color: white;
        }
        pre a:hover{
            color: green;

        }

<!DOCTYPE html>
<html>
    <head>
            <title>My Page</title>
            <link rel="stylesheet" type="text/css" href="mypage.css"/>
            <meta charset="UTF-8"/>
    </head>
    <body>
            <header class="header">
                <div id="pic"> <img src="pics/saqib.png"/></div>
                    <div class="navbar">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Software</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">About us</a></li>
                        </ul>
                    </div>
            </header>
            <div class="skin">
                <table class="table">
                        <tr>
                            <td class="sidebar">
                                    This is sidebar
                            </td>
                            <td style="padding: 50px;">
                                <h1>My First Website</h1>
                                <p> A collection of all steps to complete a process in known as Transaction. DBMS  should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                <footer class="footer">
                                    <div class="left">
                                        <pre><a href="#">Home</a>  |  <a href="#">Software</a>  |  <a href="#">Contact Us</a>  |  <a href="#">About us</a></pre>
                                    </div>
                                    <div class="right">
                                        The most important function of DBMS 
                                        is data processing. It includes creation,
                                        storage and arrangements of data in database.
                                    </div>
                                </footer>
                            </th>
                        </tr>
                </table>
            </div>
    <body>
</html>

Rick Runyon · Accepted Answer · 2016-03-04 17:23:44Z

6

Your stylesheet defines a .header1 class but your HTML is looking for header. Make those the same.

answered Mar 4, 2016 at 17:23

Rick Runyon

4,3741 gold badge19 silver badges15 bronze badges

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

Comments

Jean-Sébastien Pédron · Accepted Answer · 2016-03-26 14:43:43Z

0

You can change in either one place to make it work:

In HTML:

<header class="header">

to:

<header class="header1">

or in CSS:

.header1 {
    background-color: brown;
    padding: 20px;
    background-image: url("pics/saqib.png");
}

to:

.header {
    background-color: brown;
    padding: 20px;
    background-image: url("pics/saqib.png");
}

edited Mar 26, 2016 at 14:43

Jean-Sébastien Pédron

2,1471 gold badge17 silver badges28 bronze badges

answered Mar 4, 2016 at 18:40

satya

1,1958 silver badges12 bronze badges

Comments

user5992646 · Accepted Answer · 2016-03-04 17:28:46Z

0

It should be:

.header{
            background-color: brown ;
            padding: 20px;
            background-image: url("pics/saqib.png");
        }

answered Mar 4, 2016 at 17:28

user5992646

Collectives™ on Stack Overflow

External CSS file not working properly

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related