Je eigen website
Zelf een site maken, hoe doe je dat?

Zoeken

You are here: Home ∼ CSS

CSS

Published by admin on 6 november 2012

Zoals je misschien al wel gemerkt hebt, is HTML niet heel uitgebreid in de mogelijkheden om een document vorm te geven. Daarvoor is CSS in het leven geroepen.



CSS staat voor Cascading Style Sheets, en het gebruik ervan heeft een groot voordeel: De vormgeving van een webpagina wordt ermee losgekoppeld van de eigenlijke inhoud, de tekst en afbeeldingen. Daardoor wordt onder andere de code van je website overzichtelijker en kun je werk en ruimte besparen.

CSS kun je in een HTML-document definiëren  maar je kunt het ook in een apart bestand opslaan en vervolgens koppelen in het <head></head> gedeelte van je webpagina. Als laatste kun je het ook direct in een tag invoeren.

  • Invoegen van CSS doe je direct in de HTML-code met <style type=”text/css”></style>
  • Linken naar een extern css-bestand doe je zo, in het <head> gedeelte: <link rel=”stylesheet” type=”text/css” href=”bestand.css” />
  • Direct in een tag invoeren met het attribuut style=””

Een simpel voorbeeld van CSS geeft al direct aan hoe krachtig het kan werken.

body {

font-size:10px;

}

Dit stukje CSS zegt dat alle tekst in de tag <body> een lettergrootte van 10 pixels moet hebben. Omdat CSS werkt met behulp van erving, zullen alle tags in de <body> dus een lettergrootte van 10 pixels meekrijgen en hoef je de lettergrootte niet voor elk gedeelte apart te definiëren  De enige manier om daarvan af te wijken is door bijvoorbeeld een bepaalde sectie in de body een afwijkende grootte mee te geven, stel je hebt een header-div: <div class=”header”>Met wat tekst er in</div>. Normaal zou de tekst 10 pixels groot zijn, maar met deze CSS-code zou je ervoor kunnen zorgen dat die tekst alsnog groter wordt:

div.header {

font-size:12px;

}

Hiermee ben je ook al direct in aanraking gekomen met het concept ‘klasse’. Je kunt namelijk een tag een zelfverzonnen class-attribuut meegeven, zoals ik gedaan heb met class=”header”. Hierdoor kun je een grotere verscheidenheid aanbrengen in verschillende tags en ze eenvoudig vormgeven. Heb je bijvoorbeeld twee lijsten op een pagina, en wil je ze in bepaalde dingen laten overeenkomen, maar in enkele dingen ook van elkaar verschillen, dan kun je dat als volgt oplossen:

ul {

font-size:8px;

font-weight:bold;

}

ul.oranje {

color:#FF7F2A;

}

ul.blauw {

color:#2A55FF;

}

Deze code zorgt ervoor dat alle <ul>-lijsten een lettergrootte van 8 pixels krijgen en vetgedrukt worden. De <ul> met class oranje krijgt daarnaast nog een oranjegekleurd lettertype, de ul met class=”blauw” krijgt een blauw lettertype.

Hiermee heb je kennis gemaakt met de basis van CSS. Wil je hier meer over leren? Op deze handige website kun je zelf aan de slag met CSS.

Posted in De basis Tagged Attributen, Basiscursus CSS, Cascading Style Sheets, CSS, CSS leren, Wat is CSS
← Previous Next →

Hoe maak je zelf je eigen site?

  • De basis
    • HTML of Online sitebuilder
    • Kies een HTML-editor
    • HTML
    • CSS
    • JavaScript
    • PHP
    • Een MySQL-database
    • PHP op je eigen computer
    • Je site online zetten met FTP
    • Zelf een webpagina maken – een handleiding
    • Gratis website templates
      • Templates gebruiken
  • Hosting en domeinnaam kiezen
    • Gratis hosting
    • Goedkope hosting
    • Gratis blog maken
    • Een domeinnaam registreren
  • Voorbeelden om je website uit te breiden
    • PHP-includes
    • Slideshow op je site
    • Een lightbox voor foto’s
    • Reacties via Facebook installeren
    • Kleuren kiezen
    • Google Analytics installeren
  • WordPress
    • WordPress installeren
    • WordPress-plugins en thema’s installeren
    • Gratis WordPress-thema’s
    • 10 handige WordPress-plugins
    • WordPress en plugins updaten
  • Bezoekers trekken
    • Hoger in Google
      • Hoger in Google – Opbouw van je site
      • Hoger in Google – Webteksten schrijven
    • Social media marketing
    • Een gratis nieuwsbrief maken
  • Geld verdienen met je website
    • Google Adsense op je website
    • Geld verdienen als affiliate

Copyright © 2022 Je eigen website.