Custom CSS not working at all

Hello, hoping someone is able to help?

I'm a complete beginner to CSS, however I have been trying to pick up the basics via online tutorials.

However, when I input even the most simple of commands, like changing the colour of a heading nothing happens? Is there anything I'm doing wrong?

Many thanks!

Hi @lucia_123, can you share a link to your website and/or share how you are writing your code?

Thank you so much for responding!

My website is embracekeratin.com , and I inputed the below code to the custom CSS section but absolutely nothing happened:

a {
  color: red;
}
h1 {
  colour: red;
}

I've also tried some other CSS copied and pasted in and it doesn't seem to alter anything?

For the <a> another style is using a rule that is more important than what you are writing, in this case you need to add ! important after the color code, which makes it stronger and ignores all the subsequent rules. 

For the <h1> there's a typo - in color code you should write color without 'u'.

However, I recommend you changing your header colors using the native tools instead. Go to Design > Style and change your main colors there 😉 

a{
  color: red!important;
}

h1{
  color: red;
}

Amazing- thank you so much! 

The colours was just a test to see if it worked as the original code I pasted in wasn't working. I'm actually trying to get the below code to hide the banner on a mobile device. Would you have any idea why this isn't working?

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 640px)";
@tablet:   ~"only screen and (min-width: 641px) and (max-width: 949px)";
/*

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
  #home img {
display: none;
}

#home .sqs-block-image img {
display: block;
}

#home {
background: url('https://static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.pnghttps://static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.pnghttps://static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.pnghttps://static1.squarespace.com/static/5d8bbd6cd46259208da1c786/t/5e0ba5f9bb6d5e7d7049d49b/1577821699741/Mobile+Banner.png');
background-repeat: no-repeat;
background-size: 100%;
}

/* Insert Code for Mobile Above This Line */
}

Hi @lucia_123, the code you shared looks confusing... which template are you using for your website?