I am having trouble linking my CSS file to my HTML file

Question

So...as the tile says, I am having a bit of trouble linking my CSS file to my HTML file. I link it, but it wont do anything. Nohing that I do in my file will change or work.

Here is my HTML code:

<!DOCTYPE html>
<html lang=en_US>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="©Isaac Guillen 2020">
        <meta name="keywords" content="Christian, Discord, Christianity, server">
        <meta http-equiv="refresh" content="30">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Christian discord server for christians who are looking to spread the word or people who are looking to expand their knowledge on Christianity">
        <link rel="stylesheet" href="./CSS/style.css">
        <title>Scripture Alone Official</title>
    </head>
    <body>
        <div class="Title">
            <h1 class="title-1">Welcome!</h1>
        </div>
        <section id="link-buttons">
            <div class="button">
                <a class="link-1" href="#">Home</a>
                <a class="link-2" href="#">About</a>
                <a class="link-3" href="#">contact</a>
                <a class="link-4" href="#">Join!</a>
            </div>
        </section>
    </body>
</html>

And just in case...this is my CSS file:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

What am I doing wrong?

Use the developer tools in the browser of your choice (often F12), check the network tab, see if the file is downloaded. If not, your path the the CSS file is incorrect — Jon P, Nov 12 '20 at 00:53
its WebDev/HTML/index.html for the html file. And for the CSS its, WebDev/CSS/style.css — SpiderDev_m8, Nov 12 '20 at 00:54
I did what you said and it says that the file failed and was not found. What do I do? — SpiderDev_m8, Nov 12 '20 at 00:58
You need to fix the path. See https://stackoverflow.com/questions/24028561/relative-path-in-html . Use `../CSS/style.css` or my preference `/CSS/style.css` - which is a site root relative path. — Jon P, Nov 12 '20 at 01:02

score 0 · Answer 1 · answered Nov 12 '20 at 01:49

0

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements Internal - by using a element in the section External - by using a element to link to an external CSS file

answered Nov 12 '20 at 01:49

VIshu GRade

1

score -1 · Answer 2 · answered Nov 12 '20 at 00:46

To link CSS to an HTML file, we use the tag that you put in the HTML’s section. The link will look like this:

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

Here’s a breakdown of the attributes contained within the link:

rel — defines the relationship between the file that hosts this command and the file defined in the href attribute. The standard value for this attribute is stylesheet.
type — defines the content of the linked file. In this tutorial, we set this attribute’s value to text/css. However, you can skip it altogether if you’re using HTML5.
href — specifies the location of the CSS file you want to link to the HTML. If the CSS file is in the same directory as the HTML file, you only need to enter the file name. Otherwise, you need to include the folder name in which you store the CSS file (example: CSS/stylesheet.css).
media — specifies the type of media the CSS rules are optimized for. In this tutorial, we use the screen value to imply its use for computer screens. If you want to apply the CSS rules to printed pages, you can set the value to print.

Once you’ve included the above link in your HTML file, save the changes and enter your website’s URL in the browser. Styles written in the CSS file should change the look of your website.

That's what I mean...I linked it but it doesn't do anything. I make the background black...and it doesn't do anything. — SpiderDev_m8, Nov 12 '20 at 00:48
On your example, the href is a little different. Try doing it like this: `href="style.css"` — R_D, Nov 12 '20 at 00:50

I am having trouble linking my CSS file to my HTML file

2 Answers2