Opmaak met CSS

Wat is CSS?

Met CSS (cascading style sheet) bepaal je hoe je website en alle onderdelen van je webpagina's er moeten uitzien.   CSS is een makkelijk te leren opmaaktaal.  Je kan HTML-elementen een plaats geven en hun uitzicht bepalen.

In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina:

  1. Sommige elementen gedragen zich als een “doos” (box, block) en kan je een hoogte en eenbreedte geven. Net zoals een “doos” een hoogte of een breedte heeft.
  2. Sommige elementen kan je geen hoogte of breedte meegeven nl. tekstelementen. Je kan nietzeggen dat een titel 100 pixels hoog moet zijn, want de hoogte van een titel wordt bepaald door zijn lettergrootte.

Met CSS kan je bepaalde onderdelen van de pagina selecteren en van uitzicht veranderen. Belangrijke eigenschappen die je kan aanpassen zijn:

  1. Typografie: lettertype, lettergrootte, regelafstand, hoofdletters, initialen, kleur van de letters, tekstschaduw... 
  2. Vorm: breedte, hoogte, randen, schaduwen, afrondingen...
  3. Plaats: bepalen waar elk onderdeel op de pagina moet staan.
  4. Achtergronden: kleur, afbeeldingen, patroon, herhalingen...
  5. Animaties en transities
  6. ...

    CSS bewaar je afzonderlijk

    In een tekstverwerker zoals MS Word schrijf je niet alleen je teksten. Je bepaalt ook hoe het document er zal uitzien. Je kan wel gebruik maken van gedefinieerde stijlen, maar toch zitten zowel de inhoud als de stijl van het document in éénzelfde bestand. 

    Als je de stijl van heel je site wil aanpassen, hoef je slechts één document te openen en te wijzigen!

    De opmaak van je website bepaal je in een afzonderlijk document. Dit biedt tal van voordelen. Je kan hetzelfde stijldocument linken aan al je webpagina's, of dit nu gaat om 1, 10 of 5 miljoen webpagina's. Als je de stijl van heel je site wil aanpassen, hoef je slechts één document te openen en te wijzigen!

    Hoe ga je te werk? 

    1. Bewaar het stijldocument in een afzonderlijke map. In het onderstaande voorbeeld zie je hoe het document style.css in de map style is bewaard. 
    2. Voeg in de <head>-sectie van al je HTML-documenten de link toe naar dit stijldocument.

    <link rel="stylesheet" href="style/style.css">

    Stijlregels voor HTML-elementen

    In een CSS-document kan je aan HTML-elementen stijlkenmerken toekennen. 

    Tekstelementen zoals titels, alinea's... kan je dus geen hoogte of breedte geven, maar je kan wel een heleboel andere eigenschappen opmaken:

    1. lettertype
    2. lettergrootte
    3. marge (links, boven, rechts, onder... of allemaal tegelijk)
    4. kleur
    5. ...

    Uiteraard gebruiken we voor CSS ook vaste benamingen in het Engels. Je kan niet zo maar wat gaan schrijven.

    lettertypefont-family
    lettergrootte
    font-size

    marge (links, boven, rechts, onder... of

    allemaal tegelijk)

    margin (margin-left, margin-top, margin-right,

    margin-bottom...)

    kleurcolor
    uitlijningtext-align

    Deze lijst is lang niet volledig, het is gewoon een overzicht van de belangrijkste stijlregels die we gaan gebruiken. 

    “Doos”elementen kan je ook nog andere eigenschappen meegeven:

    breedtewidth
    hoogteheight
    positie (een absolute plaats of een relatieve plaats) tov. andere elementen position
    plaats op de pagina (links, rechts...)float
    stapelen (elementen boven elkaar plaatsen)z-index
    afrondingborder-radius
    achtergrondkleurbackground-color
    achtergrondafbeeldingBackground-image
    marge (links, boven, rechts, onder... of allemaal tegelijk): de afstand van dit element tov andere elementen daar buiten margin (margin-left, margin-top, margin-right, margin-bottom...)
    padding (links, boven, rechts, onder... of allemaal tegelijk): de afstand van dit element tov andere elementen daar binnen padding (padding-left, padding-top, paddingright, padding-bottom...)
    randborder (border-left, border-top, border-right, border-bottom...)
    Nogmaals opgelet: de lijst is ook hier ver van compleet, maar met deze stijlregels kom je al behoordelijk ver!

    HTML-elementen selecteren

    In CSS selecteer je een HTML-element. Tussen akkolades schrijf je vervolgens de stijleigenschappen die bij dat element horen

    selector{          
        stijlkenmerk: eigenschap;          
        stijlkenmerk2:eigenschap;  
    }

    a. HTML-tags selecteren

    body{     
         font-family: Helvetica, Arial, sans-serif;
         font-size:1.2em;
    }
    article{
         border:1px solid #cccccc;
         padding:2%;
         border-radius:6% 12% 5% 0%;
         margin-bottom: 20px; }
    h1{
         color:deepskyblue;
    }
    img{
         max-width:100%;
    }

    b. Stijlklassen: een enorme uitbreiding van de mogelijkheden

    In het bovenstaande voorbeeld krijgen alle <h1>-titels een blauwe kleur. Alle afbeeldingen krijgen een maximale breedte van 100%. Alle <article>-elementen zien er exact hetzelfde uit op alle pagina's. Misschien wil je sommige artikels wel een andere achtergrondkleur geven. 

    Dat kan met stijlklassen. 

    Stel dat je sommige afbeeldingen links wil uitlijnen en andere rechts, dan kennen we (naargelang we dit wensen) een de <img>-elementen in onze HTML-pagina's een klasse waarin we definiëren waar de afbeelding moet terechtkomen.

    In HTML zou dit er zo kunnen uitzien:

    <!DOCTYPE html>
    <html>
         <head>
             <title>Computerwinkel Heverlee</title>
             <link rel="stylesheet" href="style/style.css"/>
         </head>
         <body>
             <article>
                 <h1>Laptop voor webdesign</h1>
                 <img src="images/water.jpg" class="fotolinks"/>
                 <p>Een laptop, schootcomputer of notebook is een draagbare computer die 
                 in principe op de schoot kan worden gebruikt. Laptops worden vooral gebruikt 
                 door mensen die op verschillende locaties met hun computer werken. ...</p>
             </article>
             <article>
                 <h1>Laptop voor webdesign 2</h1>
                 <img src="images/water.jpg" class="fotorechts"/>
                 <p>Een laptop, schootcomputer of notebook is een draagbare computer die in 
                 principe op de schoot kan worden gebruikt. Laptops worden vooral gebruikt door 
                 mensen die op verschillende locaties met hun computer werken. ...</p>
             </article>
         </body>
    </html>

    Je merkt dat de <img>-markeringen een attribuut "class" hebben gekregen:

    <img src="images/water.jpg" class="fotolinks"/>  
    <img src="images/water.jpg" class="fotorechts"/>
    De naam van de "class" mag je zelf bedenken. Ik koos hier voor "fotolinks" en "fotorechts".

    In het stijlbestand voegen we vervolgens de kenmerken van elke "class" in. Je selecteert een class op de volgende manier:

    .fotolinks{}
    .fotorechts{}

    Een class-naam laat je in het CSS-document voorafgaan door een "." (punt).

    In het CSS-document nemen we nu de volgende regels op:

    .fotorechts{
        width:50%;
        float:right;
        margin-left:2%;
    }
    .fotolinks{
        width:50%;
        float:left;
        margin-right:2%;
    }

    Goed om te weten:

    1. Een class mag je in een webpagina meerdere keren gebruiken.
    2. De naam van een class mag je zelf verzinnen.
    3. De naam van een class mag niet beginnen met een cijfer.
    4. De naam van een class mag geen spaties of vreemde tekens bevatten (zeker geen . of #)
    5. Je mag aan één element meerdere "class"es geven, telkens gescheiden door een spatie.
    6. In een CSS-document selecteer je een class op de volgende manier:

    .classnaam{
    }

      c. Eén enkel element selecteren

      Soms kan het handig/nuttig zijn om één enkel element een andere stijl te geven. Denk bijvoorbeeld aan een banner. Een banner komt slechts één keer voor in je webpagina. Als je één enkel element anders wil vormgeven, dan kan je aan dat ene element een bepaalde ID geven. 

      Opgelet: Een "class" kan je meerdere keren binnen één pagina gebruiken. Je kan zelfs meerdere klassen aan een element toekennen, maar een "id" is binnen één pagina uniek. 
      <div class="container">
          <div class="row">
              <div class="col s12 m12 pagepart" id="part1">
                  Een tekst....
              </div>
          </div>
          <div class="row">
              <div class="col s12 m12 pagepart" id="part2">
                  Een tekst...
              </div>
          </div>
      </div>

      Goed om te weten:

      1. Je merkt dat sommige "klassen" terugkeren (vb. pagepart, m12, s12, col...). 
      2. Een id is echter altijd uniek: part1 of part2. 
      3. Een id mag je in één webpagina dus maar één keer gebruiken.
      4. De naam van een id, mag je net zoals de naam van een class, zelf verzinnen.
      5. Een naam van een id of class mag niet beginnen met een cijfer.
      6. Een naam van een id of class mag geen spaties of vreemde karakters bevatten (zeker geen . of een #)
      7. Elk element mag slechts één ID hebben.
      8. In je CSS-document selecteer je een id op de volgende manier: 

      #naamid{
      }

      d. Andere selectietechnieken

      De hierboven vermelde selectietechnieken zijn lang niet de enige, maar wel de belangrijkste. 

      Je kan CSS-selectors ook achter elkaar plaatsen. Een voorbeeld...

      <nav>
          <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="contact.html">Contact</a></li>
          </ul>
      </nav>
      <a href="winkel.html">Winkel</a>
      Als je enkel de links binnen het nav-element wil selecteren, kan je in CSS de volgende selector schrijven:

      nav ul li a{
            
      }

      e. Stijl bij klik of muisover

      Aan een html-link kan je een andere stijl toekennen als je er met de muis overheen beweegt of als je er op klikt. 

      Muis over de link:

      a{
         color:white;
         background-color:black;
         display:inline-block;
         padding:10px;
      }
      a:hover{
         color:black;
         background-color:white;
      }
      Je schrijft bij de selector a:hover enkel de stijleigenschappen die effectief veranderen. 

      Muis ingedrukt op de link:

      Als je de muis ingedrukt houdt op een knop is de toestand a:active geactiveerd:

      a:active{
          color:white;
          background-color:orange;
      }
      home