CSS: En grundläggande komponent för webbdesign
Utan CSS skulle webbplatser vara ganska tråkiga. Detta stilarksspråk är fundamentalt för hur text, storlek, färger och element placeras på en webbsida.
Vad är CSS egentligen?
CSS, eller Cascading Style Sheets, är ett språk som specificerar hur HTML-element ska presenteras visuellt, antingen på en skärm eller på papper. Det introducerades av World Wide Web Consortium (W3C) 1996.
HTML-element var initialt inte konstruerade för att innehålla formateringsinstruktioner direkt i sin struktur. Utvecklare använde enbart markering för webbsidans struktur. Införandet av taggar som `` i HTML 3.2 medförde nya komplikationer.
Med webbplatser som använder varierande bakgrunder, typsnitt och komplexa stilar blev det kostsamt och omständligt att omstrukturera kod. W3C lanserade CSS för att hantera dessa utmaningar, och språket har kontinuerligt utvecklats sedan dess.
Varför är CSS nödvändigt?
#1. CSS är effektivt
CSS befriar oss från att ständigt behöva ange detaljer som typsnitt, justeringar av element, kantlinjer, färger, bakgrundsstilar och storlekar för varje enskild webbsida.
#2. Tidsbesparingar
Genom att ändra en extern CSS-fil kan du snabbt justera utseendet på hela webbplatsen.
#3. Anpassningsbarhet för olika enheter
Dagens webbanvändare surfar via enheter med varierande skärmstorlekar, som datorer, surfplattor och smartphones. CSS möjliggör skapandet av webbsidor som anpassar sig efter skärmstorleken.
#4. Lätt att underhålla applikationer
Moderna webbapplikationer utvecklas ständigt. CSS underlättar ändringar av enskilda komponenter eller hela webbplatsen utan större påverkan på den underliggande kodbasen.
Hur fungerar CSS ihop med HTML för att bygga webbplatser?
HTML är standardspråket för att skapa webbsidor, medan CSS bestämmer hur dessa webbsidor (skapade med HTML) ska se ut. En väldesignad webbsida använder HTML för text, bildlänkar och struktur, medan CSS styr stilen.
En HTML-fil kan antingen länkas till en separat CSS-fil med en länk-tagg, eller använda interna eller inline CSS-stilar. En HTML-fil kan innehålla en rubrik som `<h1>` och ett stycke med `<p>`. Med CSS kan du instruera webbläsaren att visa text i ett stycke i fetstil, eller att rubriken ska vara 50 pixlar och grön.
Vi kommer att visa hur HTML och CSS samarbetar i nästa avsnitt.
Olika typer av CSS
#1. Extern CSS
För att CSS ska klassificeras som extern, behövs det en HTML-fil och en separat CSS-fil med filändelsen .css, exempelvis style.css. CSS-filen kopplas till HTML-dokumentet med hjälp av en länk-tagg.
Exempel på en extern 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 kopplas till detta HTML-dokument:
<link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
<div class = "main">
<div class ="GF">Geek Flare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
Länk-taggen länkar den externa formatmallen till HTML-dokumentet, medan `href`-attributet anger platsen för CSS-filen.
Den resulterande webbsidan ser ut så här:
Extern CSS är det mest rekommenderade tillvägagångssättet eftersom det underlättar skapandet av återanvändbara komponenter och universella ändringar av kodbasen.
#2. Intern CSS
Intern CSS är lämpligt när du har ett enskilt HTML-dokument som du vill stilera unikt. Stilreglerna skrivs inuti HTML-dokumentets head-sektion.
Här är ett exempel på intern CSS:
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
Den renderade webbsidan visas på följande sätt:
Intern CSS är sällan optimal eftersom det gör koden i HTML-dokumentet onödigt stor, vilket kan påverka sidans laddningshastighet.
#3. Inline CSS
Inline CSS applicerar stilen direkt inom body-taggen. Du kan formatera ett stycke, en rubrik eller en div med inline CSS.
<title>Inline CSS</title> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p>
Det resulterande dokumentet kommer se ut så här:
Inline CSS är inte att föredra om du vill skala din webbapplikation, då det är tidskrävande att lägga till CSS-egenskaper för varje enskild HTML-tagg.
Utforska några av de bästa onlinekurserna och böckerna för att lära dig CSS på djupet.
Skapa responsiva webbplatser med HTML och CSS
Denna kurs om att bygga responsiva webbplatser lär dig att skapa webbplatser med HTML5 och CSS3. Inga förkunskaper i webbutveckling krävs. Kursen går igenom grundläggande koncept som boxmodellen, hur man löser konflikter mellan väljare, positioneringsscheman och arv.
Detta är en perfekt kurs för den som vill lära sig brainstorma, planera, skissa, koda, testa och optimera en professionell webbplats.
Avancerad CSS och Sass
Kursen ”Avancerad CSS och Sass” lär ut hur CSS fungerar i detalj genom att utforska koncept som kaskad, specificitet och arv.
Kursen innehåller många moderna CSS-tekniker för att skapa responsiva webbsidor. Den introducerar också Saas och hur man använder det i projekt för att hantera CSS, globala variabler och media queries.
Kursen är också passande för de som vill lära sig CSS-animationer, då den går igenom @keyframes, animation och övergångar.
Lär dig CSS
Codecademys kurs ”Learn CSS” lär ut hur man använder CSS för att omvandla HTML till visuellt tilltalande webbplatser. Kursen är indelad i 8 lektioner och har 6 projekt för att testa dina kunskaper.
De viktigaste lärdomarna i kursen är hur man stilar HTML-element, länkar HTML- och CSS-filer samt skapar unika layouter för webbsidor.
Bygg din första webbsida med HTML och CSS
Kursen ”Bygg din första webbsida” lär ut hur man skapar responsiva webbplatser med HTML5 och CSS3. Denna gratiskurs är indelad i 4 moduler och tar ca 10 timmar att genomföra. Inga förkunskaper i programmering behövs.
Grunderna i CSS
”CSS Basics” är skapad av W3Cx. Några av de saker du kommer att lära dig i denna kurs är bästa praxis inom webbdesign, grundläggande CSS-väljare samt hur man väljer CSS-egenskaper. Kursen är indelad i 5 moduler och kräver ca 5 veckors studier med 5-7 timmar per vecka.
Introduktion till CSS3
Denna kurs i CSS3 introducerar ”Cascading Style Sheets”. Kursen är utarbetad av University of Michigan och lär ut hur man skriver CSS-regler, utvecklar goda programmeringsvanor och testar sin kod. Kursen tar ca 12 timmar att genomföra och ett delbart certifikat ges vid slutförandet.
Introduktion till HTML och CSS
Denna introduktionskurs i HTML och CSS lär ut hur man skapar strukturerade och snygga webbplatser med HTML och CSS. Kursen lär eleverna att skapa webbplatser med en trädliknande struktur och sedan styla dem med CSS.
Denna gratiskurs passar för nybörjare och erbjuder en inlärningsmodell i egen takt. Kursen tar ca 3 veckor att genomföra och undervisas av branschexperter.
CSS handledning
CSS Tutorial är en gratiskurs på W3schools. Kursen är indelad i kapitel för att underlätta inlärningen. Varje kapitel innehåller exempel och övningar. Plattformen har en online-editor där du kan experimentera med olika koncept via knappen ”Try it Yourself”.
CSS: Den definitiva guiden
Boken ”CSS: The Definitive Guide” är användbar om du vill lära dig grunderna i CSS, från väljare och specificitet till kaskad. Boken går även in i detalj på flexbox, positionering och flyt-koncept.
Detta är även boken att välja om du vill lära dig hur man använder CSS för att skapa 2D- och 3D-transformationer, övergångar och animationer. ”The Definitive Guide” finns tillgänglig som både Kindle- och pocketversion.
Responsiv webbdesign med HTML5 och CSS
Denna bok om responsiv webbdesign med HTML5 och CSS lär ut hur man skapar framtidssäkra responsiva webbplatser med HTML5 och CSS.
När du har lärt dig teknikerna från denna bok kommer webbplatserna du skapar att fungera korrekt på datorer, surfplattor och mobiltelefoner. Boken är skriven på ett lättförståeligt sätt och finns i pocket- och Kindle-format.
HTML och CSS: Designa och bygg webbplatser
Den här boken om HTML och CSS är perfekt för alla, oavsett om du är hobbyprogrammerare, student eller professionell.
Författaren förmedlar innehållet med hjälp av infografik och livsstilsfotografier för att göra det enkelt att förstå olika koncept. Boken är presenterad i en unik struktur, vilket gör det enkelt att navigera mellan kapitlen.
Modern CSS
Boken ”Modern CSS: Master the Key Concepts of CSS for Modern Web Development” lär ut CSS genom kodexempel, diagram och skärmdumpar.
Boken introducerar färger, väljare, boxmodellen, kombinatorer och specificitet i de första kapitlen. Därefter introduceras stiltext, positionering, gradienter, gränser, Z-index och staplingssammanhang. Du kommer även att lära dig avancerade ämnen som övergångar, animationer, transformationer, flexbox och CSS-rutnät.
Avslutande ord
CSS:s betydelse för moderna webbplatser är oerhört stor. Utöver att göra webbsidor visuellt tilltalande, underlättar CSS navigation på webbplatser.
Att lära sig CSS kan vara enkelt om du använder resurserna som anges ovan. Några av kurserna är gratis, medan andra är avgiftsbelagda.
Fortsättningsvis kan du kolla in CSS-fuskblad för utvecklare och designers.