简体   繁体   中英

Html and css doesnt work

My css doesnt work (html and css file are in the same folder) and i tried to give all the path ton href ,here is my files.First file is menu2.html and second is menu2style.css.Can anyone help?

html:

<head>
    <title>
        test menu
    </title>

    <style>
        <rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">

    </style>
</head>

    <body>

        <nav>

        <A href="">PHOTO 1</A>
        <A href="">PHOTO 2</A>
        <A href="">PHOTO 3</A>
        <A href="">PHOTO 4</A>
        <A href="">PHOTO 5</A>

        </nav>

    </body>

and css:

nav{ background-color:#99FF66;}
<style>
    <rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">
</style>

The style element is for inline style. Don't put HTML to load an external stylesheet in it. Remove <style> and </style>


 <rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">

HTML start tags require a type before you put any attributes. In this case you need a link element.

<link rel...

The URL to your CSS should be:

  • To your CSS, not to an HTML document.
  • Either relative to the root of your website (eg /css/styles.css ) or relative to the current document ( styles.css since you say they are in the same folder). Not the full path on your local filesystem.

You don't need a type attribute here either.


Thus:

 <link rel="stylesheet" href="styles.css">

If you include an external stylesheet, you must not wrap the element in style tags.

<!-- styles in menu2style.css -->
<link rel="stylesheet" type="text/css" href="menu2style.css"> 

<!-- inline styles -->
<style>
   nav { background-color:#99FF66;}
</style>

Make sure you have the correct path specified in the href attribute!

Hmm.. I think you need to see the basics of HTML/CSS...

Here's an example of full html document :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="path/to/your/file/styles.css">
    </head>
    <body>

        <h1>My First Heading</h1>

        <p>My first paragraph.</p>

    </body>
</html>

You can see more examples here :

W3Schools

You can write your style in the head, by using style tag. if you want to external css you should use only link tag. you go to wrong way, because you are write the link tag in style tag.

 <link rel="stylesheet" type="text/css" href="Your_directory/menu2style.css">

you write the wrong extension of style css style.It should be the dot css(.css)

you have no need to write style tag and you missing the link rel for add css style sheet test menu

    <***link*** rel="stylesheet"  href="var/www/html/css_tests/menu2style.html" type="text/css">

<body>

    <nav>

    <A href="">PHOTO 1</A>
    <A href="">PHOTO 2</A>
    <A href="">PHOTO 3</A>
    <A href="">PHOTO 4</A>
    <A href="">PHOTO 5</A>

    </nav>

</body>

test menu

    <rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.html">

<body>

    <nav>

    <a href="url">PHOTO 1</A>
    <a href="url">PHOTO 2</A>
    <a href="url">PHOTO 3</A>
    <a href="url">PHOTO 4</A>
    <a href="url">PHOTO 5</A>

    </nav>

</body>

test menu

    <link rel="stylesheet" type="text/css" href="var/www/html/css_tests/menu2style.css">

<body>

    <nav>

    <img src="">PHOTO 1</A>
    <img src="">PHOTO 2</A>
    <img src="">PHOTO 3</A>
    <img src="">PHOTO 4</A>
    <img src="">PHOTO 5</A>

    </nav>

</body>

The problem is with your link where you have given the path of your CSS file. It becomes difficult for the browser to understand what kind of path he has to point in order to get the relevant styles.

What I have done is I have created a separate file named menu2style.css and I have refered in my HTML page. This is a kind of using stylesheet, and it is called External Style.

Step 1: Create a file with named menu2style.css (css is the extension of stylesheet just in case if you are not aware of)

    <style>
nav{
    background-color:#99FF66;
    }
</style>

Step 2: Refer the path of the CSS stylesheet that you just created in step1.

<link rel="stylesheet" type="text/css" href="C:/MyFolder/menu2style.css">

If you see above in the path I have given absolute path. This points the exact location in your file/ folder and renders the stylesheet from it onto a webpage.

Hope this helps.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM