CSS (Cascading Style Sheets) används för att formgiva HTML element.
Formgiva HTML med CSS
CSS presenterades tillsammans med HTML 4, för att erbjuda ett bättre sätt att formgiva HTML element.
CSS kan läggas till HTML på följande sätt:
-
Inline – använda formgivningsegenskapen i HTML element
-
Internal – använda <style> elementet i <head> sektionen
-
External – använda en external CSS fil
Det sättet som föredras för att lägga till CSS till HTML, är att lägga in CSS syntax i separata CSS filer.
Inline stilar
En inline stil kan användas man ska lägga till en unik stil till en enda förekomst av ett element.
För att använda inline stilar, använda formgivningsegenskapet i en relevant tagg. Formgivningsegenskapet kan innehålla vilket CSS egenskap som helst. Exemplet nedanför visar hur man ändras textfärgen och den vänstra kanten av en paragraf:
<p style=”color:blue;margin-left:20px;”>Det här är en paragraf.</p>
HTML Stil exempel – Bakgrundsfärg
Bakgrundsfärgens egenskap definierar bakgrundens färg åt ett element:
<!DOCTYPE html>
<html>
<body style=“background-color:yellow;”>
<h2 style=“background-color:red;”>Det här är en rubrik</h2>
<p style=“background-color:green;”>Det här är en paragraf</p>
</body>
</html>
HTML Stil exempel: Font, färg och storlek
Fontfamiljen, färgen, och fontstorleken egenskaperna definierar fonten, färgen och storleken av texten i ett element:
<!DOCTYPE html>
<html>
<body>
<h1 style=“font-family:verdana;”>A heading</h1>
<p style=“font-family:arial;color:red;font-size:20px;”>A paragraph.</p>
</body>
</html>
HTML Stil exempel – Textlinjering
Textlinjering egenskapen definierar den horisontella linjeringen av texten i ett element:
<!DOCTYPE html>
<html>
<body>
<h1 style=“text-align:center;”>Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Internal Style Sheet
Internal style sheet kan användas om ett enda dokument har en unik stil. Internal styles är definierade i <head> sektionen av en HTML sida, genom att använda <style> taggen, så här:
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External Style Sheet
External style sheet är ideal när stilen läggs till på många sidor. Med ett external style sheet, så kan du ändra hela utseendet av en hel webbsida genom att ändra en fil. Varje sida måste länka till samma style sheet genom att använda <link> taggen. <link> taggen är inne i <head> sektionen:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
