Linking .htm Files with their .css files on Mac (TextEdit)


#1


Well Currently I am working on building my Own Website for Educational Purposes and I am referring to Codecademy for tips, ideas, suggestions that would help make my website better.


My Code doesn't show any error messages as it is TextEdit - macs equivalent to Windows Notepad. I am current trying to link my .htm file to the .css file. They both have been made using TextEdit. The line of code that is supposed to link these two documents is:
link rel="stylesheet" type="text/css" href=“style.css"
I have tried the other combination I found which was:
link rel="stylesheet" href=“style.css" type="text/css"
(Note that the < and > signs have not been displayed as the line of code is hidden)


This is my .htm line of code. Please do not copy  my code and state it as your own.
<!DOCTYPE html>
<html>
<head>
    <title>This Information is Classified...</title>
    <meta charset="utf-8"/>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href=“style.css">
</head>

<body>
    <header>
      <h1 class="page-title">This Information is Classified...</h1>
      <p class="page-description">This Information is Classified...</p>
    </header>

</body>
</html>

This is my .css Document. Please do not copy  my code and state it as your own. The name of the document is style.css.

html, body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
}

.page-title {
  text-align: center;
  font-weight: 100;
}

.page-description {
  border: 1px solid #000;
  text-align: center;
  padding: 30px;
}


I Hope that someone can clarify what I am doing wrong and help me correct it. This is just the start of a very complex website.
Thank you for your time


#2

the href attribute of <link> tells where the file is located and what it is called.

using:

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

would mean the css file is in the same directory as the html file, and is called style.css


#3

Hi,
Thank for the Quick Reply. The two documents are located on the Desktop. Do suggest me to create a dedicated folder and place the two documents in it for this line of code to work? or do you want me to alter the line of code in some way?


#4

no, Desktop is fine, is the file called style.css?


#5

Yes it is known as style.css.
I have move both files into one folder for simplicity and heres a screenshot of the names and how it displays when i open it.

<img src="//codecademy-</p>


#6


#7


#8

i found the problem:

href=“style.css">

you use (whatever that is) instead of quotation mark ("), which i guess causes the problem (they look similar but they are not the same)


#9

Thx I will try it out and post back if required. Thank you for your time...
Regards
Satanshu


#10

It works! I realized what the problem was. Thx for the help mate.
Regards
Satanshu


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.