12 beste online cursussen en boeken om CSS onder de knie te krijgen

Zonder CSS zouden websites er saai uitzien, aangezien deze stijltaal verantwoordelijk is voor de tekststijl, grootte, kleur en positionering op een webpagina.

Wat is CSS?

Cascading Style Sheets, afgekort als CSS, is een taal die beschrijft hoe HTML-elementen op een scherm of papier moeten worden weergegeven. CSS is in 1996 ontwikkeld door het World Wide Web Consortium (W3C).

HTML-elementen zijn niet ontworpen om tags te hebben die kunnen helpen bij het opmaken van een webpagina, en ontwikkelaars hoefden alleen een opmaak voor de pagina te schrijven. De introductie van tags zoals bij de lancering van HTML 3.2 zorgde voor nieuwe problemen voor ontwikkelaars.

Omdat webpagina’s gekleurde achtergronden, verschillende lettertypen en meerdere stijlen hebben, werd het herschrijven van code duur en pijnlijk. W3C-scholen introduceerden CSS om deze uitdagingen op te lossen, en het is in de loop der jaren blijven evolueren.

Waarom CSS?

#1. CSS is efficiënt

CSS bespaart ons de pijn van het toevoegen van tags zoals lettertype, elementuitlijning, rand, kleur, achtergrondstijl en grootte op elke webpagina.

#2. Tijd besparen

U kunt het uiterlijk van de hele website eenvoudig wijzigen door het externe CSS-bestand te wijzigen.

#3. Compatibiliteit met meerdere apparaten

Moderne webgebruikers bezoeken sites op gadgets met verschillende schermformaten, zoals pc’s, tablets en smartphones. CSS maakt het gemakkelijk om webpagina’s te maken die reageren op schermformaten.

#4. Eenvoudig te onderhouden applicaties

Moderne webapplicaties zijn altijd in ontwikkeling. CSS maakt het gemakkelijk om afzonderlijke componenten of zelfs de hele website te wijzigen zonder de codebase te wijzigen.

Hoe wordt CSS gebruikt met HTML om websites te maken?

HTML is een standaard opmaaktaal die wordt gebruikt voor het maken van webpagina’s. Aan de andere kant beschrijft CSS hoe webpagina’s (gemaakt met HTML) worden weergegeven. Een webpagina die is gemaakt met HTML en CSS heeft idealiter een HTML-bestand met tekst, afbeeldingslinks en HTML-tags.

Aan dit HTML-bestand kan een apart CSS-bestand gekoppeld zijn met behulp van een link-tag of er kunnen interne of inline CSS-stijlen worden gebruikt. Een HTML-bestand kan een kop hebben zoals

  Meldingen met hoge prioriteit inschakelen voor Gmail

en een alinea die wordt aangeduid met

. U kunt CSS gebruiken om de browser te instrueren om alle inhoud in de alinea vet weer te geven of zelfs om de inhoud van de koptekst 50 pixels en groen van kleur te maken.

In de volgende sectie zullen we demonstreren hoe HTML en CSS werken.

Typen CSS

#1. Externe CSS

Om CSS als extern te classificeren, moet er een HTML-bestand en een afzonderlijk CSS-bestand met de extensie .css zijn. Bijvoorbeeld stijl.css. Het CSS-bestand is gekoppeld aan het HTML-bestand/document met behulp van een link-tag.

Voorbeeld van een extern CSS-bestand:

.main {

    text-align:center;   

}

.GF {

    color:red;

    font-size:50px;

    font-weight:bold;

}

#TP {

    color:blueviolet

    font-style:bold;

    font-size:20px;

}

Het CSS-bestand kan worden gekoppeld aan het volgende HTML-document:

<!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>

De link-tag koppelt de externe stylesheet aan het HTML-document, terwijl het href-attribuut de locatie van de externe stylesheet specificeert.

De uiteindelijke webpagina zal er als volgt uitzien:

Externe CSS is de meest aanbevolen aanpak, omdat het eenvoudig is om herbruikbare componenten te maken en universele wijzigingen in de codebase aan te brengen.

#2. Interne CSS

Interne CSS is ideaal wanneer u een enkel HTML-document heeft dat u uniek wilt stylen. De stijlregelset is geschreven op het HTML-document in het hoofdgedeelte.

Dit is een voorbeeld van interne 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>

De gerenderde webpagina zal er als volgt uitzien:

Interne CSS is in de meeste gevallen niet ideaal omdat het de code in een HTML-document zo groot maakt, wat de laadsnelheid beïnvloedt.

#3. Geïntegreerde CSS

Inline CSS bevat de CSS-stijl in de body. U kunt bijvoorbeeld een alinea, een kop of zelfs een div opmaken met behulp van 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>

Het gerenderde document zal er als volgt uitzien:

Inline CSS is niet ideaal als u uw webapplicatie wilt schalen, aangezien het toevoegen van een CSS-eigenschap aan elke HTML-tag tijd kost.

Ontdek enkele van de beste online cursussen en boeken om CSS onder de knie te krijgen.

Bouw responsieve websites met HTML en CSS

Deze cursus responsive real-world websites bouwen leert hoe u responsieve websites kunt bouwen met behulp van HTML5 en CSS3. Je hebt geen voorkennis in webontwikkeling nodig om deze cursus te leren, waarin concepten worden verkend zoals het boxmodel, het oplossen van selectorconflicten, positioneringsschema’s en overerving.

Het is ook de ideale cursus als je wilt leren brainstormen, plannen, schetsen, coderen, testen en optimaliseren van een professionele website.

Geavanceerde CSS en Sass

Geavanceerde CSS- en Sass-cursussen laten je kennismaken met hoe CSS achter de schermen werkt door onderwerpen als de cascade, specificiteit en overerving te verkennen.

De cursus heeft veel moderne CSS-technieken voor het maken van krachtige, responsieve webpagina’s. De cursus introduceert Saas en het gebruik ervan in projecten tijdens het ontwerpen van CSS, globale variabelen en het beheren van mediaquery’s.

Het is ook de ideale cursus als je CSS-animatie wilt leren, omdat het gaat over @keyframes, animatie en overgang.

Leer CSS

Leer CSS van Codecademy leert hoe u CSS kunt gebruiken om HTML visueel om te zetten in opvallende websites. De cursus is verdeeld in 8 lessen en heeft 6 projecten om je begrip te testen.

De belangrijkste dingen die u in deze cursus leert, zijn hoe u styling kunt toevoegen aan HTML-elementen, HTML- en CSS-bestanden kunt verbinden en unieke lay-outs voor webpagina’s kunt maken.

Bouw uw eerste webpagina met HTML en CSS

De cursus Build your first web page leert hoe u HTML5 en CSS3 kunt gebruiken om responsieve websites te maken. Deze gratis cursus bestaat uit 4 modules en duurt ongeveer 10 uur. Je hebt geen voorkennis van programmeren nodig om deze cursus te volgen.

CSS-basisprincipes

CSS Basics is gemaakt door W3Cx. Enkele dingen die je leert in deze cursus zijn; best practices in webdesign, fundamentele CSS-selectors en het selecteren van CSS-eigenschappen. De cursus is opgesplitst in 5 modules; je hebt ongeveer 5 weken nodig om het te voltooien als je 5-7 uur per week studeert.

Inleiding tot CSS3

Deze cursus over CSS3 introduceert Cascading Style Sheets. De cursus is opgesteld door de Universiteit van Michigan en leert hoe je CSS-regels schrijft, goede programmeergewoonten aanleert en code test. Je hebt ongeveer 12 uur nodig om deze cursus te voltooien, die na voltooiing wordt geleverd met een deelbaar certificaat.

Inleiding tot HTML en CSS

Deze introductiecursus over HTML en CSS leert hoe u gestileerde en goed gestructureerde websites kunt maken met behulp van HTML en CSS. De cursus leert studenten hoe ze websites kunnen maken met behulp van een boomachtige structuur en deze vervolgens kunnen opmaken met behulp van CSS.

Deze gratis cursus is geschikt voor beginners en maakt gebruik van een leermodel op eigen tempo. Je hebt ongeveer 3 weken nodig om deze cursus te volgen die door experts uit de industrie wordt gegeven.

CSS-zelfstudie

CSS Tutorial is een gratis cursus op W3schools. De cursus is opgedeeld in hoofdstukken voor een beter begrip. Elk hoofdstuk geeft voorbeelden en oefeningen. Het platform heeft een online waar je kunt experimenteren met verschillende concepten via de “Probeer het zelf”-knop.

CSS: de definitieve gids

Het boek CSS: The Definitive Guide is handig als u de basisprincipes van CSS wilt leren, van selectors en specificiteit tot cascade. Het boek bevat ook flexbox-, positionerings- en zweeftrucs in detail.

Het is ook het boek dat u moet bestellen als u CSS wilt leren gebruiken om 2D- en 3D-transformaties, overgangen en animaties te produceren. De definitieve gids is beschikbaar in zowel Kindle- als paperbackversies.

Responsive webdesign met HTML5 en CSS

Dit boek over Responsive Web Design met HTML5 en CSS leert hoe je toekomstbestendige responsive websites kunt maken met behulp van HTML5 en CSS.

Nadat je de kneepjes van dit boek hebt geleerd, werken de websites die je maakt probleemloos op desktops, tablets en mobiele telefoons. Het boek is geschreven in een gemakkelijk te volgen formaat en is verkrijgbaar in paperback- en Kindle-formaat.

HTML en CSS: ontwerp en bouw websites

Dit boek over HTML en CSS is ideaal voor iedereen, of je nu een hobbyist, student of professional bent.

De schrijver levert de inhoud van dit boek door middel van informatiegrafieken en lifestyle-fotografie om het gemakkelijk te maken verschillende concepten te begrijpen. De bron wordt gepresenteerd in een unieke structuur, waardoor het gemakkelijk is om door alle hoofdstukken te bladeren.

Moderne CSS

Dit boek over moderne CSS: Master the Key Concepts of CSS for Modern Web Development leert CSS door middel van codevoorbeelden, diagrammen en schermafbeeldingen.

Het boek introduceert kleuren, selectors, doosmodellen, combinators en specificiteit in de eerste hoofdstukken. Het boek introduceert vervolgens stylingtekst, positionering, verlopen, randen, Z-index en stapelcontexten. Je leert ook geavanceerde onderwerpen zoals overgangen, animaties, transformaties, flexbox en CSS-rasters.

laatste woorden

De rol van CSS in moderne websites kan niet genoeg benadrukt worden. Naast het visueel aantrekkelijk maken van webpagina’s, maakt CSS het gemakkelijk om door verschillende webpagina’s te navigeren.

Het leren van CSS kan eenvoudig zijn als u de hierboven vermelde bronnen gebruikt. Sommige van deze cursussen zijn gratis, andere zijn betaald.

Vervolgens kun je CSS-spiekbriefjes voor ontwikkelaars en ontwerpers bekijken.

gerelateerde berichten