????????????Get early access to this entire course now on Net Ninja Pro:
https://netninja.dev/p/qwik-crash-course-first-look
???????????? Access the course files on GitHub:
https://github.com/iamshaunjp/Qwik-Crash-Course-1st-Look
???????????? TypeScript Tutorial:
On Net Ninja Pro –
On YouTube –
????️???????? Image Link:
https://stock.adobe.com/uk/search/images?k=mario&search_type=default-view-results&asset_id=388785498
???????????? Qwik docs (getting started) –
???????????? VS Code –
All right then my friends so there's a Few different ways that we can add Styles to our different templates the First way is to use the global CSS file And this basically applies styles to the Entire site it's not scoped in the Slightest and they're all kind of in one Place so anything that you would have in Many different places in your site you'd Probably put selectors for those and Styles for those in the global CSS now What I'm going to do is delete all of This right here and I'm just going to Paste in a few of my own Styles instead So we have just a few variables declared Up here for two different colors so we Can use them later we have some styles For the body right here font family we Strip out the margin background color Display Flex in the column Direction and I'm in height of 100 V8 this is all kind Of nothing related to quick so I don't Want to go too deep into this but it Just means that everything now is going To be in a column on the website Then we have some styles for the H1 h2h3 And H4 font family of Geo font weight of Bold margin 0 and a font size of 1.8 M's Now these fonts right here we don't Actually have yet so if I save it then We might not see them over here while we See pop-ins but we don't see this one Right here which is meant to be Geo so What we need to do is go to the
Components folder then into a router Head over here and I'm just going to Paste in a link to oops I've done that Wrong I've pasted in my CSS again now I'm going to go to my course files and Copy the link To a Google font so we're loading in Geo And also pop-ins that's all we're doing All right so we're placing that inside The router head remember so this is Loaded for every single page and that Way we can use these different fonts Right here pop-ins and Geo so now if I Go over here and refresh don't even need To refresh it's loaded it already now we Can see that Geo font and also this font Which is Poppins awesome so that's the Global Styles we can apply those right Here inside the global CSS file now the Drawback of using that Global style Sheet is that everything's just in one Place and it's not very organized so What we can do instead is create style Sheets for particular components so Inside the about folder I could create a Style sheet for the about component so I Could call this I don't know about Dot CSS like so and then inside here I Could paste in just a selector for the Article so we give it a background color A bit of padding order radius box Shadow And imagine right so if I save that now It's not automatically going to be used For this component we have to use it
Inside here so I'm going to import that Style sheet first I'll say import or Call it about Styles but you can call it Whatever you want does it really matter About Styles and that comes from and It's dot forward slash because it's the Same directory isn't it and then it's About Dot CSS So then we have that now we need to use Them inside this component and the way We do that is by using a hook called use Styles like so so press on this to Import it right here and again it's got That dollar sign remember this is kind Of like a lazy loaded boundary and Inside here all we have to do is pass in The styles that we want to use so about Styles Like so all right okay so this right Here okay yeah so when we use CSS like This using use Styles we have to add on At the end a question mark and then it Has to say inline like so and only if we Add that will it work inside these quick Applications So if we save that now hopefully we'll See these article Styles applied to this Article so if we go over here we can see Now we get this big white background a Bit like a card around this article so That's worked now these things right Here these Styles will not be scoped to This component when we use this use
Styles hook so they apply to any Component which is currently showing on The page for example I can demo this by Coming over here and selecting anchor Tags and we'll say the color of those Should be orange now if I save that and Come over here in fact come to the Browser we can see all these anchor tags Inside a different component and also in The footer they've all been styled so These Styles right here about Styles When we use this hook they are not Scoped to this component they will apply To any component on the page now there Is a way around that we can use scoped Styles instead so what I'm going to do Is come back to the about CSS and get Ready of this for now and also copy this This article selector save it and then Cross those off now to demo this we'll Go to the contact folder and we'll Create a new file called Contact not CSS So we're going to style the contact page Now we're going to paste in this same Article selector then we're going to go Back to the component for the contact Page and we need to import You contact Styles up here and that Comes from and it's dot forward slash Contact dot CSS then remember question Mark in line so it works down here this Time we are going to say use Styles Scoped click on this to import it like So again it's got a dollar sign at the
End and then pass in the contact Styles like so all right so now let's Just test it save it and go over here if We go to forward slash contact we should See the same article Styles which we do Awesome but now if we go to Contact.css if we try to style something Else for example I could Target the Anchor tax and I would say the color is Orange Like so save it and it's not updated These over here or this down here same Again I could say something like the Foot attack And we'll give this a background of I Don't know blue because we have a footer Down here it's not styled it so those Styles are now scoped to this particular Component all right So that's the different ways we can add Styles we're probably going to be using A combination of all three as we go Through this course so next up we're Going to talk about the layout file over Here and also how we can add links to The different pages because at the Minute to go to the different pages we Have to manually type them up here so We'll take a look at those in the next Lesson
