Ask coding questions

← Back to all posts
How can I get my CSS script to apply to all my webpages?
bennyrobert (47)

Hi, I'm new to HTML and am building a basic website. I've created a css script, but it only applies to my homepage (index.html), and all the other pages have nothing on them except the stuff I wrote.

I've tried a few scripts I found online, such as the ones at
https://stackoverflow.com/questions/7173096/how-to-apply-default-css-styling-to-all-html-pages

but none of them work. Can someone help me??

(BTW I am new to repl too and this is my first post so don't judge please)

Comments
hotnewtop
tussiez (1515)

@bennyrobert, you need to put the <link rel inside the <head> tag. Like this:

<head>
<title>never gonna give you up</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
tussiez (1515)

@bennyrobert Your <link tag is still outside of your <head> element. You need to put this inside the <head> element for this to work.

tussiez (1515)

How

Add a reference to the CSS in the <head>

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

Hmm, I learned to use type="text/css", and everyone isn't. Is this unnecessary

bennyrobert (47)

Well isn't that type="text/css" meant to be the name of you [email protected]

tussiez (1515)

@bennyrobert No, this is to define the type of the file

Coder100 (17018)

just add that CSS to all the websites.

see this?

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

this links your css to your html file. Add this to all your html files, but it won't work in folders. If you want it to work in folders,

<link rel="stylesheet" href="style.css">
bennyrobert (47)

Thanks, but I still have my issue. As you can see, I have put that in.
(https://storage.googleapis.com/replit/images/1611247427606_fb1b2c77644ed4ca5190359cd49678df.png)
!
But the page is still the same (and I have refreshed it)
Screenshot 2021-01-21 at 16.43.14
Screenshot 2021-01-21 at 16.43.04@Coder100

Coder100 (17018)

you already have a style on line 6 @bennyrobert

bennyrobert (47)

Yeah that's my main page, that's the only that [email protected]

Coder100 (17018)

@bennyrobert you didn't add the link to the other files

Coder100 (17018)

why do you have the link pasted twice

@bennyrobert

bennyrobert (47)

just forgot. But even without that, it doesn't [email protected]

Squirrel777 (138)

Just add

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

to all your html files

bennyrobert (47)

Thanks, but I still have my issue. As you can see, I have put that in.
(https://storage.googleapis.com/replit/images/1611247427606_fb1b2c77644ed4ca5190359cd49678df.png)
!
But the page is still the same (and I have refreshed it)
Screenshot 2021-01-21 at 16.43.14
Screenshot 2021-01-21 at 16.43.04@Squirrel777

Bookie0 (5988)

It's because you're only linking the css (<link rel="stylesheet" href="style.css">) on the index.html file. If you want to put it on the other files, paste the link <link rel="stylesheet" href="style.css"> in all the other .html files (allpages.html, brookhaven.html, contact.html, etc.

You would put it in the <head></head> tags.

Good luck!! :)

bennyrobert (47)

@Bookie0
Thanks, but I still have my issue. As you can see, I have put that in.
(https://storage.googleapis.com/replit/images/1611247427606_fb1b2c77644ed4ca5190359cd49678df.png)
!
But the page is still the same (and I have refreshed it)
Screenshot 2021-01-21 at 16.43.14
Screenshot 2021-01-21 at 16.43.04

Bookie0 (5988)

@bennyrobert could you send another picture? doesn't seem to work..

Bookie0 (5988)

@bennyrobert ok try to replace line 4 with this: <link href="style.css" rel="stylesheet" type="text/css" /> :)

bennyrobert (47)

It's still the same. I must have done something that isn't letting it work @Bookie0

RYANTADIPARTHI (6001)

Solution

if you want it for all pages, then just get the link of the css file, and apply it to all files.

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

Like that. Put that link in all your files.
That should work

bennyrobert (47)

Thanks, but I still have my issue. As you can see, I have put that in.
(https://storage.googleapis.com/replit/images/1611247427606_fb1b2c77644ed4ca5190359cd49678df.png)
!
But the page is still the same (and I have refreshed it)
Screenshot 2021-01-21 at 16.43.14
Screenshot 2021-01-21 at 16.43.04@RYANTADIPARTHI

RYANTADIPARTHI (6001)

@bennyrobert are you putting it with the head and body tags?