12 bästa onlinekurser och böcker för att bemästra CSS

Spread the love

Webbplatser skulle se tråkiga ut utan CSS eftersom detta stilspråk är ansvarigt för textstil, storlek, färg och placering på en webbsida.

Vad är CSS?

Cascading Style Sheets, förkortat CSS, är ett språk som beskriver hur HTML-element ska visas på en skärm eller papper. CSS skapades av World Wide Web Consortium (W3C) 1996.

HTML-element var inte utformade för att ha taggar som kunde hjälpa till att formatera en webbsida, och utvecklare behövde bara skriva en markering för sidan. Införandet av taggar som när HTML 3.2 lanserades introducerade nya problem för utvecklare.

Eftersom webbsidor har färgade bakgrunder, olika typsnitt och flera stilar, blev det dyrt och smärtsamt att skriva om koden. W3C-skolor introducerade CSS för att lösa dessa utmaningar, och det har fortsatt att utvecklas under åren.

Varför CSS?

#1. CSS är effektivt

CSS räddar oss från smärtan med att lägga till taggar som typsnitt, elementjusteringar, kantlinje, färg, bakgrundsstil och storlek på varje webbsida.

#2. Spara tid

Du kan enkelt ändra hela webbplatsens utseende genom att ändra den externa CSS-filen.

#3. Kompatibilitet med flera enheter

Moderna webbanvändare får åtkomst till webbplatser på prylar med varierande skärmstorlekar, såsom datorer, surfplattor och smartphones. CSS gör det enkelt att skapa webbsidor som är lyhörda för skärmstorlekar.

#4. Applikationer som är lätta att underhålla

Moderna webbapplikationer utvecklas hela tiden. CSS gör det enkelt att ändra enstaka komponenter eller till och med hela webbplatsen utan att ändra kodbasen.

Hur används CSS med HTML för att skapa webbplatser?

HTML är ett standardspråk som används för att skapa webbsidor. Å andra sidan beskriver CSS hur webbsidor (skapade med HTML) visas. En webbsida skapad med HTML och CSS kommer helst att ha en HTML-fil med text, bildlänkar och HTML-taggar.

  Hur man hanterar Microsoft Teams minnesanvändning

Denna HTML-fil kan ha antingen en separat CSS-fil länkad till den med hjälp av en länktagg eller använda interna eller inline CSS-stilar. En HTML-fil kan ha en rubrik som

och ett stycke betecknat med

. Du kan använda CSS för att instruera webbläsaren att visa allt innehåll i stycket i fet stil eller till och med göra rubrikinnehållet 50 pixlar och grönt.

Vi kommer att visa hur HTML och CSS fungerar i nästa avsnitt.

Typer av CSS

#1. Extern CSS

För att CSS ska klassificeras som extern bör det finnas en HTML-fil och en separat CSS-fil med filtillägget .css. Till exempel style.css. CSS-filen länkas till HTML-filen/dokumentet med hjälp av en länktagg.

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 länkas till följande 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>

Länktaggen länkar den externa formatmallen till HTML-dokumentet, medan href-attributet anger den externa formatmallens plats.

Den sista webbsidan kommer att se ut som följer:

Extern CSS är det mest rekommenderade tillvägagångssättet eftersom det gör det enkelt att skapa återanvändbara komponenter och göra universella ändringar i kodbasen.

#2. Intern CSS

Intern CSS är idealisk när du har ett enda HTML-dokument som du vill utforma unikt. Stilregeluppsättningen skrivs på HTML-dokumentet i head-sektionen.

Detta är ett exempel 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 renderade webbsidan kommer att visas enligt följande:

Intern CSS är inte idealisk i de flesta fall eftersom det gör koden i ett HTML-dokument så stor, vilket påverkar laddningshastigheten.

#3. Inline CSS

Inline CSS innehåller CSS-stilen i kroppen. Du kan till exempel formatera ett stycke, en rubrik eller till och med en div med inline 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 återgivna dokumentet kommer att se ut enligt följande:

Inline CSS är inte idealiskt om du vill skala din webbapplikation, eftersom det tar tid att lägga till en CSS-egenskap till varje HTML-tagg.

Utforska några av de bästa onlinekurserna och böckerna för att behärska CSS.

Bygg responsiva webbplatser med HTML och CSS

Denna kurs för att bygga responsiva webbplatser i verkligheten lär ut hur man bygger responsiva webbplatser med HTML5 och CSS3. Du behöver inga förkunskaper i webbutveckling för att lära dig den här kursen som utforskar begrepp som boxmodellen, lösa väljarkonflikter, positioneringsscheman och arv.

Det är också den perfekta kursen om du vill lära dig att brainstorma, planera, skissa, koda, testa och optimera en professionell webbplats.

Avancerad CSS och Sass

Avancerad CSS och Sass-kurs introducerar dig till hur CSS fungerar bakom kulisserna genom att utforska ämnen som kaskad, specificitet och arv.

Kursen har många moderna CSS-tekniker för att skapa kraftfulla, responsiva webbsidor. Kursen introducerar Saas och hur man använder det i projekt samtidigt som man skapar CSS, globala variabler och hanterar mediefrågor.

Det är också den perfekta kursen om du vill lära dig CSS-animering, eftersom den berör @keyframes, animation och övergång.

Lär dig CSS

Learn CSS by Codecademy lär ut hur man använder CSS för att omvandla HTML till iögonfallande webbplatser visuellt. Kursen är uppdelad i 8 lektioner och har 6 projekt för att testa din förståelse.

De viktigaste sakerna du kommer att lära dig från den här kursen är hur du lägger till stil till HTML-element, kopplar HTML- och CSS-filer och 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 använder HTML5 och CSS3 för att skapa responsiva webbplatser. Denna gratiskurs presenteras i 4 moduler och tar cirka 10 timmar att genomföra. Du behöver inga förkunskaper i programmering för att lära dig den här kursen.

Grunderna i CSS

CSS Basics skapas av W3Cx. Några av de saker du kommer att lära dig i den här kursen är; bästa praxis inom webbdesign, grundläggande CSS-väljare och hur man väljer CSS-egenskaper. Kursen är uppdelad i 5 moduler; du behöver cirka 5 veckor för att slutföra det när du studerar 5-7 timmar per vecka.

Introduktion till CSS3

Den här kursen om CSS3 introducerar Cascading Style Sheets. Kursen är förberedd av University of Michigan och lär ut hur man skriver CSS-regler, etablerar goda programmeringsvanor och testar kod. Du behöver cirka 12 timmar för att slutföra den här kursen som kommer med ett delbart certifikat när du är klar.

Introduktion till HTML och CSS

Den här introduktionskursen om HTML och CSS lär ut hur man skapar stilade och välstrukturerade webbplatser med HTML och CSS. Kursen lär eleverna hur man skapar webbplatser med en trädliknande struktur och sedan stylar dem med CSS.

Denna gratiskurs är lämplig för nybörjare och använder en inlärningsmodell i egen takt. Du behöver cirka 3 veckor för att slutföra den här kursen som branschexperter undervisar.

Handledning för CSS

CSS Tutorial är en gratis kurs på W3schools. Kursen är uppdelad i kapitel för enkel förståelse. Varje kapitel ger exempel och övningar. Plattformen har en online där du kan experimentera med olika koncept genom knappen ”Try it Yourself”.

CSS: Den definitiva guiden

CSS: The Definitive Guide-boken är användbar om du vill lära dig grunderna i CSS, från väljare och specificitet, till kaskaden. Boken också flexbox, positionering och flyttrick i detalj.

Det är också boken att beställa om du vill lära dig hur man använder CSS för att producera 2D- och 3D-transformationer, övergångar och animationer. The Definitive Guide finns i både Kindle- och pocketversioner.

Responsiv webbdesign med HTML5 och CSS

Den här boken 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 tricken från den här boken kommer webbplatserna du skapar att fungera felfritt på stationära datorer, surfplattor och mobiltelefoner. Boken är skriven i ett lätt att följa format och finns i pocket- och Kindle-format.

HTML och CSS: Designa och bygga webbplatser

Den här boken om HTML och CSS är idealisk för alla, oavsett om du är en hobby, student eller professionell.

Författaren levererar innehållet i denna bok genom informationsgrafik och livsstilsfotografering för att göra det lätt att förstå olika koncept. Resursen presenteras i en unik struktur, vilket gör det enkelt att bläddra igenom alla kapitel.

Modern CSS

Den här boken om 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, lådmodeller, kombinatorer och specificitet i de första kapitlen. Boken introducerar sedan stiltext, positionering, gradienter, gränser, Z-index och staplingssammanhang. Du lär dig även avancerade ämnen som övergångar, animationer, transformationer, flexbox och CSS-rutnät.

Slutord

CSS:s roll på moderna webbplatser kan inte betonas nog. Utöver att göra webbsidor visuellt tilltalande, gör CSS det enkelt att navigera på olika webbsidor.

Att lära sig CSS kan vara enkelt om du använder resurserna som anges ovan. Vissa av dessa kurser är gratis, medan andra är betalda.

Därefter kan du kolla in CSS-fuskblad för utvecklare och designers.