Need Help Linking My CSS to HTML!



  • I can’t seem to connect my CSS to my HTML
    Here is my HTML:

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset=“UTF-8”>
    <link rel=“stylesheet” type=“text/css” href=“styles/style.css”>
    </head>

    <body>
    <title>Week 3 Work</title>

    <header>
    <img src=“images/logo.png” alt=“logo” class=“fullWidthContent”>
    <a>

    <h1>Fictional Company Ltd.</h1>

    </a class=“inlineheader”>

    </header>

    <nav>

    <ul>
    <li><a href=“index.html” alt= “Link to Home”>
    Home
    </a></li>
    <li><a href=“team.html” alt= “Link to Meet The Team”>
    Meet The Team
    </a></li>
    <li><a href=“products.html” alt= “Link to Products”>
    Products
    </a></li>
    </ul>

    </nav>

    <main>
    <p>This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.<p>

    <table>
    <caption>Fictional Company Earnings</caption>
    <tr>
    <th>2013 Profits</th>
    <th>2014 Profits</th>
    <th>2015 Expected Profits</th>
    </tr>
    <tr>
    <td>10 Million</td>
    <td>20 Million</td>
    <td>100+ Million</td>
    </tr>
    </table>
    </main>

    <footer>
    <p>Copyright Some Company 2015</p>
    </footer>

    </body>
    </html>

    Here is my CSS

    body
    {
    font-family:verdana;
    }
    header
    {
    background-color:#B2B2B2;
    padding:10px;
    }
    #inlindheader
    {
    display:inline;
    text-align:right;
    color:white;
    font-size:30px;
    }
    nav
    {
    background-color:black
    padding:5px;
    }
    nav ul li
    {
    list-style-type:none;
    background-color:#B2B2B2;
    display:inline;
    padding:15px;
    }
    nav ul li a
    {
    color:white;
    text-decoration:none;
    }
    nav ul li:hover
    {
    background-color:#8E8E8E;
    }
    footer
    {
    padding:10px;
    background-color:black;
    }
    footer p
    {
    text-align:center;
    color:white;
    }
    table
    {
    width:100%;
    border:1px solid black;
    border-collapse:collapse;
    font-size:20px;
    margin:20px;
    }
    th,tr,td
    {
    border:1px solid black;
    text-align:left;
    }

    the name of my css is “style.css”
    the name of my htlm is “index.html”
    sorry if my code isnt tidy as im a beginner.
    Thank you!



  • Hello @Jd-Jones,

    this is an notepad++ forum, so questions regarding npp are normally our target.
    You do have a html/css question which might be better addressed to such forums.
    In regards to your question, you did take care that the directory where index.html is
    has a subdirectory called styles and in this subdirectory there is the style.css?

    Cheers
    Claudia



  • I’m using Notepad++, Thank you I got it now, I forgot to put the style in the styles directory, it works fine now! Thank you so much!


Log in to reply