Hi there,
I would like to practice using colour to change the website that I am working on. Maybe I have missed an important lesson, but I have not found any post that instructs me on where I should put the following code:
h1 {
colour:blue;
}
It just teaches me the code, which is great, but it does not help if I don’t know where to put it.
Any help appreciated,
Thanks
CSS uses US spelling, so you’ll need to change that to color.
That code will go into a file, that has a .css extension which you will link to from your HTML file.
Please ask more questions!
Hi, thanks for the spelling tip! I would never have noticed it, since I am so used to British English.
With regards to the .css extension that you are talking about: unfortunately I am a complete beginner and have no idea what that is. Is there not a simpler way to include code, like the way I have done below on Notepad++? It still does not work, but it would make sense to put it in there. Code Academy did not include an instruction for me on how to do this.
<html>
<body>
<div class="nav">
<div class="container">
<ul>
<li>Carna</li>
<li>Browse</li>
</ul>
<ul>
<li>Sign up</li>
<li>Log in</li>
<li>Help</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
h1{
color:blue;
}
</div>
</div>
Don’t change it, i just made visible!
I was wondering why it was not the same like I have copied… may I ask how you have done that?
The simplest way is to create a file with a .css extension. Call it something like style.css.
Put it in the same folder/directory as your index.html file.
Link the two together in the <head> ... </head> of your index.html file. Like this:
<link rel="stylesheet" href="style.css">
Well, okay. There are few problems, where is your html skeleton? Your entire head section is missing (<head></head>), let me guess, you did make a website course but not html + css? Anyway, you can make an internal stylesheet by adding style:
<style>
h1 { color: blue }
</style>
between your head tags (which are also missing) but it would be better to make a external stylesheet (the one with .css extension), from the codecademy glossary:
Links
Link elements are used to connect your document to a related resource
(very different from hyperlinks, which take you to another webpage when
you click on them). Links appear only in the head section of a document
so they do not alter the content, but only the presentation. Links are
most commonly used to connect to a stylesheet, script, favicon, or
alternate format of the page such as an RSS feed or PDF.
Example
<link type="text/css" rel="stylesheet" href="styles.css" />
i used backticks to make it visible:
```
<p>code between backticks is visible</p>
```
the backtick is located above your tab key on your keyboard, i also recommend to the html + css course, to gain a better understanding of html and css
Thank you for this. To answer your question:
I have not copied the full code, as I wanted to show an example of where I would put the colour code without copying everything. I am only beginning with unit 3 of ‘Building a website’, and I hope that I am going to express this correctly (since English is my second language):
I study better when I immediately practice after I have learned something. Unfortunately, while teaching students the code to make a certain font colourful (for example), they do not show you how to put it into the code that I am already working on. It will be a waste for me to learn everything, but not being instructed on how to implement it in my own code. Is this for beginners? If not, then I have chose the wrong course to begin with 
But you don’t want to css code in the middle of your html code.
Codecademy focuses mostly on coding, not how to implant this to build your own project. Well, i actually recommend html + css course first (link), make a website is fine as a beginner, but html + css would be better to have a good fundamental understanding of html + css
Thank you for your tips and link. Much appreciated!
There are three ways of doing this 
First Way :
You can add it you head as follows :
<head>
<style type="text/css">
h1 {
colour:blue;
}
</style>
</head>
Second Way :
You can add a css file to your html project with name “custom-style.css” add h1 { color: blue } to the custom-style.css and you can reference it as shown below:
<link type="text/css" rel="stylesheet" href="custom-style.css />
Third Way:
You can add it in-line style to the “H1” tag
Where ever you would like to add the style you can add it in the tag itself:
<h1 style="color:blue"></h1>