Where to enter code to change text to colour?


#1

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


#2

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!


#3

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>

#4

Don't change it, i just made visible!


#5

I was wondering why it was not the same like I have copied... may I ask how you have done that?


#6

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">

#7

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" />

html glossary - codecademy


#8

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


#9

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


#10

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


#11

Thank you for your tips and link. Much appreciated!


#12

There are three ways of doing this :slight_smile:

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>