How do I implement my CSS into my HTML?

Question

1.00/5 (1 vote)

See more:

I am using a website that only allows html but my code has an html and css page. How do I insert my css code into the html page?

Here is my html.

<DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
    </head>
   <body>
        <header>

                <ul class="nav">
                    <li class="active"><a href="Website.html">Home</a></li>
                    <li><a href="world%20cup.html">World Cup</a>    </li>
                    <li><a href="sports.html">Sports</a></li>
                    <li><a href="schedule.html">Schedule</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </div>
        </header>
    </body>

</DOCTYPE html>

Here is my css.

.nav {
    float: right;
    list-style-type: none;
    list-style: none;
    padding: 10px 100px;
    margin: 20px;
}

.nav li {
    display: inline-block;
    margin: 10px 5px;
}

ul.nav li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    margin-bottom: inherit;
    padding: 5px 10px;
    letter-spacing: 2px;
    border: 1px solid #ffffff;
    
}

.nav li a:hover{
    background: #fff;
    transition: .4s;
    color: #000000
}

.nav li.active a{
    border: 2px solid white;
    background: #ffffff;
    color: #000;
}

What I have tried:

I've tried adding style into my code like this:

<DOCTYPE html>
    <stlye>
    li {float: right; list-style-type: none; list-style: none; padding: 10px 100px; margin: 20px;}
    </stlye>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
    </head>
   <body>
        <header>

                <ul class="nav">
                    <li class="active"><a href="Website.html">Home</a></li>
                    <li><a href="world%20cup.html">World Cup</a>    </li>
                    <li><a href="sports.html">Sports</a></li>
                    <li><a href="schedule.html">Schedule</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </div>
        </header>
    </body>

</DOCTYPE html>

Posted 25-Jun-19 1:29am

Jack the Christian

Updated 25-Sep-19 17:37pm

v4

Add a Solution

Comments

F-ES Sitecore 25-Jun-19 11:25am

The css in your style element is completely different from the css in the external file you were using.

Afzaal Ahmad Zeeshan 25-Jun-19 12:15pm

The case is most likely to be a problem in the way your CSS is being linked, please check if the file can be accessed from that path—as Solution 1 discusses.

4 solutions

Solution 1

Look at the Dev debug console in your browser and see if it can even find the file. (look for the "Network" tab in the console). It will show you the HTTP result code (usually 200 or 404), and if the result code is 404 it can't find the file.

If that's the case, you'll have to modify the <link> path to the file.

Posted 25-Jun-19 1:48am

#realJSOP

Solution 2

Did you tried to put <style> inside <head> instead of before ?
Have a look here:
HTML Tutorial[^]
HTML CSS[^]

Posted 25-Jun-19 1:56am

Patrice T

Updated 25-Jun-19 2:50am

v3

Solution 3

First, check your Style element's spelling in internal csss, its wrong.
So it will show your internal css as a Text in Your browser.

Second, remove your internal css style in HTML page because it is same as in StyleSheet File's css. so you don't need to write that twice. It doesn't let external sheet's css code implement properly.

So put all css in internal style element or in External file, Then Your css will implement properly.

Posted 22-Aug-19 18:57pm

Harsh.Shah.ifour

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jack the Christian · Accepted Answer · 2019-09-25T17:37:00

Solution 5

There are two things you need to do:

1. Fix up your Style element's spelling in internal css.
2. Remove your internal css style in HTML page.

Posted 25-Sep-19 17:37pm

Jack the Christian