22 augustus 2017
Webdesign & <? php /* CSS
Aanbevolen websites
 
 
 
 
 
Aanbevolen websites 3. CSS zelf leren

CSS (Cascading Style Sheets) is geweldig om je website de juiste vormgeving/layout te geven. Met 1 CSS bestand (of meerdere) kun je alles bepalen op je website qua kleuren, indeling, hoogtes, breedtes, achtergrond kleuren en afbeeldingen enz. Deze manier van werken wordt tegenwoordig beschouwd als "best practice" dus de beste methode om een website te maken. Excuus voor de wat onoverzichtelijke indeling. Binnenkort zal ik de links nog indelen van beginner naar gevorderde.

100+ Massive CSS Toolbox - tripwire magazine

Goede links naar Css sites met Css codes en uitleg over het maken van een Css gebasseerde layout.

35 Websites To Teach You How To Use CSS Effectively
 
35+ very Useful And Powerful CSS techniques - Tripwire magazine

Handige Css technieken voor de gevorderden onder ons.

4 methods of adding CSS to HTML: link, embed, inline and import
 
Cascading Style Sheets Tutorial
 
Code Snippets
 
CSS Smashing Magazine

Diverse geavanceerde CSS studies. Zie ook deze link: http://www.smashingmagazine.com/2006/10/25/css-techniques-tutorials-layouts/

CSS 3 -33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
 
CSS Cheat Sheet (V2)
 
CSS Drive

Verzamelsite met links naar allerlei andere Css recources.

CSS Examples

"Welcome to pmob.co.uk a site dedicated to hosting fully supported examples of CSS implementation. Within the tutorials and FAQ you'll find examples of how to create CSS based page layouts, style your documents and organise your code. This site also exposes, then shows you how to fix, many of the bugs and foibles of the most common browsers."

CSS Floats 101
 
CSS Positioning 101
 
CSS Reference
 
CSS Table Gallery

Vele manieren om een tabel met verschillende kleuren weer te geven met CSS. Hier tientallen voorbeelden. Links op een design klikken en de gehele tabel veranderd.

CSS Tutorials
 
CSS Tutorials, Tips en tricks
 
CSS uitleg en tips

CSS: Structuur en presentatie scheiden
Waarom zou je eigenlijk CSS gebruiken? De titel zegt het al, om de structuur van je website te scheiden van de presentatie, het uiterlijk.
5 CSS tips
Er zijn veel handige CSS tips. Hier staan er 5 op een rij.
CSS browser hacks
Niet iedere browser gaat op dezelfde manier met CSS om. Lees hier hoe je problemen kunt oplossen.
CSS bugs
En hier lees je hoe je de problemen eventueel kunt voorkomen.
Verkorte elementen CSS
Je hoeft niet alles uitgebreid op te schrijven, je kunt ook verkortingen aangeven in CSS.
CSS voor gevorderden
Wanneer je de basis van CSS begrijpt, lees je in dit artikel wat meer tips voor gevorderden.

CSS vendor prefixes considered harmful

Integenstelling tot de afspraken dat er webstandaarden moeten zijn is de praktijk helaas anders. Vanaf IE 9 kunnen er ook in IE ronde hoeken worden gemaakt zonder dat je daar een achtergrondafbeelding voor nodig hebt. Echter om dit in Firefox, Chrome etc te bereiken moet je toch totaal 4 verschillende codes gebruiken ipv 1 code.

CSS Voorbeelden.nl
 
CSS Wiki Boek

Online Wiki boek over Css. Helaas is dit boek verre van compleet waardoor je beter verder kan lezen op hetzelfde Engelse Css Wiki book.

CSS Work
 
Css Zen Garden The Beauty in CSS Design

Deze site bleek ik maar tegenkomen de afgelopen jaren. Het laat zien wat voor mooie pagina's je kan maken met Css. Rechts kun je allerlei designs aanklikken en daar ook de code van bekijken.

CSS-Tricks

Met deze: http://css-tricks.com/perfect-full-page-background-image/ en vele andere voorbeelden.

CSS, Accessibility and Standards Links

Ook hier vindt je een overzicht van allerlei interesante Css links.

CSS: Tutorials, Techniques and Reviews
 
CSS+jQuery

Niet allemaal CSS maar soms met jQuery erbij.

CSS3 Downloads
 
Cursus CSS
 
Dynamic Drive CSS Library - Practical CSS codes and examples

Overzichtelijke site met veel duidelijke code om te gebruiken.

Gigadesign.be
 
Handleiding CSS

Het Nederlandstalige naslagwerk.

Het verschil tussen class en id

Een van de weinige keren dat ik direct zal linken naar een google zoekopdracht die er als volgt uitziet: css+div+class+or+id.

Introduction to The Web Standards Curriculum-Table of Contents

Blader ietje naar onderen en je vindt allerlei uitleg over Css met duidelijke voorbeelden.

Layout - CSS-Discuss Wiki

Bespreking van vele CSS technieken.

Layout - CSS.maxdesign - CSS resources and tutorials for web designers and web developers

Met duidelijke voorbeelden kun je hier een boel leren. Bijvoorbeeld over het float element wat zeer handig is om tabellen na te bootsen of hoe je allerlei mooie menu's kan maken door middel van Css toe te passen op opsommingslijsten.

Layout - footerStickAlt
 
Layout - How to keep footers at the bottom of the page
 
Layout - Make the Footer Stick to the Bottom of a Page

Nog een techniek om de footer onderaan te houden. De truck is in ieder geval height 100% en min-height 100% op de juiste plaats en een duidelijke doctype declaratie.

Layout - Matthew James Taylor CSS design blog

Vele handige CSS tips voor het maken van kolommen met gebruik van float en meer...

Layout - Raw CSS Examples
 
Quirks mode

Website die specifiek uitlegt wat Quirks mode en Strict mode precies inhouden. Dit heeft te maken met een stukje geschiedenis van de ontwikkeling van verschillende browsers. Als een website geen doctype heeft gaat de browser in Quirks mode zodat de website geintepreteerd wordt volgens de oude regels en toch goed wordt weergegeven. De opvolger van Css 2 is Css 3 maar wordt niet volledig ondersteund door alle browsers en is dus nog niet de nieuwe Css standaard. De testschema's vindt je op deze website. Css 3 heeft wel wat nieuwe leuke dingen zoals ronde "hoeken" maken wat nu alleen kan door afbeeldingen te gebruiken. De site is ook navigeerbaar via de link aan de linkerkant "show site navigation" waardoor het menu uitlkapt. Jammer genoeg klapt dit ook telkens weer in nadat je op een link geklikt hebt.

SitePoint CSS Reference
 
Stu Nicholls Experiments with cascading style sheets
 
Supersize that Background, Please!
 
Table of Contents - Opera Developer Community

Als je iets verder naar onderen gaat op deze site vindt je uitgebreide studies over Webstandaarden, HTML, geavanceerde CSS.

The Difference Between ID and Class
 
Tizag CSS Tutorial

Op deze website worden via code voorbeelden de basisprincipes van Css uitgelegd. Rechtsonder klik je op Continue om verder te gaan of je kiest aan de linkerkant een specifiek Css element of mogelijkheid waar je meer over wilt weten.

w3schools CSS Reference

Overzicht van alle CSS die je toe kan passen op je site ingedeeld op property en bijbehorende beschrijving.  Op iedere property kun je klikken voor meer informatie. Via het menu aan de linkerkant vindt je nog meer informatie over CSS.

We’re Ready for CSS3, but are we Ready for CSS3?
 
Web Design References

Hele waslijst met sites die uitleg geven over Css.

Web Developer's Handbook CSS

En ook hier weer een lijst met sites over Css.

Webcredible

Interessante tips over het gebruik van CSS.