Nettsteder ville se kjedelige ut uten CSS, da dette stylingspråket er ansvarlig for tekststil, størrelse, farge og plassering på en nettside.
Innholdsfortegnelse
Hva er CSS?
Cascading Style Sheets, forkortet til CSS, er et språk som beskriver hvordan HTML-elementer skal vises på en skjerm eller papir. CSS ble opprettet av World Wide Web Consortium (W3C) i 1996.
HTML-elementer ble ikke designet for å ha tagger som kunne hjelpe til med å formatere en nettside, og utviklere var bare pålagt å skrive en markering for siden. Innføringen av tagger som da HTML 3.2 ble lansert introduserte nye problemer for utviklere.
Siden nettsider har farget bakgrunn, forskjellige fonter og flere stiler, ble omskrivning av kode dyrt og smertefullt. W3C-skoler introduserte CSS for å løse disse utfordringene, og den har fortsatt å utvikle seg gjennom årene.
Hvorfor CSS?
#1. CSS er effektiv
CSS sparer oss fra smerten med å legge til tagger som font, elementjusteringer, kantlinje, farge, bakgrunnsstil og størrelse på hver nettside.
#2. Spare tid
Du kan enkelt endre hele nettstedets utseende ved å endre den eksterne CSS-filen.
#3. Kompatibilitet med flere enheter
Moderne nettbrukere får tilgang til nettsteder på gadgets med varierende skjermstørrelser, for eksempel PC-er, nettbrett og smarttelefoner. CSS gjør det enkelt å lage nettsider som er tilpasset skjermstørrelser.
#4. Applikasjoner som er enkle å vedlikeholde
Moderne webapplikasjoner er alltid i utvikling. CSS gjør det enkelt å endre enkeltkomponenter eller til og med hele nettstedet uten å endre kodebasen.
Hvordan brukes CSS med HTML for å lage nettsteder?
HTML er et standard markup-språk som brukes til å lage nettsider. På den annen side beskriver CSS hvordan nettsider (opprettet med HTML) vises. En nettside opprettet med HTML og CSS vil ideelt sett ha en HTML-fil med tekst, bildelenker og HTML-koder.
Denne HTML-filen kan enten ha en separat CSS-fil koblet til den ved hjelp av en lenkekode eller bruke interne eller innebygde CSS-stiler. En HTML-fil kan ha en overskrift som
og et avsnitt merket med
. Du kan bruke CSS til å instruere nettleseren til å vise alt innholdet i avsnittet med fet skrift eller til og med gjøre overskriftsinnholdet 50 piksler og grønt i fargen.
Vi vil demonstrere hvordan HTML og CSS fungerer i neste avsnitt.
Typer CSS
#1. Ekstern CSS
For at CSS skal klassifiseres som ekstern, bør det være en HTML-fil og en egen CSS-fil med en .css-utvidelse. For eksempel style.css. CSS-filen er koblet til HTML-filen/dokumentet ved hjelp av en link-tag.
Eksempel på en ekstern CSS-fil:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
CSS-filen kan kobles til følgende HTML-dokument:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Koblingskoden kobler det eksterne stilarket til HTML-dokumentet, mens href-attributtet spesifiserer det eksterne stilarkets plassering.
Den endelige nettsiden vil vises som følger:
Ekstern CSS er den mest anbefalte tilnærmingen da den gjør det enkelt å lage gjenbrukbare komponenter og gjøre universelle endringer i kodebasen.
#2. Intern CSS
Intern CSS er ideell når du har et enkelt HTML-dokument du ønsker å style unikt. Stilregelsettet er skrevet på HTML-dokumentet i head-delen.
Dette er et eksempel på intern CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Den gjengitte nettsiden vil vises som følger:
Intern CSS er ikke ideell i de fleste tilfeller da det gjør koden i et HTML-dokument så stor, noe som påvirker lastehastigheten.
#3. Innebygd CSS
Inline CSS inneholder CSS-stilen i kroppen. Du kan for eksempel style et avsnitt, en overskrift eller til og med en div ved hjelp av innebygd CSS.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Det gjengitte dokumentet vil se ut som følger:
Inline CSS er ikke ideelt hvis du vil skalere nettapplikasjonen din, siden det tar tid å legge til en CSS-egenskap til hver HTML-tag.
Utforsk noen av de beste nettkursene og bøkene for å mestre CSS.
Bygg responsive nettsteder med HTML og CSS
Dette bygge responsive virkelige nettsteder-kurset lærer hvordan du bygger responsive nettsteder ved hjelp av HTML5 og CSS3. Du trenger ingen forkunnskaper innen webutvikling for å lære dette kurset som utforsker konsepter som boksmodellen, løsning av velgerkonflikter, posisjoneringsskjemaer og arv.
Det er også det ideelle kurset hvis du ønsker å lære hvordan du idédylder, planlegger, skisserer, koder, tester og optimaliserer et profesjonelt nettsted.
Avansert CSS og Sass
Avansert CSS- og Sass-kurs introduserer deg til hvordan CSS fungerer bak kulissene ved å utforske emner som kaskade, spesifisitet og arv.
Kurset har mange moderne CSS-teknikker for å lage kraftige, responsive nettsider. Kurset introduserer Saas og hvordan du bruker det i prosjekter mens du bygger CSS, globale variabler og administrerer mediespørringer.
Det er også det ideelle kurset hvis du ønsker å lære CSS-animasjon, da det berører @keyframes, animasjon og overgang.
Lær CSS
Lær CSS av Codecademy lærer hvordan du bruker CSS til å transformere HTML til iøynefallende nettsteder visuelt. Kurset er delt inn i 8 leksjoner og har 6 prosjekter for å teste din forståelse.
De viktigste tingene du vil lære fra dette kurset er hvordan du legger til styling til HTML-elementer, kobler til HTML- og CSS-filer og lager unike oppsett for nettsider.
Bygg din første webside med HTML og CSS
Bygg din første nettside-kurs lærer deg hvordan du bruker HTML5 og CSS3 for å lage responsive nettsteder. Dette gratis kurset presenteres i 4 moduler og tar ca. 10 timer å fullføre. Du trenger ingen forkunnskaper om programmering for å lære dette kurset.
Grunnleggende om CSS
CSS Basics er laget av W3Cx. Noen av tingene du vil lære i dette kurset er; beste praksis innen webdesign, grunnleggende CSS-velgere og hvordan du velger CSS-egenskaper. Kurset er delt inn i 5 moduler; du trenger ca 5 uker for å fullføre det når du studerer 5-7 timer per uke.
Introduksjon til CSS3
Dette kurset på CSS3 introduserer Cascading Style Sheets. Kurset er utarbeidet av University of Michigan og lærer hvordan man skriver CSS-regler, etablerer gode programmeringsvaner og tester kode. Du trenger omtrent 12 timer for å fullføre dette kurset som kommer med et delbart sertifikat ved fullført.
Introduksjon til HTML og CSS
Dette introkurset om HTML og CSS lærer hvordan du lager stilige og velstrukturerte nettsider ved hjelp av HTML og CSS. Kurset lærer elevene hvordan de kan lage nettsteder ved hjelp av en trelignende struktur og deretter style dem ved hjelp av CSS.
Dette gratiskurset passer for nybegynnere og bruker en læringsmodell i eget tempo. Du trenger ca. 3 uker for å fullføre dette kurset som bransjeeksperter underviser.
CSS veiledning
CSS Tutorial er et gratis kurs på W3schools. Kurset er delt inn i kapitler for enkel forståelse. Hvert kapittel gir eksempler og øvelser. Plattformen har en online hvor du kan eksperimentere med forskjellige konsepter gjennom «Prøv det selv»-knappen.
CSS: The Definitive Guide
CSS: The Definitive Guide-boken er nyttig hvis du vil lære det grunnleggende om CSS, fra Selectors, og spesifisitet, til kaskaden. Boken har også flexbox, posisjonering og floattriks i detalj.
Det er også boken du kan bestille hvis du vil lære hvordan du bruker CSS til å produsere 2D- og 3D-transformasjoner, overganger og animasjoner. The Definitive Guide er tilgjengelig i både Kindle- og pocketversjoner.
Responsivt webdesign med HTML5 og CSS
Denne boken om responsiv webdesign med HTML5 og CSS lærer deg hvordan du lager fremtidssikre responsive nettsteder ved hjelp av HTML5 og CSS.
Etter å ha lært triksene fra denne boken, vil nettstedene du oppretter kjøre feilfritt på stasjonære datamaskiner, nettbrett og mobiltelefoner. Boken er skrevet i et lett-å-følge format og er tilgjengelig i pocket- og Kindle-format.
HTML og CSS: Design og bygg nettsteder
Denne boken om HTML og CSS er ideell for alle, enten du er hobbyist, student eller profesjonell.
Forfatteren leverer innholdet i denne boken gjennom informasjonsgrafikk og livsstilsfotografering for å gjøre det enkelt å forstå ulike konsepter. Ressursen presenteres i en unik struktur, som gjør det enkelt å bla gjennom alle kapitlene.
Moderne CSS
Denne boken om Modern CSS: Master the Key Concepts of CSS for Modern Web Development lærer CSS gjennom kodeeksempler, diagrammer og skjermbilder.
Boken introduserer farger, velgere, boksmodeller, kombinatorer og spesifisitet i de første kapitlene. Boken introduserer deretter stiltekst, posisjonering, gradienter, kantlinjer, Z-indeks og stablingskontekster. Du lærer også avanserte emner som overganger, animasjoner, transformasjoner, flexbox og CSS-rutenett.
Siste ord
Rollen til CSS på moderne nettsteder kan ikke understrekes nok. I tillegg til å gjøre nettsider visuelt tiltalende, gjør CSS det enkelt å navigere på ulike nettsider.
Det kan være enkelt å lære CSS hvis du bruker ressursene som er oppført ovenfor. Noen av disse kursene er gratis, mens andre er betalt.
Deretter kan du sjekke ut CSS-jukseark for utviklere og designere.