How to add CSS

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

Three ways to use CSS

There are three ways to insert a stylesheet:

  • External CSS
  • inre CSS
  • inre CSS

External CSS

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

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

exempel

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Detta är en rubrik</h1>
<p>Detta är en stycke.</p>
</body>
</html>

Prova själv

externa stilmallar kan skrivas i vilket textredigeringsverktyg som helst och måste sparas med .css-utökningen.

externa .css-filer bör inte innehålla några HTML-taggar.

"mystyle.css" ser ut så här:

"mystyle.css"

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

Observera:lägg inte till utrymme mellan attributvärdet och enheten (t.ex. margin-left: 20 px;) korrekt skrivning är:margin-left: 20px;

inre CSS

om en HTML-sida har en unik stil, kan inre stilmall användas.

inre stilar definieras inom <style>-elementet i head-sektionen.

exempel

inre stilar definieras i HTML-sidans <head>-sektion inom <style>-elementet:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>Detta är en rubrik</h1>
<p>Detta är en stycke.</p>
</body>
</html>

Prova själv

inre CSS

inre stilar (också kallade inline-stilar) kan användas för att tillämpa unika stilar på enskilda element.

för att använda inre stilar, lägg till style-attributet till det relevanta elementet. style-attributet kan innehålla alla CSS-attribut.

exempel

Inre stilar definieras i HTML-sidans <head>-sektion inom <style>-elementet:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Detta är en rubrik</h1>
<p style="color:red;">Detta är en stycke.</p>
</body>
</html>

Prova själv

tips:inre stilar förlorar många fördelar hos stilmallar (genom att blanda innehåll med presentation). Använd detta metod med försiktighet.

flera stilmallar

om några egenskaper definieras för samma väljare (element) i olika stilmallar, används värdet från den sista lästa stilmallen.

antag att någonextern stilmallhär är stilen som har satts för <h1>-elementet:

h1 {
  color: navy;
}

antag att någoninre stilmallhar också satt följande stil för <h1>-elementet:

h1 {
  color: orange;    
}

exempel

om den interna stilen är länkad till en extern stilmallefterom det är definierat, kommer <h1>-elementet att vara orange:

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

Prova själv

exempel

men om det är länkat till en extern stilmalltidigareDefinierade interna stilar kommer att göra att <h1>-elementet blir djupt blått:

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

Prova själv

Kombinationsordning

När flera stilar specificeras för ett HTML-element, vilken stil kommer att användas?

Alla stilar på sidan kommer att "kombineras" enligt följande regler till en ny "virtuell" stiltabell, där den första prioriteringen är högsta:

  1. Inlines stilar (i HTML-element)
  2. Externa och interna stilark (i head-sektionen)
  3. Webbläsarens standardstilar

Därför har inlines stilar högsta prioritet och kommer att täcka över externa och interna stilar samt standardstilar i webbläsaren.

Prova själv