När en webbläsare läser en stilmall kommer den att formatera HTML-dokumentet enligt informationen i stilmallen.
Det finns tre sätt att infoga en stilmall:
Extern CSS
Intern CSS
Inline 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.
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:
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;
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.
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>
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.
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.
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;
}
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>
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>
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:
Inline-stil (inuti ett HTML-element)
Externa och interna stilmallar (i huvudsektionen)
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>