CSS, Style Sheets Tips & Tricks ::
» Wat is een CSS, Cas Cading
Stylesheet & theorie er van : ?
Wat is CSS?
- De afkorting voor Cascading Style Sheets
- Dient om de opmaak van webpagina's in te stellen
- Het biedt meer opmaakmogelijkheden dan HTML
Het komt hier op neer: wanneer je een website maakt wil je al je pagina's
dezelfde opmaak meegeven. Dit lukt natuurlijk wel door elke pagina
afzonderlijk op te maken maar daar kruipt snel heel wat tijd in. Met
CSS maak je één soort 'opmaakprofiel', je past dit toe
op al je pagina's en klaar is kees.
Soorten Style Sheets
- Inline
- Embedded
- Extern
Inline stylesheet: de stijlcode wordt op de plaats
van de actie aan de HTML-tag toegevoegd.
Embedded stylesheet: in elke webpagina wordt in het
<HEAD> - gedeelte de volledige CSS-code opgenomen. Die opmaak
geldt telkens voor de hele pagina.
Extern stylesheet (meest gebruikte): In elke webpagina
wordt in het <HEAD>-gedeelte een link gelegd naar een CSS-bestand
dat de opmaak van alle gelinkte pagina's bevat. (het handigste)
Wanneer je een externe stylesheet gebruikt komt de volgende code in
je HEAD-gedeelte te staan:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Syntaxis
Een stylesheet bevat een aantal style rules (stijlregels).
Elke style rule bepaalt de opmaak van een bepaald deel uit de webpagina.
Een voorbeeld van zo'n style rule:
P {color: red}
Een stijlregel is als volgt opgebouwd:
- Selector: dit is het HTML-element waarvoor je een
bepaalde opmaak wil bepalen. Zo kan je voor iedere paragraaf een opmaak
maken en bijgevolg gebruik je dan het element P.
- Declaration: de declaration is de definitie van de
opmaak die je aan de selector wil toekennen. De declaration staat tussen
accolades ({ }).
- Property en value: elke declaration kent aan één
of meer eigenschappen een bepaalde waarde toe. In het voorbeeld hierboven
wordt aan de eigenschap color (bepaalt de tekstkleur) de waarde red
toegekend
. Normaal zal dus alle tekst in de alinea's in het rood weergegeven
worden.
In het voorbeeld hierboven zal dus al de tekst die tussen <p>
en </p> staat in het rood gekleurd worden. De tekst die bijvoorbeeld
tussen <h1> en </h1> staat blijft in de normale opmaak
staan.
Natuurlijk stel je meestal niet één eigenschap in maar
meerdere. Stel dat je in titel H1 de tekst in het rood wenst en een
groene achtergrondkleur wil, dan moet je gebruik maken van 2 declarations
nl. color en background-color. Deze twee scheidt je door een komma
en dan ziet dit er zo uit:
H1 {color: red; background-color: #33F933}
Om nog een voorbeeld te geven: hier volgt de CSS-code van een website:
body { font-family: Arial, Helvetica, sans-serif;
background-color: #003366; color: #CC6600} a:link { font-family: Arial,
Helvetica, sans-serif; color: #999999; text-decoration: none} a:visited
{ font-family: Arial, Helvetica, sans-serif; color: #999999; text-decoration:
none } a:hover { font-family: Arial, Helvetica, sans-serif; color:
#999999; text-decoration: underline} a:active { font-family: Arial,
Helvetica, sans-serif; color: #999999; text-decoration: none } h1 {
font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style:
normal; color: #003366; background-color: #CC6600; text-align: center}
In de code hierboven merken we nog een buitenbeentje op namelijk de
A-tag. Ze regelt de hyperlinks. De A-tag heeft vier verschillende verschijningsvormen:
standaard, bezocht, actief en gehovered.
We kunnen dus in CSS bv. de kleur opgeven voor een bezochte of een
actieve hyperlink. Hier is de code:
A:link {color: red; text-decoration: none} A:visited
{color: red; text-decoration: none} A:active {color: blue; text-decoration:
none} A:hover {color: green; text-decoration: none}
In het voorbeeld hierboven wordt een hyperlink nooit onderstreept weergegeven.
Daar zorgt de 'text-decoration: none' voor. Alle hyperlinks worden
rood weergegeven. De actieve hyperlink kleurt blauw. Beweeg je met
de muis over een hyperlink, dan verandert de kleur in groen zolang
je met de muis over de hyperlink beweegt.
Nu even genoeg theorie: over naar de praktijk...
» Hoe maak
ik een Cas Cading Stylesheet (CSS) : ?
Wanneer we de theorie hierboven hebben doorgenomen
kan het zijn dat je er niet teveel van begrijpt en dat het allemaal
een beetje wazig overkomt die CSS, maar wanneer je de volgende stappen
volgt zal alles verduidelijken. We maken nu een stylesheet aan in Dreamweaver
(MX):
Stap 1: Selecteer Text, CSS Styles, New Style.
We komen in het volgende scherm terecht:
Stap 2: Nu moet je goed weten wat je
wilt bereiken. Om het voorbeeld gemakkelijk te houden wil ik dat iedere
pagina van onze website een lichtgele achtergrond kleur heeft. Natuurlijk
kan je dit instellen in iedere pagina apart, maar nu gebruik je een
stylesheet, wat heel wat tijd bespaart. Je selecteert het bolletje
Redefine HTML tag (herdefineer de HTML-tag). Bovenaan in het venster
merk je dat er iets verandert is. Je kan nu de tag opgeven die je wil
gaan veranderen. Zoals je weet wordt de achtergrondkleur in je BODY-tag
ingesteld, dus we kiezen hier voor BODY en klikken op OK.
Stap 3: Dreamweaver
vraagt nu om je CSS-style op te slaan. Dit bestand krijgt altijd de
extensie .css. Je kan hier bv. de naam styles.css opgeven. Zorg er
wel voor dat je het bestand opslaat in de map van je site.
Stap 4: Wanneer je voor Save hebt gekozen kom je in
het volgende scherm terecht:
Om je achtergrond te veranderen kies je uiteraard voor Background.
Bekijk ook zeker eens de andere mogelijkheden. In het rechtergedeelte
open je het palet bij Background Color en kies je je lichtgele kleur
uit. Klik nu op OK.
Zo kan je bijvoorbeeld ook aan geven welke letter typen, grote, kleur
e.d en in een keer kan toepassen op een pagina zonder alles appart
in te gaan stellen.
Een aderre mogelijkhied is om dit
via Window -> CSS Styles te doen dit gaat sneller.
Stap 5: Voor het
toepassen van stylesheets selecteer je het gewenste doel zoals text,
tabellen, afbeeldingen e.d. Dan zorg je dat het CSS tabblad is geopend
en klik je met je muis op de gemaakt CSS Style. Een anderre mogelijkheid
is Text -> CSS Styles -> En daar de gemaakte Style Sheet aan
te vinken.
Het aanpassen van een stylesheet:
Het aanpassen van een stylesheet
doet u door dubbel te klikken op de stylesheet, hier kunt u vervolegns
uw oude instellingen weer terug vinden en bijwerken. Klik daarna op
ok. En het gewenste resultaat zal gelijk door Dreamweaver worden toegepast.
