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.
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>
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.
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
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: