Summary  
This chapter covers how to import and apply a global CSS file in the root layout component to enforce consistent styles across an entire application.

General domain of usage  
Front-end web development (UI styling)

Globaalit CSS-tiedostot sisältävät tyypillisesti elementtejä, kuten asettelun, typografian ja muita yhtenäisiä suunnittelumalleja, jotka toistuvat sovelluksen eri osissa.

Jos siirryt kansioon `app/ui`, löydät tiedoston nimeltä `global.css`. Tämän tiedoston avulla voit soveltaa CSS-sääntöjä kaikkiin sovelluksesi reitteihin. Vaikka voit sisällyttää `global.css`-tiedoston mihin tahansa komponenttiin, suositeltavaa on lisätä se juuriasetteluun (`app/layout.tsx`), joka on sovelluksen pääkomponentti.

Lisätään globaalit tyylit sovellukseen. Siirry tiedostoon `app/layout.tsx` ja tuo `global.css`-tiedosto.

Kun globaalit tyylit on otettu käyttöön, sinun pitäisi nähdä seuraava näkymä, jos paikallinen kehityspalvelin on edelleen käynnissä: <a href="http://localhost:3000/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" >http://localhost:3000/</a>

Opi rakentamaan moderneja, suorituskykyisiä web-sovelluksia Next.js:llä. Luo projekteja, joissa on jäsennelty ulkoasu, tyylittely ja reititys sujuvaa navigointia varten. Nouda ja näytä dataa tehokkaasti samalla kun optimoit renderöintiä ja suorituskykyä. Toteuta edistyneitä ominaisuuksia, kuten sivutus, CRUD-toiminnot ja globaali haku dynaamisia web-sovelluksia varten. Julkaise Next.js-projektisi, yhdistä ne tietokantoihin ja lisää autentikointi käyttäjätietojen suojaamiseksi.

Käydään läpi, mitä tulee hallita ennen Next.js-kehykseen perehtymistä, mitä tältä kurssilta voi odottaa ja mitä tulet rakentamaan.

Projektin perustaminen, tyylien lisäämistavat sovellukseen sekä visuaalisten osa-alueiden, kuten kuvien, fonttien, sivujen ja asetteluiden käsittely.

Opi luomaan ja hallitsemaan sovelluksesi uusia näkymiä vaivattomasti sekä navigoimaan saumattomasti kaikkien sivujen välillä sisäänrakennetun reititysjärjestelmän avulla.

Ota Next.js-sovellus käyttöön GitHub- ja Vercel-tunnusten avulla. Perusta lisäksi tietokanta, joka toimittaa sovellukselle tarvittavat tiedot.

Pohdi, miten data hankitaan ja esitetään käyttäjälle selkeästi ja tehokkaasti.

Opi toteuttamaan moderneja verkkosivustojen ominaisuuksia, kuten sivutus, CRUD-toiminnot, globaali haku, lomakkeiden validointi ja paljon muuta.

Globaalin CSS-tiedoston Lisääminen

Käytännössä

Awesome!

Globaalin CSS-tiedoston Lisääminen

Käytännössä