Hur man lägger till CSS


Innehållsförteckning

    Visa innehållsförteckning


När en webbläsare läser en stilmall kommer den att formatera HTML-dokumentet enligt informationen i stilmallen.


Tre sätt att infoga CSS

Det finns tre sätt att infoga en stilmall:

  • Extern CSS

  • Intern CSS

  • Inline CSS


Extern CSS

Med en extern stilmall kan du ändra utseendet på en hel webbplats genom att ändra bara en fil!

Varje HTML-sida måste innehålla en referens till den externa stilmallsfilen inuti elementet , inuti huvudsektionen.

Exempel

Externa stilar definieras inom -elementet, inuti <head>-avsnittet på en HTML-sida:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


En extern stilmall kan skrivas i vilken textredigerare som helst och måste sparas med filtillägget .css.

Den externa .css-filen ska inte innehålla några HTML-taggar.

Så här ser filen "mystyle.css" ut:

"mystyle.css"

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

Obs! Lägg inte till ett mellanslag mellan egenskapsvärdet (20) och enheten (px):

Felaktigt (mellanslag):

margin-left: 20 px;

Rätt (inget blanksteg):

margin-left: 20px;


Intern CSS

En intern stilmall kan användas om en enda HTML-sida har en unik stil.

Den interna stilen definieras inuti <style>-elementet, inuti huvudet sektion.

Exempel

Interna stilar definieras inom <style>-elementet, inuti <head>-sektionen på en HTML-sida:

 <!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>

Prova själv →

<!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>



Inline CSS

En inline-stil kan användas för att tillämpa en unik stil för ett enskilt element.

För att använda inline-stilar, lägg till stilattributet till det relevanta elementet. De style-attributet kan innehålla vilken CSS-egenskap som helst.

Exempel

Inline-stilar definieras inom "style"-attributet för den relevanta element:

 <!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>

Prova själv →

<!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>


Tips: En inline-stil förlorar många av fördelarna med en stilmall (genom att blanda innehåll med presentation). Använd denna metod sparsamt.


Flera stilark

Om vissa egenskaper har definierats för samma väljare (element) i olika stilmallar, värdet från den senast lästa formatmallen kommer att användas.

Antag att en extern stilmall har följande stil för elementet <h1>:

h1
{
  color: navy;
}

Antag sedan att en intern stilmall också har följande stil för elementet <h1>:

h1
{
  color: orange;   
}

Exempel

Om den interna stilen definieras efter länken till den externa stilmallen, kommer <h1>-elementen att vara "orange":

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

Prova själv →

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>


Exempel

Men om den interna stilen är definierad före länken till den externa stilmallen, kommer <h1>-elementen att vara "Marin":

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

Prova själv →

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

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>



Cascading Order

Vilken stil kommer att användas när det finns mer än en stil specificerad för ett HTML-element?

Alla stilar på en sida kommer att "kaskad" till en ny "virtuell" stil enligt följande regler, där nummer ett har högsta prioritet:

  1. Inline-stil (inuti ett HTML-element)

  2. Externa och interna stilmallar (i huvudsektionen)

  3. Webbläsare som standard

Så en inline-stil har högsta prioritet och kommer att åsidosätta externa och interna stilar och webbläsarstandarder.

Prova själv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>