CODEWITHSUNDEEP
htmlcss
Saqib Ali
Saqib Ali

Reputation: 23

External CSS file not working properly

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>

Upvotes: 0

Views: 498

Answers (3)

satya
satya

Reputation: 1185

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");
}

Upvotes: 0

user5992646
user5992646

Reputation:

It should be:

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

Upvotes: 0

Rick Runyon
Rick Runyon

Reputation: 4354

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

Upvotes: 6

Related Questions