Jump to content
Please Use CODE Tags

HTML and CSS Help

TurbulentWinds
By TurbulentWinds
in Programming
 Share
Posted

CSS will not link with HTML and I can't figure out what I'm doing wrong.

  

<html>
    <head>
        <title>Stuff</title>
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <div class="box">
            <h6>Stuff</h6>
            <center>
                <form action="" method="get" accept-charset="utf-8" target="_blank">
                    <input name="url" type="text" class="txt" id="input" placeholder="type url here.." onfocus="this.value='';" />
                    <input type="submit" class="btn" value="Go" />
                </form>
            </center>
            <p class="footer">Stuff</p>
        </div>
    </body>
</html>

 

and 

body {
    font: 14px Verdana, Arial, Helvetica, sans-serif;
    background-image: url("background.jpg");
}

.box {
    width: 400px;
    position: relative;
    left: 50%;
    top: 100%;
}

h6 {
    font: bold normal 1.2em Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    margin: 5px 5px 20px;
    padding: 10px;
}

.footer {
    font: .9em Verdana, Arial, sans-serif;
    margin: 8px;
    padding: 12px 8px 8px;
    text-align: left;
}

.credit {
    font: .8em Verdana, Arial, sans-serif;
    margin: 8px;
    padding: 8px;
    text-align: left;
}

input.txt {
    background: #F9f9f9 url(none) repeat scroll 0%;
    border: 1px solid #999999;
    font-size: 0.9em;
    padding: 5px;
    width: 320px;
}

input.btn {
    font-size: 0.9em;
    font-family: Arial, sans-serif;
    width: 80px;
    margin: 2px 0;
    padding: 5px;
}

I have no clue what's wrong. It's been years since I've had to do any HTML or CSS.

ORANGE SCREEN WINDOWS 10 VALUE OVER TIME - PC VS MAC

Spoiler

i5 7600k @ 5.0 GHz xD

Corsair H60 with Noctua NF-F12 iPPC-3000 PWM

MSI Z270-A Pro Motherboard

EVGA 1050 Ti SC

16 GB Corsair DDR4 @ 2400 MHz

500 GB Sandisk 950 PRO - Windows 10, Elementary OS, Zorin OS

500 GB Sandisk 850 PRO

1 TB WD Blue

Corsair CX750

1 x Corsair AF120 Quiet Red Led

Rosewell Tyrfing Case

Spoiler

EliteBook 8570w
i7 3720QM @ 2.6 GHz
Quadro K1000M
24 GB DDR3 @ 1600 MHz
250 GB SanDisk 850 EVO - Elementary OS, Windows 10, Debian

Spoiler

i5 3470 @ 3.2 GHz
EVGA 750 Ti SC
8 GB DDR3 @ 1333 MHz
240 GB SanDisk - Windows 10, Linux Mint

 

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, TurbulentWinds said: 

<link rel="stylesheet" href="/css/style.css">

 

The path is wrong, try this: 

<link rel="stylesheet" href="css/style.css">

My heart belongs to AMD but that doesn't mean I furiously hate Intel or NVIDIA :)

 

MAIN RIG AMD Ryzen 7 1700 | ASRock Fatal1ty X370 Gaming-ITX/ac | MSI HD7950 OC 3GB | G.Skill Ripjaws V 2x8GB @ 2666MHz (Samsung D-Die) | ADATA SX8200 480GB NVMe SSD & Seagate Barracuda 120 1TB SSD & WD Black 500GB | Sharkoon QB One

 

LAPTOP Lenovo Yoga Slim 7 (14ARE05) - AMD Ryzen 5 4500U | AMD Vega 8 (Renoir) | 16GB RAM | SKHynix PC601 512GB (OEM) | 1080p 300nit non-touch display

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433833
Share on other sites
Link to post
Share on other sites
Posted
3 minutes ago, TurbulentWinds said:

CSS will not link with HTML and I can't figure out what I'm doing wrong.

  


<html>
    <head>
        <title>Stuff</title>
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <div class="box">
            <h6>Stuff</h6>
            <center>
                <form action="" method="get" accept-charset="utf-8" target="_blank">
                    <input name="url" type="text" class="txt" id="input" placeholder="type url here.." onfocus="this.value='';" />
                    <input type="submit" class="btn" value="Go" />
                </form>
            </center>
            <p class="footer">Stuff</p>
        </div>
    </body>
</html>

 

and 


body {
    font: 14px Verdana, Arial, Helvetica, sans-serif;
    background-image: url("background.jpg");
}

.box {
    width: 400px;
    position: relative;
    left: 50%;
    top: 100%;
}

h6 {
    font: bold normal 1.2em Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    margin: 5px 5px 20px;
    padding: 10px;
}

.footer {
    font: .9em Verdana, Arial, sans-serif;
    margin: 8px;
    padding: 12px 8px 8px;
    text-align: left;
}

.credit {
    font: .8em Verdana, Arial, sans-serif;
    margin: 8px;
    padding: 8px;
    text-align: left;
}

input.txt {
    background: #F9f9f9 url(none) repeat scroll 0%;
    border: 1px solid #999999;
    font-size: 0.9em;
    padding: 5px;
    width: 320px;
}

input.btn {
    font-size: 0.9em;
    font-family: Arial, sans-serif;
    width: 80px;
    margin: 2px 0;
    padding: 5px;
}

I have no clue what's wrong. It's been years since I've had to do any HTML or CSS.

is it in the right folder ?

is the html file in a folder that you need to exit before going in the css folder ?

as is, you're trying to back out of a folder. remove the backslash before the css/style.css

~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433834
Share on other sites
Link to post
Share on other sites
Posted

This is my website, as you can see the style.css file and how I linked it to the HTML, hope this helps

IMG_3134.PNG

IMG_3135.PNG

Quote

"(1) High Frame Rates (2) Ultra Graphics Settings (3) Cheap>>>>Choose only two" Chevaishr

https://myanimelist.net/profile/AnalCavity

PCPartPicker URL

https://pcpartpicker.com/b/bsJ8TW 

 
 
Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433841
Share on other sites
Link to post
Share on other sites
Posted

press ctrl + f5, Chrome caches styles and this will force it to redownload it again.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433846
Share on other sites
Link to post
Share on other sites
Posted
  • Author
7 minutes ago, givingtnt said:

is it in the right folder ?

is the html file in a folder that you need to exit before going in the css folder ?

as is, you're trying to back out of a folder. remove the backslash before the css/style.css

I already tried it without the backslash and it didn't work. I just moved them to the same folder and changed to 

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

Still no luck.

ORANGE SCREEN WINDOWS 10 VALUE OVER TIME - PC VS MAC

Spoiler

i5 7600k @ 5.0 GHz xD

Corsair H60 with Noctua NF-F12 iPPC-3000 PWM

MSI Z270-A Pro Motherboard

EVGA 1050 Ti SC

16 GB Corsair DDR4 @ 2400 MHz

500 GB Sandisk 950 PRO - Windows 10, Elementary OS, Zorin OS

500 GB Sandisk 850 PRO

1 TB WD Blue

Corsair CX750

1 x Corsair AF120 Quiet Red Led

Rosewell Tyrfing Case

Spoiler

EliteBook 8570w
i7 3720QM @ 2.6 GHz
Quadro K1000M
24 GB DDR3 @ 1600 MHz
250 GB SanDisk 850 EVO - Elementary OS, Windows 10, Debian

Spoiler

i5 3470 @ 3.2 GHz
EVGA 750 Ti SC
8 GB DDR3 @ 1333 MHz
240 GB SanDisk - Windows 10, Linux Mint

 

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433885
Share on other sites
Link to post
Share on other sites
Posted
  • Author
7 minutes ago, vorticalbox said:

press ctrl + f5, Chrome caches styles and this will force it to redownload it again.

I have it stored locally.

ORANGE SCREEN WINDOWS 10 VALUE OVER TIME - PC VS MAC

Spoiler

i5 7600k @ 5.0 GHz xD

Corsair H60 with Noctua NF-F12 iPPC-3000 PWM

MSI Z270-A Pro Motherboard

EVGA 1050 Ti SC

16 GB Corsair DDR4 @ 2400 MHz

500 GB Sandisk 950 PRO - Windows 10, Elementary OS, Zorin OS

500 GB Sandisk 850 PRO

1 TB WD Blue

Corsair CX750

1 x Corsair AF120 Quiet Red Led

Rosewell Tyrfing Case

Spoiler

EliteBook 8570w
i7 3720QM @ 2.6 GHz
Quadro K1000M
24 GB DDR3 @ 1600 MHz
250 GB SanDisk 850 EVO - Elementary OS, Windows 10, Debian

Spoiler

i5 3470 @ 3.2 GHz
EVGA 750 Ti SC
8 GB DDR3 @ 1333 MHz
240 GB SanDisk - Windows 10, Linux Mint

 

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433889
Share on other sites
Link to post
Share on other sites
Posted
Just now, TurbulentWinds said:

I already tried it without the backslash and it didn't work. I just moved them to the same folder and changed to 


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

Still no luck.

you need backslashes, not fowrad slashes

~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433892
Share on other sites
Link to post
Share on other sites
Posted
  • Author
11 minutes ago, redteam4ever said:

The path is wrong, try this: 


<link rel="stylesheet" href="css/style.css">

I already tried it like that and it didn't work either.

ORANGE SCREEN WINDOWS 10 VALUE OVER TIME - PC VS MAC

Spoiler

i5 7600k @ 5.0 GHz xD

Corsair H60 with Noctua NF-F12 iPPC-3000 PWM

MSI Z270-A Pro Motherboard

EVGA 1050 Ti SC

16 GB Corsair DDR4 @ 2400 MHz

500 GB Sandisk 950 PRO - Windows 10, Elementary OS, Zorin OS

500 GB Sandisk 850 PRO

1 TB WD Blue

Corsair CX750

1 x Corsair AF120 Quiet Red Led

Rosewell Tyrfing Case

Spoiler

EliteBook 8570w
i7 3720QM @ 2.6 GHz
Quadro K1000M
24 GB DDR3 @ 1600 MHz
250 GB SanDisk 850 EVO - Elementary OS, Windows 10, Debian

Spoiler

i5 3470 @ 3.2 GHz
EVGA 750 Ti SC
8 GB DDR3 @ 1333 MHz
240 GB SanDisk - Windows 10, Linux Mint

 

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433893
Share on other sites
Link to post
Share on other sites
Posted
Just now, TurbulentWinds said:

I have it stored locally.

it still caches, give a try just to rule it out.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433894
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, vorticalbox said:

it still caches, give a try just to rule it out.

I did. Not a Chrome user though.

ORANGE SCREEN WINDOWS 10 VALUE OVER TIME - PC VS MAC

Spoiler

i5 7600k @ 5.0 GHz xD

Corsair H60 with Noctua NF-F12 iPPC-3000 PWM

MSI Z270-A Pro Motherboard

EVGA 1050 Ti SC

16 GB Corsair DDR4 @ 2400 MHz

500 GB Sandisk 950 PRO - Windows 10, Elementary OS, Zorin OS

500 GB Sandisk 850 PRO

1 TB WD Blue

Corsair CX750

1 x Corsair AF120 Quiet Red Led

Rosewell Tyrfing Case

Spoiler

EliteBook 8570w
i7 3720QM @ 2.6 GHz
Quadro K1000M
24 GB DDR3 @ 1600 MHz
250 GB SanDisk 850 EVO - Elementary OS, Windows 10, Debian

Spoiler

i5 3470 @ 3.2 GHz
EVGA 750 Ti SC
8 GB DDR3 @ 1333 MHz
240 GB SanDisk - Windows 10, Linux Mint

 

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433899
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, givingtnt said:

you need backslashes, not fowrad slashes

I'm not using any slashes in that bit.

ORANGE SCREEN WINDOWS 10 VALUE OVER TIME - PC VS MAC

Spoiler

i5 7600k @ 5.0 GHz xD

Corsair H60 with Noctua NF-F12 iPPC-3000 PWM

MSI Z270-A Pro Motherboard

EVGA 1050 Ti SC

16 GB Corsair DDR4 @ 2400 MHz

500 GB Sandisk 950 PRO - Windows 10, Elementary OS, Zorin OS

500 GB Sandisk 850 PRO

1 TB WD Blue

Corsair CX750

1 x Corsair AF120 Quiet Red Led

Rosewell Tyrfing Case

Spoiler

EliteBook 8570w
i7 3720QM @ 2.6 GHz
Quadro K1000M
24 GB DDR3 @ 1600 MHz
250 GB SanDisk 850 EVO - Elementary OS, Windows 10, Debian

Spoiler

i5 3470 @ 3.2 GHz
EVGA 750 Ti SC
8 GB DDR3 @ 1333 MHz
240 GB SanDisk - Windows 10, Linux Mint

 

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433906
Share on other sites
Link to post
Share on other sites
Posted

open developer console and look for errors

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433935
Share on other sites
Link to post
Share on other sites
Posted

The path is case-sensitive (at least on a server, Firefox can repair wrong case locally, no clue about other browsers). Are your folders named exactly the same like in the path?

 

Quick note:

If the style.css is in folder css and that folder is in the HTML location the link should be: 

<link rel="stylesheet" href="css/style.css">

If the style.css is in folder css and the HTML is in some other folder, but both have the same parent folder, the link should be: 

<link rel="stylesheet" href="../css/style.css">

My heart belongs to AMD but that doesn't mean I furiously hate Intel or NVIDIA :)

 

MAIN RIG AMD Ryzen 7 1700 | ASRock Fatal1ty X370 Gaming-ITX/ac | MSI HD7950 OC 3GB | G.Skill Ripjaws V 2x8GB @ 2666MHz (Samsung D-Die) | ADATA SX8200 480GB NVMe SSD & Seagate Barracuda 120 1TB SSD & WD Black 500GB | Sharkoon QB One

 

LAPTOP Lenovo Yoga Slim 7 (14ARE05) - AMD Ryzen 5 4500U | AMD Vega 8 (Renoir) | 16GB RAM | SKHynix PC601 512GB (OEM) | 1080p 300nit non-touch display

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433963
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I'm just gonna put the CSS in the HTML file. I'll deal with this some other time.

 

 

 

ORANGE SCREEN WINDOWS 10 VALUE OVER TIME - PC VS MAC

Spoiler

i5 7600k @ 5.0 GHz xD

Corsair H60 with Noctua NF-F12 iPPC-3000 PWM

MSI Z270-A Pro Motherboard

EVGA 1050 Ti SC

16 GB Corsair DDR4 @ 2400 MHz

500 GB Sandisk 950 PRO - Windows 10, Elementary OS, Zorin OS

500 GB Sandisk 850 PRO

1 TB WD Blue

Corsair CX750

1 x Corsair AF120 Quiet Red Led

Rosewell Tyrfing Case

Spoiler

EliteBook 8570w
i7 3720QM @ 2.6 GHz
Quadro K1000M
24 GB DDR3 @ 1600 MHz
250 GB SanDisk 850 EVO - Elementary OS, Windows 10, Debian

Spoiler

i5 3470 @ 3.2 GHz
EVGA 750 Ti SC
8 GB DDR3 @ 1333 MHz
240 GB SanDisk - Windows 10, Linux Mint

 

Link to comment
https://linustechtips.com/topic/834862-html-and-css-help/#findComment-10433994
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×