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:
| Term | Uitleg |
|---|---|
| Selector | De Selector geeft aan welk onderdeel van je pagina de gewenste eigenschappen moet krijgen. |
| Property | De Property geeft aan welke eigenschap je wenst aan te passen. |
| Value | De 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 - 2024 Belastingadvies, het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming is vermenigvuldiging verboden. Per 2021 gaat InfoNu verder als archief, artikelen worden nog maar beperkt geactualiseerd.
CSS - 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"Als we via e-mail een digitale nieuwsbrief willen versturen dan volstaat het niet meer om deze te schrijven in eenvoudig…
CSS - werken met pseudo classNaast de Class mogelijkheden heeft CSS ook de mogelijkheid nog een aantal Pseudo Class te definiëren. Daarmee kun je de…
Gerelateerde artikelen
CSS - 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"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,…
CSS - werken met pseudo classNaast de Class mogelijkheden heeft CSS ook de mogelijkheid nog een aantal Pseudo Class te definiëren. Daarmee kun je de…Netwerk UTP-kabel zelf makenHet zelf maken van een netwerkkabel is een eenvoudige klus. Er zijn slechts een paar simpele stappen nodig om een dergel…
Belastingadvies (39 artikelen)
Gepubliceerd: 20-05-2011
Rubriek: Pc en Internet
Subrubriek: Tutorials
Gepubliceerd: 20-05-2011
Rubriek: Pc en Internet
Subrubriek: Tutorials
Per 2021 gaat InfoNu verder als archief. Het grote aanbod van artikelen blijft beschikbaar maar er worden geen nieuwe artikelen meer gepubliceerd en nog maar beperkt geactualiseerd, daardoor kunnen artikelen op bepaalde punten verouderd zijn. Reacties plaatsen bij artikelen is niet meer mogelijk.