CSS Superclub

WAAROM CSS GEBRUIKEN?
1. Gewichtsvermindering van html files.
2. Meer controle ove de stijl/presentatie van je pagina’s.
3. Meer controle over plaatsen van elementen.
4. Makkelijk te onderhouden, aan te passen in de toekomst.
5. Web engines kunnen je website sneller doorzoeken.

A) CSS TOEVOEGEN AAN JE HTML
- INLINE
- INTERNAL
- EXTERNAL
Laatste optie is eigenlijk degene die ik aanraad. Dan blijft je HTML overzichtelijk, en bepaalt de structuur terwijl de stijl van buitenaf wordt toegevoegd.

B) SELECTORS, PROPERTIES, DECLARATIES, VALUES
HTML heeft tags. CSS heeft selectors, properties en values.
body {
color: #000000;
}

Body is hier de selector, color is een property en #000000 is een value.
Selector, Properties, Values en Declaraties zijn de vier basis elementen van CSS.
-selectors, declarations, &
p { color: #ff0000; }
-properties, values
color , #ff000

C) DIV en SPAN tags.
Deze tags worden gebruikt om een stuk HTML te groeperen en dat stuk bepaalde waarde en informatie toe te schrijven.
Om te weten welke soort informatie moet worden toegeschreven aan zo’n stuk HTML worden er selectors aangemaakt zoals ik hierna zal uitleggen. Een #navigatie bijvoorbeeld. Door de id=#navigatie aan de div toe te schrijven weet de browser hoe het gedeelte HTML eruit moet komen te zien.

Het verschil tussen een SPAN en een DIV is dat een span een in-line element is en vooral gebruikt wordt voor kleinere stukken HTML terwijl een div echt een division maakt in de HTML. Een div is een blockline element, gebruikt dus voor grotere stukken HTML.

HEEL BELANGRIJK: DIV en SPAN zijn niet de vervangers van tabellen. Ze zijn er niet om de pagina indeling in hun eentje te bepalen. In HTML gaat het vooral om het logisch benoemen van stukken informatie. Ook de p tag en ul li, 1, h2 etc zijn belangrijke tags om de logische structurering van je pagina mee te bepalen.

D) CLASS EN ID SELECTORS
#navigatie{
font: Georgia, serif;
}
.content {
background-color: #FFCC33;
}

Hier is content een selector. Wat opvalt is dat de een met een hekje begint terwijl de ander met een punt of zonder hekje noch punt. Dat zit m in het verschil tussen HTML selectors en CLASS en ID selectors oftewel TYPE selectors.
Het body element is een HTML selector. Door de HTML body tag in je stylesheet als selector in te zetten wordt het een HTML selector. CSS selectors voeg je later toe aan je HTML.
In CSS is een CLASS selector een naam met een punt ervoor en een ID selector is een naam met een hekje ervoor. Voordeel van deze CSS selectors is dat je een stuk HTML op verschillende manieren kan tonen afhankelijk van de ID of CLASS die je dat stuk geeft.

Het verschil tussen CLASS en ID is dat je CLASS meerdere keren en voor kleinere stukken HTML inzet en ID voor grotere stukken HTML en meestal maar 1 keer.

D) KLEURGEBRUIK IN CSS
Kleur kan via CSS op HTML worden toegepast door middel van de declaraties ‘color’ en ‘background-color’.
Dit is een header tekst met gele letters en een blauwe achtergrond bijvoorbeeld.
h1 {
color: yellow;
background-color: blue;
}

De kracht van CSS.
is dat het v buitenaf wordt bepaald, voor n heel ingewikkelde site kan je in 1 keer alle headlines veranderen in font grootte of kleur bijvoorbeeld. Zoals het verschil tussen deze twee afbeeldingen………
Belangrijk is wel! maak je css nooit te complex, zorg dat je met zo weinig mogelijk declaraties je vormgeving bepaald.

Inheritance
Inheritance betekent erven. CSS werkt met zoiets als erfgenamen of ouder/kind relatie of weer anders Grouping and Nesting. In een CSS document kan er een ouder kind relatie bestaan tussen verschillende elementen.

Zoals je weet is de body een belangrijk hoofdelement van je HTML document. Wanneer je in je CSS document bepaalde properties ofwel waarde aan je body toekent zal dit ook gelden voor haar kinderen. Zoals p, td, ul, ol, etc.
Je kan de erfenis breken door aan een andere selector een ander font toe te schrijven en dit zal de in de body bepaalde font overschrijven.

Een ander voorbeeld van het gebruik inheritance ziet er zo uit:
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}

Een gedeelte van je HTML krijgt een top id. Het heeft n achtergrond kleur en een padding. In de volgende CSS regels zie je staan #top h1 met eigen properties teogekend. Dit houdt in dat alle h1 headers binnen het gedeelte met een id top rood gekleurd zijn. Alle h1 headers buiten top zien er dus anders uit. (standaard is de h1 zwart)
Ook voor alle paragrafen binnen het gedeelte HTMl met een id top geldt; rode tekstkleur en bold.

Het leuke aan CSS
Rollovers hoef je niet langer meer te maken met javascript. Ik zal de lessen laten zien hoe je heel gemakkelijk met css rollovers en dropdown menus kan maken.

Kleine opmerkingen over CSS
-CSS is nog case sensitive, wel is het handig om veel wit ruimte te gebruiken en met meerdere decalaraties alsvolgt te schrijven:
body {
color: #000;
background: #fff;
margin: 0;
}
- waarom meerdere fonts benoemen in je stylesheet?
body {
font-family: “Lucida Grande”, Verdana, Lucida, Arial, Helvetica;
}
Elk platform heeft andere fonts, is de eerste v het rijtje niet bekend dan zoekt de comuter verder naar t tweede font, enzovoort.