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
  • intern CSS
  • inline CSS

External CSS

By using an external stylesheet, you can change the entire look 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.

eksempel

External style is 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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Prøv det selv

ekstern stilark kan skrives i enhver teksteditor og skal gemmes med .css-udvidelsen.

ekstern .css-fil bør ikke indeholde nogen HTML-tagg.

"mystyle.css" er som følger:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

bemærk:føj ikke et mellemrum mellem egenskabsværdien og enheden (f.eks. margin-left: 20 px;）。Korrekt skrivemåde er:margin-left: 20px;

intern CSS

hvis en HTML-side har en unik stil, kan man bruge en intern stilark.

intern stil defineres i <style>-elementet i head-delen.

eksempel

intern stil defineres i HTML-sidens <head>-del i <style>-elementet:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Prøv det selv

inline CSS

inline-stil (også kendt som inline-stil) kan bruges til at anvende unikke stilarter til enkelt elementer.

for at bruge inline-stil, skal du tilføje style-egenskaben til det relevante element. style-egenskaben kan indeholde enhver CSS-egenskab.

eksempel

inline-stil defineres i den relevante elements "style"-egenskab:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

Prøv det selv

hint:inline-stil mister mange af stilarkets fordele (ved at blande indhold med præsentation). Brug denne metode med forsigtighed.

flere stilark

hvis der er defineret nogle egenskaber for samme vælger (element) i forskellige stilark, vil værdien fra det sidst læste stilark blive brugt.

låt os antage, at enekstern stilarkden stil, der er sat for <h1>-elementet, er som følger:

h1 {
  color: navy;
}

låt os antage, at enintern stilarkog har også sat følgende stil for <h1>-elementet:

h1 {
  color: orange;    
}

eksempel

hvis intern stil er knyttet til en ekstern stilarkefterhvis defineret, vil <h1>-elementet være orange:

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

Prøv det selv

eksempel

men, hvis den er knyttet til en ekstern stilarkførIndeholder intern stil, så vil <h1>-elementet være mørkeblå:

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

Prøv det selv

Klædeskabe rækkefølge

Når der er flere stilarter specificeret for et HTML-element, hvilken stil vil blive brugt?

Alle stilarter på siden vil blive "kladset" efter følgende regler til en ny 'virtuel' stilark, hvor den første prioritet er højeste:

  1. Inline-stil (i HTML-elementer)
  2. Eksterne og interne stilark (i head-sektionen)
  3. Browserstandardstilarter

Derfor har inline-stil højeste prioritet, og den vil overrive eksterne og interne stilarter samt standardstilarter i browseren.

Prøv det selv