Custom CSS opdracht

Deze opdracht is ook onderdeel van je examen, want daar maak je een Brandbook ofwel Huisstijlboek. Om dit te oefenen maak je nu een analyse van een artikel in een door jou gekozen medium. Je beschrijft de grafische stijl van dat artikel in een eigen Bericht op je website. Lever het in als url, in Teams.

Aan de hand van de analyse maak je later met Custom CSS die stijlen na. Zodat jouw artikelen in de stijl van jouw gekozen medium kunnen zijn.

1. Analyse

Kies een website waar je wel eens een artikel leest. Noteer de stijl van de onderstaande onderdelen van een artikel daar. Gebruik het web-infovenster (rechtsklik  > Inspecteer). Schrijf er een Bericht over,  op je website. Doe er ook plaatjes bij: screenshots van het artikel en van twee webinfovensters.

  • De koptekst: kleur, lettertype, fontgrootte en interlinie,
    oftewel color, font-family, font-size en line-height
  • Hetzelfde van de tussenkopjes
  • Idem van de broodtekst ofwel body text
  • De kleur en stijl van links
  • Streamers of quotes: een blockquote, zie hieronder, als die er zijn
  • De stijl van Onderschriften bij foto’s
  • Als de eerste alinea afwijkt (de intro of lead), dan ook deze stijl
  • Een Chapeau: staat er nog iets bovenaan, boven de kop?
  • Wat kun je zeggen over de stijl van plaatjes?

Een voorbeeld van het webinfovenster:

Klik voor een vergroting

In het voorbeeld hierboven schrijf je op wat de stijl van de koptekst h1 is:

  • kleur / color: #141412 (donkergrijs)
  • lettertype / font-family:  Bitter, Georgia, serif
    (dus bij voorkeur de Bitter, maar als de bezoeker dat niet heeft, dan de Georgia, en anders gewoon een serif font ofwel een schreefletter)
  • fontgrootte / font-size: 48px
  • interlinie / line-height: 1.3

Verder noteer je ook de HTML van deze kop. In dit voorbeeld is dat een h1 met class=”entry-title”.

Hieronder een voorbeeld van een HTML blockquote:

Dit is voorbeeld van een streamer, ofwel quote. In WordPress en HTML heet dat een blockquote.

2. Custom CSS

Als je in jouw Customizer geen Custom CSS ziet (niet elk Thema heeft dat), dan activeer je de plugin voor Custom CSS. Voeg daar je css-code toe.

Noteer ook de HTML en de class van elementen. Bijvoorbeeld een h1 met class=”entry-title“. Een gewone paragraaf staat meestal in een div met class=entry-content. Dus elke p in elk artikel kun je in de CSS zo vormgeven:

.entry-content p { color: red; }

Dit betekent: alle p’s die in een div met class=”entry-content” staan worden rood.

Als het niet werkt zet je er !important bij, zo:

.entry-content p { color: red !important; }

Gebruik ook ergens een eigen class, en pas die ook ergens toe in je artikel. Bijvoorbeeld voor de intro, of voor een kader om een plaatje. Zoek zelf uit waar je deze CSS in jouw artikel kan toevoegen (ergens in de blok-editor bijvoorbeeld):

.plaatje {border: 1px solid black;}

3. Logo en Favicon

Info volgt nog.

4. Homepage

Info volgt nog.