• Login
Community
  • Login

Need Help Linking My CSS to HTML!

Scheduled Pinned Locked Moved Help wanted · · · – – – · · ·
3 Posts 2 Posters 4.6k Views
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J
    Jd Jones
    last edited by Feb 27, 2016, 10:07 PM

    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!

    C 1 Reply Last reply Feb 27, 2016, 10:26 PM Reply Quote 0
    • C
      Claudia Frank @Jd Jones
      last edited by Feb 27, 2016, 10:26 PM

      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

      1 Reply Last reply Reply Quote 1
      • J
        Jd Jones
        last edited by Feb 27, 2016, 10:34 PM

        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!

        1 Reply Last reply Reply Quote 0
        3 out of 3
        • First post
          3/3
          Last post
        The Community of users of the Notepad++ text editor.
        Powered by NodeBB | Contributors