CSS stylesheets
CSS (stylesheets)
CSS (Cascading Style Sheets). Met de stylesheets heb je meer opmaakmogelijkheden dan in
html.
Je kunt elk element eigenschappen meegeven, die je zelf bepaalt. Dit kan in een html pagina, of op een
apart stijlblad. handig om je website een eigen stijl te geven.
Navigeren met behulp van tabbladen
Een van de manieren om te navigeren door je site is door middel van tabbladen. Deze
tabbladen laten zien op welke pagina je, je bevindt en welke andere mogelijkheden er
ook zijn om naar toe te gaan. Tabbladen navigatie zijn te maken met behulp van CSS.
Het vergt enige voorbereiding, maar een en ander is goed te gebruiken voor een website.
We zetten de te maken stappen op een rij.
CSS codes ingekort (shorthand properties)
Je kunt er voor kiezen om al je css code helemaal uit te schrijven, maar er zijn verschillende korte
notaties mogelijk, waarmee je toch hetzelfde resultaat bereikt. De zogenaamde shorthand properties.
We zetten ze op een rij, zodat je website weer een beetje sneller wordt.
Navigatie op je website
De meeste sites gebruiken een vorm van navigatie om de bezoeker te helpen door de website te klikken.
Soms kan het handig zijn om de bezoeker te laten weten waar hij zich bevindt. Zonder dat je gebruik
maakt van het invoegen van een uitgebreid script en zonder dat je html code op elke pagina moet
aanpassen is het mogelijk om de knop van de huidige pagina te veranderen ten opzichte van de rest.
CSS Hacks voor verschillende browsers
Ook al gebruikt 99% van de internetbezoekers een browser die CSS ondersteunt, toch gaan de verschillende
browsers op verschillende manieren met CSS om. We hadden het in een ander artikel al eens over het
zogenaamde box probleem. Ook met
opsommingen (<ul> en <ol>) worden meer dan eens problemen ervaren.
Aan de andere kant laten we je in dit artikel zien dat dergelijke problemen eenvoudige kunnen worden
opgelost. Hiervoor gebruiken we dit keer CSS hacks.
10 handige links over CSS
We zijn eens gaan spitten op het internet en hebben een overzichtje gemaakt van een tiental
handige interessante en leuke links op het gebied van CSS. Deze keer hebben we voornamelijk
nederlandstalige sites gezocht, en gevonden.
De kracht van CSS
Inmiddels bestaan Cascading stylesheets negen jaar. Het lijkt er op dat er een omslag is gekomen in het denken van webdesigners.
Zelfs grote websites, die lang bleven doorgaan met het gebruik van tabellen voor de opmaak van websites lijken om. Het heeft
een tijd geduurt, maar ook Internet Explorer 7 gebruikt CSS op een redelijk goede manier. Lang hebben ze bij Microsoft een eigen
interpretatie gehad van padding en margin, het zogenaamde boxprobleem.
CSS en semantische HTML
Het wereldwijde web veranderd continu en als webmaster zul je mee moeten veranderen. een van de belangrijkste veranderingen van
de laatste jaren is het gebruik van CSS in combinatie met semantische markup. CSS en semantisch webdesign hebben een aantal
voordelen, duidelijke, heldere code, compatible met andere webapparaten, scheiding van inhoud en presentatie, minder gebruik van
bandbreedte en betere toegang tot zoekmachines.
Een drie-koloms layout maken in CSS
In een
eerder artikel hebben we een layout gemaakt die verdeeld was over twee kolommen. Nu gaan we
een layout maken die drie kolommen bevat. Weer met behulp van CSS, en niet met tabellen.
Padding en margin en het box probleem.
Heel veel mensen komen aan met het probleem dat hun website in Mozilla Firefox goed is, maar in
Internet explorer kloppen de maten niet meer, of juist andersom.
Waarom zijn deze verschillen er en hoe kan je ze oplossen?
ID’s en classes, de een of de ander?
Om een html element de identificeren, zeg maar een naam te geven, maak je gebruik van
het attribuut ‘class’, of het attribuut ‘id’. Wanneer gebruik je nu de een en wanneer
gebruik je nu de ander? En de vraag die er op volgt is natuurlijk, hoe gebruik je ze zo
dat je semantische opbouw van je html gewaarborgd blijft?
CSS properties
Wat kun je nu in de praktijk met CSS. Hoe pas je het toe? We
hebben de belangrijkste properties op een rij gezet, speciaal voor beginners.
Printervriendelijke pagina’s maken
Een van de voordelen van CSS is dat je vooraf kunt bepalen hoe je site er uit gaat zien
op het scherm. Maar dit is niet alleen mogelijk voor het scherm, je kunt ook aparte stylesheets
maken voor een printversie van een pagina.
Tabellen zijn niet Taboe!
Dit is een van de meest gemaakte fouten van een beginnend webdesigner die zich aan CSS waagt.
Ze hebben een paar keer gelezen dat ze op het ‘nieuwe web’ geen tabellen meer mogen gebruiken,
maar dat is niet helemaal waar.
Het gaat over de manier waarop je ze gebruikt.
Om duidelijk te maken hoe het zo ver heeft kunnen komen met tabellen, gaan we een reis terug
in de tijd maken naar toen websites net begonnen op te duiken.
Tien goede voornemens bij het maken van een website
Aan het begin van een nieuw jaar geven we 10 goede voornemens, te gebruiken bij het
maken van je website. Zo adviseren we om nu eens af te stappen van font-tags en
tabellen voor de opmaak van je html-document en eens over te stappen naar CSS. Ga eens
goed kijken naar hoe je code is geschreven en zet overbodige zaken eens aan de kant, bijvoorbeeld
die muziekjes op je website. Trouwens, we wensen iedereen een gelukkig 2007!
Foto met schaduwrand in CSS
Wanneer je een foto wat meer eruit wilt laten springen dan kun je er een schaduwrand achter laten vallen
zodat de foto oplicht. Dit kan met behulp van CSS. Je hebt een foto nodig en een schaduwplaatje. In
ons artikel willen we gaan kijken hoe je dit precies aan moet pakken.
Syntax van css
Soms is het handig om eens wat basisprincipes weer naar boven te halen. Hoe zat het ook al weer en hoe moest je een en ander
ook alweer gebruiken. We beginnen met CSS. In drie artikelen willen we de basisregels van CSS weer naar boven halen.
In het eerste artikel gaan we in op de manier van schrijven in CSS. Met name de ‘selector’, de ‘property’ en de ‘waarde’.
Stijlen 1
Stijlen zijn te gebruiken voor je website.
In deze cursus leer je hoe je elementen kunt aanpassen aan je eigen wensen.
Dit is het eerste deel over stijlen er volgt nog een tweede deel, die ingaat op het maken van stijlbladen.
Stijlbladen
We gaan in deze aflevering stijlbladen maken, hiervoor moet je wel de eerste cursus
Stijlen hebben gedaan, omdat we hier op voortborduren. We weten inmiddels hoe we een element
onze eigen stijl kunnen geven. Dit kunnen we toepassen in een element zelf en voor een webpagina.
Nu gaan we het leren toepassen in een website.
Derde cursus Stijlbladen
We kunnen nu stijlbladen maken, maar nu wil je graag weten welke stijlen er zoal zijn.
In de cursus stijlen 1 zag je een overzicht van alle stijlen, maar in deze cursus gaan we wat
praktische toepassingen maken.
Stylesheet switcher maken
In veel gevallen kan het handig zijn dat een gebruiker zelf kan bepalen hoe een webpagina eruit ziet,
zo houdt de een van een klein lettertype en is dat voor de ander niet te lezen. Ook in het kader van
toegankelijkheid op het web is een stylesheet switcher een handig instrument om dergelijke zaken
mee te regelen. In dit artikel maken we een stylesheet switcher om de grootte van lettertype te kunnen
veranderen. Maar natuurlijk kun je dit voor allerlei andere zaken ook gebruiken.
Heel wat beginnende en gevorderde website bouwers lopen tegen het probleem aan dat een website er in internet explorer heel
mooi uitziet, maar als ze de website dan bekijken in Firefox, deze er ineens helemaal anders uitziet. Is dat ook opgelost, dan blijkt het
weer niet te kloppen in Safari op een Apple computer. Hoe kun je hier nu het beste mee omgaan?
Commentaar toevoegen aan broncode
Het is een goede gewoonte om aan je broncode van je website commentaar toe te voegen. Niet alleen voor de eventuele bezoeker,
die in je broncode kijkt hoe je iets gedaan hebt, maar ook voor jezelf. Je kunt op die manier bij het bouwen of bij het wijzigen
van je site makkelijk terugvinden waar iets stond. Zo kun je de indeling van je site weergeven, waar de header stond en waar het menu,
maar je kunt ook bepaalde functies weergeven in een javascript.
Borders worden in een website voor allerlei doeleinden gebruikt,
maar hoofddoel is het afbakenen van stukken tekst of andere inhoud. Met CSS kun je een heleboel
varieren op dit gebied. We gaan even op een rij zetten wat je er mee kan.
Vraag op het forum:
Ik krijg het “trucje” in CSS niet door om mijn layout verticaal beeldvullend te krijgen, ongeacht de monitor grote en/of resolutie.
Ik zal het (proberen) uitleggen aan de hand van een simpele layout:
De layout bestaat uit een “header” met daaronder een “tekstvlak” en daaronder een “footer”. Tot nu toe geen enkel probleem.
Maar nu wil ik de “header” helemaal bovenin beeld (in vaste maat) en de “footer” helemaal onder in beeld (in vaste maat),
met daartussen het “tekstvlak” wat de ruimte opvult ongeacht de hoeveel tekst wat daarin staat.
Wordt de tekst te veel voor de ruimte in het “tekstvlak” dan wil ik dat oplossen met de “overflow” functie in CSS.
Een opmaak in frames zou dit geen probleem zijn, maar nu zou ik dat graag in CSS maken.
Of is dit niet mogelijk in alleen CSS??
Een horizontaal menu, zonder tabellen
Een horizontaal menu maken, zonder tabellen te gebruiken. Voor veel mensen al gesneden koek,
toch nog even de basis op een rijtje. Door gebruik te maken van een ongeordende lijst en
deze horizontaal neer te zetten, krijg je prima menu’s. Wanneer je er nog een paar stijlen
op los laat kun je hiermee zeker je site verfraaien.
In dit artikel gaan we met behulp van CSS laten zien hoe je lijsten kunt aanpassen. In plaats van
een rondje een ander vormpje in een opsomming, of een andere manier van tellen, bijvoorbeeld met
romeinse cijfers.
Tegenwoordig zie je op vee websites tekstboxen met ronde hoeken. Veelal zijn die met behulp
van plaatjes gemaakt, maar dat kan ook op een andere manier, zodat je die plaatjes niet nodig hebt.
Alleen maar door CSS goed te gebruiken. Voor de afgeronde hoeken maken we gebruik van bullets.
Er zijn een aantal manieren waarop je elementen een positie kunt geven met behulp van CSS.
Wanneer je welke manier gebruikt hang af van een paar zaken. Ten eerste wat je als basis wilt
gebruiken voor het te plaatsen element. Ten tweede de invloed van andere elementen op dat ene
element. We hebben het in dit artikel over statisch positioneren, relatief positioneren,
absoluut positioneren en over vast positioneren.
Wanneer je een menulijst hebt met actieve links kun je deze verfraaien door gebruik te maken van css.
Dit heeft natuurlijk de voorkeur boven het gebruik van plaatjes en javascript aangezien het
veel minder ruimte inneemt en dus sneller laadt.
Over pixel, punten, em en andere lettergroottes
Sinds CSS is het aantal manieren om de lettergrootte weer te geven enorm toegenomen.
Waar de fonttag een getal gebruikte, kun je met css pixel, point, picas, em, ex,
omschrijvingen en percentages (%) gebruiken.
Wanneer je gebruik gaat maken van CSS zul je op een gegeven moment te maken krijgen
met descendent selectors. Wat zijn dit eigenlijk? In dit artikel willen we aan de hand van voorbeelden
aangeven hoe je dit kunt gebruiken.
Je eerste, goede website maken. Stijlen invoegen.
We gaan naar aanleiding van het vorige artikel over de opbouw van een website,
nu de stijlen invoegen. Het vorige artikel vind je hier.
daarbij hadden we een eenvoudige opmaak gemaakt voor een twee-koloms layout met een
footer, met behulp van div.
Importeren van stijlen
Wanneer je CSS gebruikt kun je dat op een aantal manieren doen. Je kunt een
ingebedde stijl gebruiken, een intern stijlblad of een extern stijlblad. Wij zetten de
verschillende mogelijkheden nog even op een rij.
Je eerste, goede website maken
Een website maken is helemaal niet moeilijk, een goede website maken ook niet, maar
het vereist wel wat meer investering van de bouwer. Voordat je dan ook begint met de
feitelijke inhoud is het belangrijk om eerst te letten op de structuur van je website.
In het volgende voorbeeld gaan we dan aan de slag met een website gemaakt in XHTML en
CSS.
Gigastyle, stylen met css.
Gelukkig komt het werken met stylesheets (CSS) steeds meer in zwang. gelukkig, omdat je
er veel meer mee kunt bereiken dan het aloude html. Wat overigens nooit bedoeld was om de
lay-out van een website te verzorgen. CSS is dat wel. Wat je met CSS kunt bereiken is goed te
zien op de website van Mark Creeten,
Gigastyle.be. Hij vroeg aan Dave Shea, van csszengarden, of hij het
idee voor de benelux mocht gaan uitvoeren. Dat mocht hij.
In- en uitklappen van tekst
Soms zijn er van die handigheidjes die het werken met CSS zo aantrekkelijk maken.
Stijlen zijn heel handig, maar in combinatie met JavaScript biedt het nog leukere
mogelijkheden. Je krijgt dan DHTML, of Dynamische HTML. Laten we eens een handigheidje
gaan maken.
Als je goed kijkt hebben veel websites een basis van twee kolommen. Links het menu
en rechts, een stuk breder de inhoud. Met behulp van HTML en CSS gaan we zo’n lay-out
maken. Hiervoor gebruiken we geen tabellen meer. Deze beschouwen we vanaf nu als achterhaald.
Textbox in CSS met div
Je kunt met behulp van tabellen behoorlijk goed een pagina indelen en beheersbaar
maken, maar met behulp van de div-tag kun je nog veel meer voor elkaar krijgen en heb je
tabellen niet eens meer nodig. Je gaat textboxen maken, die je tot op de pixel
nauwkeurig kunt neerzetten. Ook zetten we deze texbox in lagen.
CSSref, De complete stijlreferentie.
Het gebruik van stylesheets groeit met de dag. Steeds meer mensen gaan het nut van
stijlen inzien. Hoe je die stijlen gebruikt, wat je er mee kunt de mogelijkheden zijn zo veel
meer groter als met alleen maar html. Bij cssref.be kun je een uitgebreide inleiding en verdieping vinden over het gebruik. De attributenlijst maakt de website compleet. Wij voelden de makers eens aan de tand.
Tekstvak maken met CSS
In het vorige artikel over CSS hebben we al heel even de box genoemd,
waarin je bijvorbeeld een tekst kunt plaatsen. Zo’n box heeft heel veel mogelijkheden en
kan bij heel wat zaken van pas komen. Bijvoorbeeld bij de manier waarop we op deze site
een html-code weergeven. We gaan in dit artikel wat uitgebreider in op
het maken van zo’n textbox, of, vrij vertaald, een tekstvak
(kun je natuurlijk voor vanalles gebruiken).
Lettergrootte
FAQ: Ik heb een website gebouwd met behulp van tabellen. Voor mijn lettertype gebruik ik de
font-tag. Nu heb ik onlangs gemerkt dat bij mij de tekst mooi op het beeldscherm komt, maar dat het bij
een vriend van me er absoluut niet mooi op komt. Wat kan
ik er aan doen?
Cursor
Ik zie bij sommige sites in plaats van een handje als cursor,
een vraagteken verschijnen. Hoe krijg ik dat voor elkaar?
