Basis CSS - Hoe HTML aanspreken

Wat zijn HTML-elementen (tags)

Een HTML-element of tag is een onderdeel van het Document Object Model (DOM) dat wordt gebruikt om webpagina's met HTML gestructureerd weer te geven. De meeste HTML-elementen bestaan uit een begin- en eindtag en kunnen daartussen uit verschillende inhoud bestaan.

Syntax: <element></element>

Enkele voorbeelden:

  • <html></html>
  • <head></head>
  • <body></body>
  • <div></div>
  • <span></span>
  • <a></a>

Elke tag kan worden aangesproken door CSS (Cascading Style Sheets) maar kan ook een ID of meerdere Classes worden toegewezen zodat we deze meer gericht kunnen aanspreken met CSS.

Syntax uitzonderingen:

Onderstaande tags hebben geen sluitende tag. De eigenschappen worden binnen de tag opgegeven.

  • <img>: Een van de werkpaardelementen van HTML, dit is de afbeeldingstag. Het wordt gebruikt om grafische afbeeldingen aan een webpagina toe te voegen.
  • <br>: Een regeleinde, vaak gebruikt in tekstinhoud om een ​​enkel regeleinde te maken in plaats van een alinea. Het moet niet worden gebruikt om visuele scheiding op een pagina te creëren door veel <br>-tags op elkaar te stapelen, omdat die functie een visuele behoefte is en daarom het domein van CSS in plaats van HTML.
  • <hr>: Een horizontale regel, dit is een rechte lijn op een pagina. In veel gevallen creëren CSS-randen scheidingslijnen in plaats van dit HTML-element.
  • <link>: niet te verwarren met de "hyperlink"- of ankertag (<a>), deze link is bedoeld om een ​​koppeling in te stellen tussen een document en een externe bron. Gebruik het om bijvoorbeeld naar een extern CSS-bestand te linken
  • <area>: Gebruikt voor het gebied binnen een afbeeldingskaart.
  • <base>: de basis-URL voor alle relatieve URL's in een document. Er kan niet meer dan één van deze per document zijn en deze moet in de kop van de pagina staan.
  • <col>: Specificeert kolomeigenschappen voor elke kolom binnen een <colgroup>-element.
  • <command>: Specificeert een commando dat een bezoeker kan aanroepen.
  • <embed>: Gebruikt met externe applicaties en interactieve inhoud voor integratie.
  •  <input>: Een formulierelement dat wordt gebruikt om informatie van bezoekers vast te leggen. Er zijn een aantal geldige invoertypen, van de gebruikelijke "tekst"-invoer die al jaren in formulieren wordt gebruikt, tot enkele nieuwe invoertypen die deel uitmaken van HTML5.
  • <keygen>: deze tag maakt een veld voor het genereren van sleutelparen dat wordt gebruikt voor formulieren..
  •  <meta>: Metatags zijn "informatie over inhoud". Ze bevinden zich in de kop van een document en worden gebruikt om pagina-informatie door te geven aan de browser. Er zijn veel verschillende metatags die u op een webpagina kunt gebruiken.
  • <param>: Gebruikt om parameters voor plug-ins te definiëren.
  • <source>: Met deze tag kunt u alternatieve bestandspaden opgeven voor media op uw pagina, inclusief video's of afbeeldingen of audiobestanden.
  • <track>: deze tag stelt een track in die moet worden gebruikt met een mediabestand, een video of audio, die vaak worden toegevoegd met de tags <video> of <audio>.

Wat is het verschil tussen een ID en een Class

Wat is het verschil tussen een ID en een Class?
Een Class en een ID beschrijven beiden de opmaak van een specifiek element op een website. De schrijfwijze voor een Class is een punt gevolgd door een naam en voor een ID is dat een hashtag # gevolgd door een naam. Het verschil is dat je een Class meerdere malen kan gebruiken op een pagina. Een ID -naam moet uniek zijn en mag slechts 1 keer gebruikt worden per pagina.

De beiden kunnen wel onderdeel van elkaar zijn. Een ID kan verschillende Classes bevatten met dezelfde naam of verschillende namen, maar kan ook nog ID's bevatten. Deze laatsten moeten dan uiteraard weer een unieke naam hebben.

Een Class kan verschillende ID's bevatten met telkens een andere unieke naam.

Dat is wat we noemen genest Classes (nesting in het Engels)

Met Classes kun je één of meerdere elementen een stijl geven zoals een achtergrondkleur of lettertype eigenschappen, randen etc. De code ziet er bijvoorbeeld uit als hieronder. De naam van de Class is hier "afbeeldingen". Direct eronder staat een ID met de naam Logo.

De namen mag je dus zelf verzinnen.

.afbeeldingen {
        border:5px solid #000000;
        margin-left:50px;
}

#logo {
        border:5px solid #000000;
        margin-left:50px;
}

Aanspreken van verschillende ID's of Classes die bepaalde namen bevatten.

Zoals eerder besproken kan op een pagina slechts 1 maal een ID voorkomen. De naam moet uniek moet zijn maar mogen dezelfde woorden bevatten.

Div's met als ID #inhoud-rechts, #inhoud-links, #inhoud-onder en #inhoud-boven kunnen perfect op eenzelfde pagina voorkomen. De "volledige" naam moet wel uniek zijn!

Stel, je wil dat al die ID's dezelfde achtergrondkleur krijgen. Dan zou je dat als volgt kunnen in uw stylesheet zetten.

#inhoud-rechts,
#inhoud-links,
#inhoud-onder,
#inhoud-boven{
     background: #999999;
}

In CSS bestaat echter een syntax om al die ID in één keer te kunnen aanpreken.

div[id*=inhoud]{
        background: #999999;
}

Alle div's met een ID waar in de naam het woord "inhoud" in voorkomt worden aangesproken

 

Je kan het zelfs nog specifieker verder definiëren.

div[id^=inhoud]{
        background: #999999;
}

Alle div's met een ID waarvan de naam begint met het woord "inhoud".

Dit kan uiteraard ook voor Classes

div[class^=inhoud]{
        background: #999999;
}

Hoe spreek je een specifieke ID of Class aan zonder dat je andere met dezelfde naam beïnvloed?

Twee methodes om dit te doen.

  1. Geef de div zelf een ID of een Class en dan kan je die rechtstreeks aanspreken. Dit is de meest efficiënte manier.
  2. Ga hiërarchisch te werk. Kijk wat de bovenliggende ID's en Classes zijn en definieer die ook in uw css. Zolang de Class die wil aanspreken onderdeel uitmaakt van bovenliggende ID's en Classen kan dit zonder probleem meegeven.
    Je begint altijd met de parent div en de childs volgen met een spatie ertussen.
    vb #content .main-content .block-content{}

Een voorbeeld met verschillende methodes van aanspreken.

<html>
  <body>
    <div id="content">
        <div class="main-content">
            <div id="block-text-1">
                <div class="block-content">
                    <div class="block-title">Titel van blok 1</div>
                    <p class="lijn-1">Nog wat tekst</p>
                    <p>nog meer tekst</p>
                </div>
            </div>
            <div id="block-text-2">
                <div class="block-content">
                    <div class="block-title">Titel van blok 2</div>
                    <p class="lijn-1">Nog wat tekst</p>
                    <p>nog meer tekst</p>
                </div>
            </div>
        </div>
    </div>
  </body>
<html>

We hebben een html pagina met in de body een ID content daarin een Class main-content. In die main-content zitten twee blokken namelijk #text-block-1 en #text-block-2.
Beide blokken hebben nog een Class block-content met daarin een aantal paragrafen (<p>) waarvan de eerste paragraaf de Class lijn-1 heeft.

  • Standaard krijgen alle teksten een zwarte kleur en het lettertype sans-serif.
  • De blok titels krijgen lettergrootte van 1.6rem
  • De titel van blok 1 krijgt een blauwe kleur
  • De titel van blok 2 krijgt een groene kleur en een lettergrote van 1.2rem
  • De tekst van blok 2 wordt rood.
  • De 1ste paragraaf van blok 1 wordt oranje

Met onderstaande CSS zou dat allemaal moeten lukken

body{
   font-family: sans-serif;
   color: #000;
}
.block-title{
      font-size: 1.6rem;
}
#block-text-1 .block-title{
     color: blue;
}
#block-text-2 .block-title{
     font-size: 1.2rem;
     color: green;
}
#block-text-1 .lijn-1{
     color: orange;
}
#block-text-2 .block-content{
     color: red;
}

Resultaat