CSS is de afkorting van Cascading Style Sheets en wordt gebruikt om de opmaak te bepalen van websites. Zo wordt bijvoorbeeld met behulp van CSS ingesteld welk lettertype er wordt gebruikt en welke kleuren maar ook bijvoorbeeld de positionering van div’s waarmee de website is opgebouwd. In de afgelopen jaren heeft CSS grote stappen gemaakt en is er goede ondersteuning van browsers waardoor er steeds meer te bereiken valt met CSS. Met CSS is het mogelijk om alle HTML-tags van vorm-kenmerken te voorzien. In december 1996 werd Cascading Style Sheets, level 1 (CSS1) een ‘W3C Recommendation’ (aanbeveling).
- Leer CSS layout
- CSS grid w3schools
- CSS simpel voorbeeld
- CSS uitgebreid voorbeeld
- Achtergrond fullscreen
- Centreren met CSS
- Centreer div met Calc functie
- Z-index uitleg
- Rollover met CSS
- CSS image
- Div posities uitleg
- CSS tabel rand
- Inline block
- Div met kleur
- Div positie
- Nesteddiv
- Centreer div met 100% hoog
- Div 100% breed
- Fieldset
- Horizontaal en verticaal centreren
- Float
- Float en clear
- Float en Div
- Div met float 2
- Float uitleg
- Header, menu en content
- Borders tabel
- Div met rechts een rand
- Tekst Stroke
- Float
- Simpel Ul/Li menu
- Ul menu met Submenu
- Centreren DIV
- Afbeelding rechts
- DIV met achtergrond
- Achtergrond afbeelding
- Achtergrond afbeelding met opacity
- Dropdown Menu
- Menu horizontaal
- Menu verticaal
- Input CSS
- Schaduw tekst
- Box-shadow
- Ronde hoeken
- Border image
- Transparency
- Transparante tabel
- Extern font
- Achtergrond tekst
- CSS animatie
- Atribute select
- Pseudo class (kleur link)
- CSS less voorbeeld
- Video achtergrond
- Selector
- Div naast elkaar
- Afbeelding in tekstveld
- Div naast elkaar
- Div onderelkaar
- DIV in DIV (met FlexieJS Tool)
- 2 DIVS in een DIV
- 3 DIVS in een DIV
- Css met ul
- Div onder elkaar
- Div onder elkaar 3x
- Active pagina link selecteren
- Graient
- First child
- Css flex div naast elkaar
- Flexbox
- CSS-tricks.com
- Anything slider
- Google Maps slider
- CSS Zoomer
- Bestelformulier
- Twitter Bootstrap
- Bootstrap W3schools
- Bootstrap templates
- Polaroid voorbeeld
- Voorbeeld checkbox switch
- Flipbox (draaien afbeelding)
- Scrolling Iframe (ook iOS)
- CSS Filters
- Species-in-pieces.com
CSS3
- Tabmenu CSS3
- Filteren SS3
- Bewegende tekst CSS3
- Rotate
- Raket animatie
- Vlinder animatie
- CSS kolommen
- Fotoalbum CSS3
- Geanimeerde banner
- Full screen slideshow
- Geanimeerd boxmenu
- CSS buttons
- Menu kaart
- CSS figureren
- CSS3 cheat sheet
- CSS unit VH
- CSS unit VM VH font-size
- Viewport
CSS kan elemente op 4 manieren worden positioneren met het position property:
Static Elementen hebben standaard position:static; . Dat houdt in dat elementen op volgorde worden weergeven zoals ze in het HTML document zijn aangegeven; ze worden geplaatst volgens de “normal flow”. Je kunt de margin en padding van het element aanpassen om het element wat meer ruimte te geven.
Fixed Wanneer een element position:fixed; heeft, kun je met behulp van de properties top , right , bottom en left het element plaatsen ten opzichte van het browservenster. Wanneer er wordt gescrolld, verschuift het element niet, maar blijft het relatief ten opzichte van het browservenster staan. Geef je een element als position fixed, dan wordt het element uit de “normal flow” gehaald. Dat betekent dat andere elementen op de pagina het element niet meer zien en er qua positie geen rekening meer mee houden. Fixed gepositioneerde elementen kunnen dus andere elementen overlappen (of kunnen overlapt worden door andere elementen).
Relative Elementen met position:relative; kunnen worden gepositioneerd (mettop , right , bottom en left ) ten opzichte van hun oorspronkelijke locatie. De oorspronkelijke ruimte die het element normaalgesproken zou innemen, blijft “gereserveerd”. Hier kunnen andere, “static” gepositioneerde elementen niet worden geplaatst.
Absolute Deze waarde is waarschijnlijk het moeilijkst te doorgronden. Een absolute gepositioneerd element wordt relatief ten opzichte van het eerste element waar het in staat dat een position ànders dan static heeft, gepositioneerd. Als het absolute element niet in een ander element staat met de vereiste waarde (fixed,relative of absolute) is gepositioneerd, wordt het element gepositioneerd ten opzichte van het body element. Wanneer een element absolute gepositioneerd wordt, wordt het uit de normal flow gehaald en zien andere elementen het element dus niet meer.
Shorthand
Wanneer je voor margin 4 waarden, gescheiden door een spatie opgeeft, worden “met de klok mee” de waarden toegekend aan top, right, bottom, left. Wanneer je twee waarden opgeeft, kent CSS de eerste waarde aan top en bottom toe, en de tweede waarde aan right en left.
margin:10px 0 10px 0;
ID en Class
Bij een ID gebruik je een # voor de naam, dus #div1.
Bij een Class gebruik je een .voor de naam dus .divs.
HTML-tags worden in CSS gebruikt zonder tekens