How to add CSS

When the browser reads the stylesheet, it will format the HTML document based on the information in the stylesheet.

Three methods of using CSS

There are three ways to insert a stylesheet:

  • External CSS
  • interne CSS
  • inline CSS

External CSS

By using an external stylesheet, you can change the entire appearance of a website by simply modifying one file!

Each HTML page must include a reference to an external stylesheet file within the <link> element in the head section.

voorbeeld

External styles are defined within the <link> element in the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Dit is een kop</h1>
<p>Dit is een paragraaf.</p>
</body>
</html>

Probeer het zelf

externe stijlstijlen kunnen worden geschreven in elk teksteditor en moeten worden opgeslagen met de .css-uitbreiding.

externe .css-bestanden moeten geen HTML-elementen bevatten.

"mystyle.css" ziet er zo uit:

"mystyle.css"

body {
  achtergrondkleur: lichte blauw;
}
h1 {
  kleur: marine;
  marge-links: 20px;
}

let op:voeg geen spaties toe tussen de waarde van het attribuut en de eenheid (bijvoorbeeld marge-links: 20 px;) Correcte schrijfwijze is:marge-links: 20px;

interne CSS

Als een HTML-pagina een unieke stijl heeft, kan de interne stijlstijl worden gebruikt.

interne stijlen worden gedefinieerd in de <style>-elementen in de <head>-sectie.

voorbeeld

interne stijlen worden gedefinieerd in de <style>-elementen in de <head>-sectie van de HTML-pagina:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  achtergrondkleur: linnen;
}
h1 {
  kleur: kastanje;
  marge-links: 40px;
} 
</style>
</head>
<body>
<h1>Dit is een kop</h1>
<p>Dit is een paragraaf.</p>
</body>
</html>

Probeer het zelf

inline CSS

inline CSS (ook wel inline stijlen genoemd) kan worden gebruikt om unieke stijlen toe te passen op een enkel element.

Om inline stijlen te gebruiken, voeg de "style"-eigenschap toe aan het relevante element. De "style"-eigenschap kan elke CSS-eigenschap bevatten.

voorbeeld

inline stijlen worden gedefinieerd in de "style"-eigenschap van het relevante element.

<!DOCTYPE html>
<html>
<body>
<h1 style="kleur:blauw;text-align:centraal;">Dit is een kop</h1>
<p style="kleur:rood;">Dit is een paragraaf.</p>
</body>
</html>

Probeer het zelf

tip:inline stijlen verliezen veel voordelen van de stijlstijl (door inhoud en presentatie te combineren). Gebruik deze methode met voorzichtigheid.

meerdere stijlstijlen

als er enkele eigenschappen zijn gedefinieerd voor dezelfde selector (element) in verschillende stijlstijlen, dan wordt de waarde van de laatst gelezen stijlstijl gebruikt.

veronderstel dat eenexterne stijlstijlde volgende stijl is ingesteld voor het <h1>-element:

h1 {
  kleur: marine;
}

veronderstel dat eeninterne stijlstijlen heeft ook de volgende stijl ingesteld voor het <h1>-element:

h1 {
  color: orange;    
}

voorbeeld

als de interne stijl is gekoppeld aan een externe stijlstijlnaarals gedefinieerd, zal het <h1>-element oranje zijn:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Probeer het zelf

voorbeeld

maar, als de koppeling naar een externe stijlstijl之前Definieerde interne stijl, dan zal het <h1> element diepblauw zijn:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Probeer het zelf

Cascading Volgorde

Wanneer er meerdere stijlen worden toegewezen aan een HTML element, welke stijl wordt er dan gebruikt?

Alle stijlen in de pagina worden volgens de volgende regels 'gecascadeerd' naar een nieuwe 'virtuele' stylsheet, waarbij de hoogste prioriteit de eerste is:

  1. Inline stijlen (in HTML elementen)
  2. Externe en interne stylsheets (in de head sectie)
  3. Standaardstijlen van de browser

Daarom heeft inline stijl de hoogste prioriteit en overschrijft externe en interne stijlen en standaardstijlen van de browser.

Probeer het zelf