Custom CSS opdracht

Met CSS kan je de stijl en vormgeving van je site veranderen. Deze opdracht is ook onderdeel van je examen. Daar maak je een Brandbook. Om dit te oefenen maak je  een analyse van een artikel op een nieuws-website. Die site kies je zelf. Je beschrijft de stijl van dat artikel. Dat doe je in een Bericht op je eigen website. Lever het in als url, in Teams.

In opdracht 2 maak je dan met Custom CSS die stijlen na. Zodat jouw website in de stijl van die nieuws-website is. Meer weten over CSS? Lees dan dit.

En in opdracht 3 pas je eigen stijlen toe op een plaatje, en op de eerste alinea.

Opdracht 1. Analyse

Kies een nieuws-website. Noteer de stijl van de onderstaande onderdelen van een artikel. Gebruik het web-infovenster (rechtsklik  > Inspecteer) om dat op te zoeken. Schrijf er een Bericht over,  op je website. Doe er ook screenshots bij van het artikel en een paar van jouw 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 (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 zo’n webinfovenster:

Klik voor een vergroting

In het voorbeeld is de stijl van de koptekst h1:

  • Kleur
    color: #141412;
  • Lettertype
    font-family:  Bitter, Georgia, serif
    (dus de Bitter, en als de bezoeker dat niet heeft: dan de Georgia, en anders een serif 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”. Dat is in de meeste WordPress-sites zo. In jouw CSS wordt dat dan straks:

h1.entry-title { hier komen de stijlen }

Een paragraaf in de HTML van WordPress is meestal een p die in een groot blok staat. Dat blok is meestal een  <div class=entry-content>. In jouw CSS wordt dat dan:

.entry-content p { hier komen de stijlen }

Opdracht 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. Die zie je dan bij Dashboard > Weergave. Voeg daar je css-code toe. Een gewone WordPress-paragraaf kun je in de CSS meestal 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:

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

Als het dan nog niet werkt kan je extra Refreshen. In elke browser anders, maar vaak zo:

  • ⌘ R is Refresh ZONDER CSS
  • ⌘ ⇧ R is Refresh MET CSS

Filmpje met uitleg

 

3. Gebruik twee eigen classes

Gebruik ook twee eigen classes: een voor plaatjes, en een voor tekst. Pas die toe in je artikel. Bijvoorbeeld voor een border om een plaatje. Voeg deze CSS toe aan het plaatje. In de Classic editor bijvoorbeeld zo: Klik het plaatje > klik Potloodje > vul bij CSS-klasse jouw class in:

In de nieuwe WordPress Blok-editor: klik het plaatje, klik de drie puntjes > Meer instellingen > beneden: Geavanceerd > class

En in de Custom CSS zet je dan iets als dit om het te laten werken:

.border {border: 5px solid grey; border-radius: 100px;}

 Lever drie screenshots in op Teams: 1x de HTML, 1x de CSS en 1x het resultaat.

Doe dit ook voor een tekst, bijvoorbeeld voor de stijl van de eerste alinea (de intro):

.intro {font-weight:bold; font-size: 1.6rem;}

Pas deze stijl “intro” toe op de eerste alinea van een bericht, met de code <span class=intro>  aan het begin, en aan het einde </span>. Dit moet in de HTML Code Editor. Die zit bij de knoppen Visueel / Tekst rechtsboven, of in de nieuwe WordPress Blok-editor  via de 3 puntjes > als HTML omzetten:

<span class=intro> Hier komt de hele eerste alinea </span>

 Lever ook hiervan drie screenshots in.