banner

1.2: Inline CSS

De eerste van de drie verschillende mogelijkheden om CSS toe te passen of webpagina's is die van Inline CSS. Zoals de naam al zegt, gaat het hier om CSS die in de lijn staat (oftewel op dezelfde regel). Deze vorm van CSS zal jullie zeer bekend voorkomen, aangezien het hier gaat om alle style-opties die je in de html5-cursus in style="" hebt gezet.
Voorbeelden van dit soort inline CSS waren:

  • <h1 style="color: green; font-familiy: Verdana, Arial, Helvetica, sans-serif">Kop 1</h1>
  • <p style="color: #442211; text-align: center">Paragraaf</p>
  • <img src="afbeelding.jpg" style="width: 200px; height: 100px; border: 2px solid #339977" alt="Naam">

Dit zijn slechts 3 voorbeelden van hoe we dus al CSS hebben toegepast in de html5-cursus. Een nadeel van deze manier is dat je elke keer weer style="" moet aanroepen en vaak ook moet herhalen voor elementen die je hetzelfde eruit wil laten komen te zien.

Het voordeel van de andere twee soorten CSS is dat je voor meerdere elementen maar 1x hoeft aan te geven hoe deze eruit moeten komen te zien.
Allereerst gaan we kijken hoe we dit doen met Embedded CSS inhoudt.