Sublime Forum

Linking a CSS file to my HTML document

#1

Hi everyone. I’ve got a newbie question for you.

I’m having a lot of trouble linking my css file to my HTML document. I’m using Sublime Text on a Mac. I have a folder on my desktop and both the html file and the css file are in that folder. There are no subfolders, yet.

Here’s my code:

Test
</head>
<body>

Test

Hello

Testing

</body>

And here’s my CSS code:

/* style.css */

body
{
background: yellow;
}

.MainPageLink{
text-color: #FFFFE0
text-align: center
margin: auto
}

#missiontitle{
color:blue;
text-decoration: underline;
}

What am I doing wrong?
Can anyone please help me? Thanks a ton.

0 Likes

#2

It’s hard to see what you’re doing because you didn’t properly mark your HTML and CSS context as pre-formatted text, so it’s largely missing in the post above.

When posting things like this you should either select all of the (e.g. HTML or CSS) text and press the </> button to tell the forum that it’s preformatted text, or wrap the text in “code fences” to tell the forum that it should treat the text as special. As an example, code fences would look like this as you enter the text:

```
<html></html>
````

That said, if you had a file named style.css which contains the text:

body
{
    background: yellow;
}

And an HTML file named test.html which contains the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

</body>
</html>

As long as both files are present in the same local folder, using File > Open in your browser (e.g. Chrome or Safari) you should see an empty window with a yellow background, which proves that the HTML page is being rendered using the linked CSS.

0 Likes

#3

Thank you for this!

I’ve followed your steps but nothing. Is it something about how I saved the CSS file?
I ask because the file type given in the ‘get info’ section when i right click on the file is HTML doc. But for CSS it’s just Sublime text document. When I save the CSS file, I simple give it a name of style.css, correct?

0 Likes

#4

I finally figured it out. Thank you

1 Like

#5

i had the same issue. I opened my index.html on the chrome browser but it won’t read my main.css. I put in the background color red but nothing happened. I’ve checked my path and tags and it’s correct. How should I go about this? I’m using ST 3 on Mac High Sierra. Thanks.

0 Likes

#6

How do your files compare to the samples I provided above?

Some things to check would be the chrome developer tools to see if the console is displaying any errors regarding not being able to find the files, as well as verifying that the CSS is valid.

0 Likes