Ecommerce Shopify WordPress Discussion

I am struggling to get a desired style/effect in my shopify(Ella theme)'s header when I target a class in my header.liquid file

Before I put forward my question I'd like to tell that I am a complete newbie in coding who has started to learn just a couple weeks ago. So my question is: I am trying to customize my theme in Shopify (more specifically Ella theme) and my target was to add a 'typewriter' affect to the text that I write in the header section. I went about as creating a complete new .css file in the assets section of the theme and then linked it to a new div class I created in header. liquid file. The code I am using for my "customertext.css" (this is the new file that I created) is: .customertext { background: #182028; display: flex; flex-direction: column; justify-content: center; height: 100vh; margin: 0; } h1 { font-size: 9vmin; color: #8bf; text-align: left; font-family: Lato, sans-serif; font-weight: 700; margin: 1rem 0 1rem 2rem; } @keyframes typing { 0.0000%, 27.3488% { content: ""; } 1.1395%, 26.2093% { content: "d"; } 2.2791%, 25.0698% { content: "de"; } 3.4186%, 23.9302% { content: "dev"; } 4.5581%, 22.7907% { content: "deve"; } 5.6977%, 21.6512% { content: "devel"; } 6.8372%, 20.5116% { content: "develo"; } 7.9767%, 19.3721% { content: "develop"; } 9.1163%, 18.2326% { content: "develope"; } 10.2558%, 17.0930% { content: "developer"; } 30.7674%, 51.2791% { content: ""; } 31.9070%, 50.1395% { content: "w"; } 33.0465%, 49.0000% { content: "wr"; } 34.1860%, 47.8605% { content: "wri"; } 35.3256%, 46.7209% { content: "writ"; } 36.4651%, 45.5814% { content: "write"; } 37.6047%, 44.4419% { content: "writer"; } 54.6977%, 75.2093% { content: ""; } 55.8372%, 74.0698% { content: "r"; } 56.9767%, 72.9302% { content: "re"; } 58.1163%, 71.7907% { content: "rea"; } 59.2558%, 70.6512% { content: "read"; } 60.3953%, 69.5116% { content: "reade"; } 61.5349%, 68.3721% { content: "reader"; } 78.6279%, 96.8605% { content: ""; } 79.7674%, 95.7209% { content: "h"; } 80.9070%, 94.5814% { content: "hu"; } 82.0465%, 93.4419% { content: "hum"; } 83.1860%, 92.3023% { content: "huma"; } 84.3256%, 91.1628% { content: "human"; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .typewriter { --caret: currentcolor; } .typewriter::before { content: ""; animation: typing 13.5s infinite; } .typewriter::after { content: ""; border-right: 1px solid var(--caret); animation: blink 0.5s linear infinite; } .typewriter.thick::after { border-right: 1ch solid var(--caret); } .typewriter.nocaret::after { border-right: 0; } @media (prefers-reduced-motion) { .typewriter::after { animation: none; } @keyframes sequencePopup { 0%, 100% { content: "developer"; } 25% { content: "writer"; } 50% { content: "reader"; } 75% { content: "human"; } } .typewriter::before { content: "developer"; animation: sequencePopup 12s linear infinite; } } /**/ and the new code that I added in header.liquid file by creating a new div under an already existing div is: <div class="customertext"> <h1 aria-label="Hi! I'm a developer"> Hi! I'm a <span class="typewriter nocaret"></span> </h1> <div> Moreover, I linked the new .css file by adding a tag in header.liquid which is: <link rel="stylesheet" href="{{ 'customertext.css' | asset_url }}" media="all" onload="this.media='all'"> I was trying to achieve a typewriter affect on my text in header section but the only thing this does is to add a Text which does take fontsize and color from css file but shows no typwriter affect. I hope I explained it properly. Thank you for taking time to read this.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.