Vad är CSS?
Css som står för Cascading Style Sheet är ett såkallat stilmallspråk och är till för att beskriva utseendet på dokument skrivna i märkspråk. Som till exempel HTML och XHTML, det går även att använda till XML. CSS styr helt enkelt utseendet på Elementen i HTML dokumentet som till exempel: färger, typsnitt, bakgrundsbilder, layout. Vad som helst i stort sett. Vilket innerbär att samma HTML dokument kan se olika ut med olika CSS mallar.
Syntax
CSS har en enkel uppbyggnad och använder sig av engelska nyckelord för att specificera olika stilar.
En stilmall består med en rad Reglemente, som har en eller flera Selectorer och en Declarations block, blocken omsluts av { } tecken. Inuti varje block har man en Egenskap, som följs utav ett : (kolon), sedan Värdet och till avslut ett ; (semikolon).
Selector { Egenskap : Värde ; }
Anropa en Selector
Om du vill att ett särskilt HTML Element ska ha en viss stil så ger man det Elementet Attributet ”class” eller ”id”. Det som skiljer sig mellan id och class är att id bara får användas en gång i samma HTML dokument medan class kan användas flera gånger om.
För att anropa en Selector i stilmallen ger du ditt class/id Attribut det namn på Selectoren som Värde.
Men om det är ett rent HTML element utan class eller id som du vill ge en viss stilmall döper du Selectoren till Elementnamnet, till exempel: body, a, p etc.
<html>
<head>
<style type="text/css">
<!--
body {
background-color: #ff0000;
}
-->
</style>
</head>
<body>
</body>
</html>
Om det är ett class som ska anropas så ska du ha en . (punkt) framför namnet på selectoren, till exempel: .vit
<style type="text/css">
<!--
.vit {
color: #ffffff;
}
-->
</style>
<span class="vit">texten som blir vit</span>
Och om det är ett id som ska anropas så ska du ha en # (fyrkant) framför namnet på selectoren, till exempel: #header
<style type="text/css">
<!--
#header {
width:300px
height:100px;
color: #ffffff;
background-color:#000000;
}
-->
</style>
<div id="header">Här visas texten i #header</div>
Inkludering
Man kan inkludera CSS på olika sätt till sitt HTML/XHTML dokument, här kommer 3 stycken sätt.
<link rel="stylesheet" href="style.css" type="text/css" />
Det bästa sättet att inkludera CSS på, i detta exempel använder man en extern .css fil som gör html koden snabbare att ladda. Den största fördelen är dock att man kan ändra i CSS filen och ändringarna syns direkt på alla HTML dokument.
<style type="text/css"> <!-- background-color: #ffffff; font-family: verdana; color: #000000; --> </style>
Med den här varianten inkluderar du css koden direkt i HTML dokumentet, koden ska då ligga i HEAD Elementet. Inte lika bra som första varianten för att HTML dokumentet blir större och någon mer seg laddat. Plus att man måsta ändra i varje HTML dokument om vill ändra utseendet på Webbsidan.
<div style="background-color:#000000;color:#ffffff;"> text </div>
Här skriver du CSS koden direkt i Elementet, den här varianten ska man bara använda för små ändringar, men problemet är att man måste gå in i varje HTML dokument för att ändra något.
Så gör det enkelt för dig, använd CSS i en extern stilmall.
Föregående: Vad är HTML?
0 Kommentarer på 'Vad är CSS?'
Ingen har kommenterat ännu.