Flexibel online leren
In je eigen tijd en tempo
Met persoonlijke begeleiding
HTML speelt een belangrijke rol op het internet, maar zonder CSS zal het op het web ontbreken aan stijl. In onze vorige blogs hebben we het gehad over het nut van JavaScript en HTML. In dit artikel gaan wij jou vertellen wat CSS is en waarom jij dit zou moeten leren.
CSS staat voor Cascading Style Sheets. Deze is verantwoordelijk voor de lay-out van een pagina en voegt de stijl en kleur toe. Wanneer we het over stijl hebben, hebben we het over zaken zoals de lettergroottes, lettertypes, tekstkleuren en de achtergrond. Bij het behandelen van HTML in de vorige blog, gebruikten we een menselijke metafoor om het beter te begrijpen. Toen vergeleken we HTML met het skelet van een mens, wat structuur geeft aan het lichaam. CSS kan gezien worden als de persoonlijke kenmerken. Denk hierbij aan de kleur van je huid en haar, de grootte van je lichaam en zelfs de kleding die je draagt. Het is simpelweg de look en de stijl die de bezoekers van een webpagina te zien krijgen.
CSS bepaald dus de stijl en look van een webpagina. Dit kan echter op drie verschillende manieren gedaan worden. Onderstaand wordt er een korte toelichting gegeven over hoe deze worden gebruikt.
Inline CSS heeft betrekking op een specifieke pagina-element in de HTML-pagina. Dit noem je dan Inline stijlen. In de HTML-pagina wordt dan zelf alle informatie meegegeven voor de opmaak. Het is voor te stellen dat een HTML-pagina lastig te onderhouden is wanneer er bij ieder element de stijl informatie wordt toegevoegd. Daarbij komt het vaak voor dat er veel elementen dezelfde opmaakkenmerken hebben. Om die opmaak dan op al die plekken aan te moeten passen is bijna niet te doen. Daarnaast zorgt het voor een onoverzichtelijke code. Inline CSS wordt daarom voornamelijk gebruikt wanneer er een unieke stijl toegepast moet worden op een specifiek element.
Het komt vaker voor dat veel elementen binnen een HTML-pagina dezelfde opmaakkenmerken krijgen. Daarom is het gebruik van Interne en Externe stijlen hiervoor beter.
Intern stijlen wordt gedaan wanneer verschillende HTML-pagina’s allemaal hun eigen stijl moeten krijgen. De code voor de stijl opmaak wordt dan opgenomen in de <head> van die specifieke HTML pagina. Dit is handig omdat al je stijlen dan centraal staan gedefinieerd op de verschillende HTML-pagina’s. Aan de andere kant kan het onoverzichtelijk worden omdat de code van deze pagina’s onoverzichtelijk worden. Gelukkig is er de mogelijkheid om deze Interne HTML segment in te klappen, dit wordt aangeboden door verschillende editors. </head>
Deze laatste manier van HTML stijlen is erg handig wanneer er vele stijlen zijn, of er meerdere pagina’s zijn met dezelfde stijl. Hierbij wordt er een los CSS-bestand (externe stylesheet) gemaakt. Dit is een tekstbestand die met de toevoeging .css wordt opgeslagen. Hierin worden de stijlen opgenomen die je toegepast wilt hebben op je webpagina’s. Het verschil met de voorgaande manieren van stijlen, is dat er hierbij geen tags opgenomen hoeven te worden. Dit omdat alles in dit bestand door de webpagina wordt geïnterpreteerd als styling-info. Je laat de HTML-pagina weten welke CSS-bestand erin geladen moet worden door in de <head> de regel: <link rel="stylesheet" href="/WincAcademy.css"> toe te voegen. WincAcademy.css is dan de naam van het CSS-bestand.</head>
Binnen het programmeren zijn er geen specifieke regels voor het gebruik van Inline, Intern of Externe styling. In de programmeer wereld zijn er echter wel ongeschreven regels dat je zoveel mogelijk extern probeert te stijlen. Dit omdat het simpelweg overzichtelijker is, los van de HTML-pagina bijgewerkt kan worden en in een keer al je HTML-pagina’s van een stijl voorzien kunnen worden. Mochten er specifieke aanpassingen nodig zijn voor een bepaalde HTML-pagina of HTML-element, dan kan er gebruik gemaakt worden van Interne en Inline stijlen.
Zoals je hebt kunnen opmerken speelt CSS een belangrijke rol bij webpagina’s. Het geeft bedrijven de mogelijkheid om met hun website anders en uniek te zijn en zich te kunnen onderscheiden van anderen. Zonder CSS zouden we naar saaie pagina’s kijken waarop zwart-witte teksten te lezen zijn, onaantrekkelijk. Net als HTML is CSS een gewilde vaardigheid in de online wereld van vandaag. Kijk maar naar verschillende job sites, type het trefwoord CSS in, en zie dat mensen met deze vaardigheid gewild zijn. Door CSS te leren werk je niet alleen aan je eigen vaardigheden, maar leer je de vaardigheid van de toekomst!
Wil je al aan de slag gaan met CSS en de basisprincipes ervan leren? Meld je dan aan voor onze opleiding Webdevelopment en leer naast CSS ook over HTML en andere web development vaardigheden. Ben je al zo enthousiast geworden dat je alles over de Front-end development wilt leren? Schrijf je dan in voor onze opleiding tot Front-end Developer!
