01. syntax (selector, class, id)

Previous09. speciale karakters NextBEM-notatie

Last updated 2 years ago

01. syntax (selector, class, id)

Door gebruik te maken van CSS in combinatie met HTML kan je een webpagina visueel aanpassen. Concreet staat CSS toe om via code te bepalen hoe een element er op een pagina zal uitzien. Je kan bijvoorbeeld de achtergrondkleur van een webpagina bepalen, hoe de paragrafen er zullen gaan uitzien door te kiezen voor een bepaalde kleur en lettertype, of bijvoorbeeld dat alle h1-titels in een cursief blauwe Times-font staan van 16pt groot.

Om CSS te begrijpen en te kunnen toepassen hoe je best in het achterhoofd dat rond elk element een onzichtbaar kader staat die de lay-out beperkt tot net dat element.

Door gebruik te maken van CSS kunnen zowel block- als inline-elementen binnen een webpagina er dus anders gaan uitzien. In de bovenstaande afbeelding worden de block-element, zoals <body>, <h1>, <h2> en <p> aangegeven door rode kaders en rond de inline-elementen <i> en <a> staan groene kaders.

Wat kan er zoal aangepast worden met CSS? kaders: width en height, border (color, width en style), background-color en background-images, position binnen het scherm tekst: font-family, size, color, italic, bold, uppercase, lowercase, small-caps specifiek: elementen zoals lijsten, tabellen en formulieren

stijlregel, een close-up

CSS werkt door dit te gaan combineren en linken aan HTML-elementen. Dit zal dan bepalen hoe bepaalde elementen binnen een webpagina getoond zullen worden. Een stijlregel bestaat uit 2 elementen: een selector en een declaratie, veelal een blok met één of meer stijldeclaraties die wordt begrensd door accolades (gekrulde haken).

selector

De selector selecteert dat element waarvoor de stijl geldt. Hier staat een voorbeeld van een type-selector. Er zijn verschillende soorten selectoren die later besproken zullen worden, maar twee worden reeds nu aangehaald.

css-declaratie

Een stijldeclaratie bestaat uit een eigenschap en een waarde voor die eigenschap. Concreet bestaat een CSS-declaratie uit 2 delen: een eigenschap (property) en een waarde (value), vervat binnen gekrulde haken. Er kunnen meerdere stijldeclaraties tegelijk worden opgenomen door ze naast of onder elkaar te plaatsen, gescheiden door een punt-komma. De CSS-declaratie van bovenstaand voorbeeld in detail bekeken en benoemd:

h1, h2, h3 = type selector
{ = codeblok tussen {}
font-family = eigenschap (property)
: = toekenning (assignment)
Arial = waarde (value)
; = einde declaratie
color = eigenschap (property)
: = toekenning (assignment)
yellow = waarde (value)
; = einde declaratie
} = codeblok tussen {}

koppelen van HTML met CSS

Stijlen kunnen op verschillende manieren aan HTML gekoppeld worden.

inline CSS

Bij inline CSS wordt CSS geschreven tussen de HTML-code.

<!DOCTYPE html>
<html>
    <body>
        <h1 style="background-color: red; color: yellow;">Dit is een gele titel op een rode achtergrond.</h1>
        <p style="color: red;">Dit is een paragraaf met rode tekst.</p>
    </body>
</html>

interne CSS

Met behulp van een stijlblok binnen het style-element in het head-element van het document kan ook CSS geschreven worden. Onderstaand is een voorbeeld van interne CSS, waarbij deze stijlregels zullen toegepast worden op alle h1 en p-elementen binnen de pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>interne CSS</title> 
    <style>
      h1 {
        background-color: red;
        color: yellow;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Dit is een gele titel op een rode achtergrond.</h1>
      <p>Dit is een paragraaf met rode tekst.</p>
    </main>
  </body>
</html>

externe CSS

Aangezien een bepaalde stijl op meerdere pagina's binnen een website meestal terugkomt, is het verstandig om de CSS in een extern stijlblad te plaatsen, een externe CSS (css/style.css). Een extern stijlblad is een document, waarin stijlen zijn beschreven die door één of meer HTML-documenten gebruikt kunnen worden.

De koppeling vanuit een HTML-document naar een stijlblad gebeurt door het link-element te plaatsen in de head van een HTML-document. Aan het link-element worden de attributen rel en href toegevoegd.

<!DOCTYPE html>
<html>
    <head>
        <title>externe CSS</title> 
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <main>
            <h1>Dit is een titel.</h1>
            <p>Dit is een paragraaf.</p>
        </main>
    </body>
</html>

Het link-element mag een onbeperkt aantal malen opgenomen worden in een document. Het href-attribuut specificeert welk stijlblad, waarvan de bestandsnaam de extensie css heeft, geopend moet worden. Het rel-attribuut geeft aan dat het bij het gerelateerde bestand gaat om een stylesheet en heeft dan ook als waarde "stylesheet". ~~(Het~~ type~~-attribuut definieert het Internet Media (MIME) type van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css".)~~

verschillende types CSS-selectoren

Hieronder worden de verschillende soorten selectors vermeld met hun betekenis en een voorbeeld.

meer info: https://www.w3schools.com/css/css_selectors.asp

universele selector

heeft betrekking op alle elementen binnen het document of pagina

* {}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_universal

type-selector

heeft betrekking op element-namen

h1, h2, h3 {}

class-selector

heeft betrekking op een element met een class-attribuut, waarvan de waarde overeen komt met datgene dat beschreven staat achter het punt (.)

/* voor elk element met class-atribuut waarvan waarde 'note' is */
.note {}
/* voor <p>-element met class-atribuut waarvan waarde 'note' is */
p.note {}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class

id-selector

heeft betrekking op een element met een id-attribuut, waarvan de waarde overeen komt met datgene dat beschreven staat achter #

/* voor elk element met id-atribuut waarvan waarde 'introduction' is */
#introduction {}

try it yourself: https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id

child-selector

heeft betrekking op een element dat een direct kind is van een ander element

/* voor elk <a>-element als direct kind van <li>-element (niet voor andere <a>-elementen op de pagina) */
li>a {}

descendant-selector

heeft betrekking op een element, enkel wanneer deze een nakomeling (descendant) is van één of meerdere andere elementen (en dus niet een direct kind van dat element)

/* voor elk <a>-element binnen een <p>-element */
p a {}

inheritance of erfenis

Als voor het body-element een font-family of color gespecificeerd wordt, is het gebruikelijk dat dit ook op het kind-elementen van toepassing is. De waarde van de font-family wordt dus overgeërfd door deze kind-elementen. Hierdoor moeten minder css herschreven worden, wat dan weer resulteert in kortere en meer eenvoudige style sheets.

<!-- HTML -->
<body>
    <main>


        <h1>Potatoes</h1>

        <p>There are dozens of different potato
varieties.</p>

        <p>They are usually described as early, second
early and maincrop potatoes.</p>

    </main>
</body>

/* CSS */
body {

    font-family: Arial, Verdana, sans-serif;

    color: #665544;

    padding: 10px;}

main {

    border: 1px solid #665544;

    background-color: #efefef;

    padding: inherit;}

CSS voorrangsregels

Als er twee of meer regels zijn die betrekking hebben op één en hetzelfde element, is het belangrijk te weten wat wanneer van toepassing is.

* {

    font-family: Arial, Verdana, sans-serif;}

h1 {

    font-family: "Courier New", monospace;}

i {

    color: green;}

i {

    color: red;}

b {

    color: pink;}

p b {

    color: violet;}

p#intro {

    font-size: 100%;}

p {

    font-size: 75%;}

laatste regel

Als de twee selectors identiek zijn, heeft de laatste van de twee voorrang.

specificiteit

Als een selector meer gedetailleerd is dan de anderen, heeft die regel voorrang op de meer algemene. voorbeeld: h1 is specifieker dan * p b is specifieker dan p p # intro is specifieker dan p