CSS Selectors Not Working on my HTML Code - Help

Hello, I am newly active and I am practicing coding as I learn. I wrote these lines of code on my Notepad++ and MS Notepad editors and the end result on the browser won’t reproduce all the selectors within my style tags. Is my code wrong somewhere or is should I adjust the editors??? Below are the lines of code. Cheers.

<!DOCTYPE html>



<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">


body { background-colour: palegreen; }

.red-colour {colour: red;}

.text-margin1 { left-margin: 15px; right-margin: 20px; } 

.text-margin2 { left-margin: 35px; right-margin: 30px; }

.text-border1 { top-border: 15px; bottom-border: 20px; }

.text-border2 { top-border: 35px; bottom-border: 30px; }

.font-family { font: Lobster; }

#burgundy-background { background-colour: burgundy; }  

{!-- I may add more id attributes later -->

p { border-type: thick;
    border-colour: green;
	border-radius: 10px;
	background-colour: yellow; }
	[type=checkbox] { margin: 10px 20px 10px 20px; }
	[type-checkbox1] {border: 20px 30px 20px 30px; }




<h class="red-colour"> Hola Todos </h1>	


<li> Mi pajena web esta fonciona equivocadamente. </li>

<li> No sabes que puedo haces para combiar eso. </li>

<li> No estoy feliz por eso. </li>



<li> Hola amigos esto es mi primera pajena web en espanol. </li>

<li> Soy un estudiente de la idioma quien le aprendice solo sin profesor y con las aplicaciones disponibles via las tecnologias modena </li>

<li> Pero me gustaria un dia de verdad vives en un pais espanol para experimentar la cultura sobre todos de elas quienes viven ahi </li>

<h2 type="box"> Traduciones de las palabras Espanol y Ingles. </h2>


<tr> <td> Abuelo </td> <td> Grand-father </td> </tr>

<tr> <td> Abuela </td> <td> Grand-mother </td> </tr>

<tr> <td> Padre </td> <td> Father </td> </tr>

<tr> <td> Madre </td> <td> Mother </td> </tr>

<tr> <td> Hijo </td> <td> Son </td> </tr> 

<tr> <td> Hija </td> <td> Daughter </td> </tr>

<tr> <td> Hermano </td> <td> Brother </td> </tr>

<tr> <td> Hermana </td> <td> Sister </td> </tr> 

<tr> <td> Tio </td> <td> Uncle </td> </tr>

<tr> <td> Tia </td> <td> Aunt </td> </tr>

<tr> <td> Primero/a </td> <td> Cousin </td> </tr>

<tr> <td> Amigo/a </td> <td> Friend </td> </tr>


<h3 align-text="right"> <img src="cap-pic.jpeg" width="750" height="750"/> Una foto del edificio Capitol a el Washington DC </h3>

<a href="#contacts-header"> Contactos </a>

<h> Abaho buscando los contactos de los jugadores de nuestro equipo de futbol. <br/>

Vas a decouvrir que muchas de los jugadores de verdad viven aqui con nosotros y no en las haciendas como piensamentos. </h>

<h2 id="contacts-header"> Contactos </h2>

<p> Miguel DiMarrio - 10 Calle Santiago Corra <br/>

Fabricio Olga - 15 Plaza Tropicana del Rive D'Oro <br/>

Cristobal Terrano - Apt 230 Edificio Victoria Herre </p>



<a target="_blank" href="https://www.youtube.com/" </a> Click aqui para ir a la pajena web de el Youtube. </p>



I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

The syntax of your CSS is broken. There are extra symbols that do not belong (a stray curly brace) which are causing the entire stylesheet to be ignored.
On top of that, most rules that you wrote do not exist in CSS (colour vs color, top-margin vs margin-top etc)

After you noticed that something was not working, the first step of troubleshooting should always be to check the syntax of your language. Use tools like google, W3Schools and MDN.
If that is too complicated, go back to simplest possible working solution, example: only using body selector to add background color.
Doing that develops your programming and debugging skills quicker and also respects other people’s time.

Have fun.

Hi @QueSi
Using an online editor can help you with things like grammatical errors whilst still being able to see what you’ve coded.
If I copy what you’ve pasted above, into Codepen, you can see it here:

I’ve added comments where you can address issues and look into the learning further.
If you create an account with Codepen, you’ll be able to “fork” the pen and work on it yourself.

Ciao, thanks for the edit ieahleen. I would keep this in mind.

Hi, I appreciate much your insight. I didn’t intend to disrespect if ever. I’m just kinda eager and going fast so the frustrating faux-pas I make. However you’ve been informative and I will debug as you’ve said. I hope to update on the matter subsequently. Thanks

you can put your code in an html validator, it is really useful: https://validator.w3.org/

Howdy @blueoctoltd!!! I did check the page and seen the corrections you made to my source code. I would correct the syntax errors. I may have to look into investing in such a platform too as I get more involved. Cheers.

Ok. Thanks for the tip. Say…, is it the html validator similar to the link from @blueoctoltd?

no, in an html validator you put your code and it says where there is wrong syntax

codepen is an online editor where you can save and show your code

Thank for clarifying @ieahleen