InfoNu.nl > Pc en Internet > Tutorials > CSS - basis uitleg

CSS - basis uitleg

CSS - basis uitleg Het opmaken van een website kan op verschillende manieren. Naast HTML kun je ook CSS gebruiken als opmaakmiddel. CSS heeft als voordeel dat je op één plek de gehele opmaak van je site vastlegt. Verander je later van gedachte, dan hoef je alleen deze pagina aan te passen. Voor bouwers van internetsites dus een handig middel. Maar hoe werkt het?

Algemeen

CSS staat voor Cascading Style Sheets. In CSS kun je de opmaak die eigenschappen meegeven die jij wilt. Door de mogelijkheden van CSS kun je eindeloze variaties maken. Maar allereerst is het handig de basis van CSS goed te begrijpen.
Een opmaak met CSS bestaat uit drie elementen:

TermUitleg
SelectorDe Selector geeft aan welk onderdeel van je pagina de gewenste eigenschappen moet krijgen.
PropertyDe Property geeft aan welke eigenschap je wenst aan te passen.
ValueDe Value geeft aan welke eigenschap je eraan geeft.

Hierna zal een kort voorbeeld volgen waarin dit nader aan de orde komt.

Lettertype

Iedere pagina bestaat uit tekst. De opmaak van de tekst komt als eerste aan de orde. In CSS leg je het lettertype vast door de font-family te kiezen. Als je dit lettertype op de hele pagina wilt terugzien, hang je de specificatie aan de Body tag.

Voorbeeld: BODY { font-family: helvetica, sans-serif }

In dit voorbeeld wordt aan de hele body van de pagina het lettertype helvetica gegeven. Als dit niet mogelijk blijkt, wordt sans-serif als vervangend lettertype gebruikt. Je kunt hier meerdere lettertypes achter elkaar zetten.

Uitleg

De aanduiding Body is de Selector. Hier kan ook elke HTML tag staan of een zelf gedefinieerde Selector. De font-family is de Property van de stijldefinitie. Hier bepaal je de te beïnvloeden eigenschap van je pagina. In dit geval dus het lettertype. Het lettertype helvetica is de value. De value geeft de waarde aan het element. Als je dit schema onthoudt, zul je snel begrijpen hoe css in elkaar steekt.

Intern stijlblad.

CSS kun je op meerdere manieren verwerken in je site. In de head tag kun je de definitie van een stijl gezet. Daarvoor wordt de volgende standaard opmaak gebruikt:

Voorbeeld:

<head>
<style type="text/css">
<!- -
P {font-family: arial;font-size: 12px;}
- - >
</style>
</head>
<body>

Elke P krijgt nu deze waarden toegekend, maar alleen de P's in deze pagina. Als je later de opmaak van je paragrafen wilt wijzigen, dan moet je nog steeds elke pagina langs.

Extern stijlblad

Een CSS opmaak sheet kun je ook extern opslaan. Maar als je een extern bestand maakt, moet je wel weten hoe je dat vervolgens in HTML in je pagina gaat oproepen. Daar heb je altijd de volgende zin voor nodig:

Voorbeeld:<link rel="stylesheet" href="basis.css" type="text/css">

Zo weet de pagina waar de stijldefinities te vinden zijn. In dit geval heet je CSS bestand “basis.css”. Een stylesheet krijgt als extensie .css. Je kunt in elke tekstverwerker dit bestand schrijven en vervolgens via opslaan als de juiste extensie geven. Het makkelijkste is om Notepad te nemen.

De pagina "basis.css" moet ook een opmaak gaan krijgen.

Voorbeeld

P {
font-family: arial, tahoma;
font-size: 12px;
}
Verder hoeft de pagina geen opmaak. Je kan de pagina beginnen met <style type="text/css> en eindigen met </style>. Dit is wel zo netjes, maar verplicht is het niet. Verder kan je toevoegen <! - - - - >, dit om te voorkomen dat de stijldefinitie in oude browsers foutmeldingen gaat opleveren.
© 2011 - 2019 Belastingadvies, het auteursrecht (tenzij anders vermeld) van dit artikel ligt bij de infoteur. Zonder toestemming van de infoteur is vermenigvuldiging verboden.
Gerelateerde artikelen
CSS - groeperen, class en idCSS - groeperen, class en idCSS (Cascading Style Sheets) is een taal waarmee je een internetpagina mooi kan vormgeven. Je kunt aan alle tags in HTML…
Een digitale nieuwsbrief maken met "inline CSS"Een digitale nieuwsbrief maken met "inline CSS"Als we via e-mail een digitale nieuwsbrief willen versturen dan volstaat het niet meer om deze te schrijven in eenvoudig…
Website layout: Frames, tabellen of CSS?Een van de belangrijke dingen bij het maken van uw website is een goede layout. De layout moet de bezoekers aanspreken,…
WordPress theme aanpassen voor beginnersWordPress theme aanpassen voor beginnersWordPress is een veel gebruikt pakket om websites mee te bouwen. Toch zien niet alle websites die gemaakt zijn met WordP…

Reageer op het artikel "CSS - basis uitleg"

Plaats als eerste een reactie, vraag of opmerking bij dit artikel. Reacties moeten voldoen aan de huisregels van InfoNu.
Meld mij aan voor de tweewekelijkse InfoNu nieuwsbrief
Ik ga akkoord met de privacyverklaring en ben bekend met de inhoud hiervan
Infoteur: Belastingadvies
Gepubliceerd: 20-05-2011
Rubriek: Pc en Internet
Subrubriek: Tutorials
Schrijf mee!