CSS introductie

CSS is een van de belangrijkste hulpmiddelen bij het ontwerpen en verfraaien van het uiterlijk van een website. We leren je de basis en het gebruik van CSS

CSS kan HTML-schoonheidsstijl veranderen

CSS is de taal die we gebruiken om een webpagina op te maken.

Wat is CSS?

CSS staat voor Cascading Style Sheets
CSS beschrijft hoe HTML-elementen moeten worden weergegeven op het scherm, op papier of in andere media
CSS bespaart veel werk. Het kan de lay-out van meerdere webpagina's tegelijk regelen
Externe stylesheets worden opgeslagen in CSS-bestanden

CSS-demo - Eén HTML-pagina - Meerdere stijlen!

Hier laten we één HTML-pagina zien met vier verschillende stylesheets. Klik op de "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links hieronder om de verschillende stijlen te zien:

Waarom CSS gebruiken?

CSS wordt gebruikt om stijlen voor uw webpagina's te definiëren, inclusief het ontwerp, de lay-out en variaties in weergave voor verschillende apparaten en schermformaten.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS heeft een groot probleem opgelost

HTML was NOOIT bedoeld om tags te bevatten voor het opmaken van een webpagina!

HTML is gemaakt om de inhoud van een webpagina te beschrijven, zoals:

<h1>Dit is een kop</h1>

<p>Dit is een alinea.</p>

Toen tags zoals <font> en kleurattributen werden toegevoegd aan de HTML 3.2-specificatie, begon het een nachtmerrie voor webontwikkelaars. Het ontwikkelen van grote websites, waarbij lettertypen en kleurinformatie aan elke pagina werden toegevoegd, werd een langdurig en kostbaar proces.

Om dit probleem op te lossen, heeft het World Wide Web Consortium (W3C) CSS gemaakt.

CSS heeft de stijlopmaak van de HTML-pagina verwijderd!

CSS bespaart veel werk!

De stijldefinities worden normaal gesproken opgeslagen in externe .css-bestanden.

Met een extern stylesheetbestand kunt u het uiterlijk van een hele website veranderen door slechts één bestand te wijzigen!

CSS-syntaxis

Een CSS-regel bestaat uit een selector en een declaratieblok.
CSS Introductie

De selector wijst naar het HTML-element dat u wilt opmaken.

Het aangifteblok bevat een of meer aangiften, gescheiden door puntkomma's.

Elke declaratie bevat een CSS-eigenschapsnaam en een waarde, gescheiden door een dubbele punt.

Meerdere CSS-declaraties worden gescheiden door puntkomma's en declaratieblokken zijn omgeven door accolades.

p {
  color: red;
  text-align: center;
}

Voorbeeld uitgelegd

p is een selector in CSS (het verwijst naar het HTML-element dat u wilt opmaken: <p>).
kleur is een eigenschap en rood is de eigenschapswaarde
text-align is een eigenschap en center is de eigenschapswaarde