betyder Cascading Style Sheets, vilket i svensk översättning blir ungefär formatmallar (inte riktigt, men nästan...). Anledningen till att man använder är att det är ett lätt sätt att skilja utseende och innehåll.
Det finns olika sätt att använda på. 1. Med hjälp av attributet style 2. Genom att använda taggen <style> 3. Via en extern css-mall som länkas till html-sidorna
Med hjälp av attributet style : Om du vill ändra utseendet på en viss tagg, tex <p> så kan du skriva tex: <p style= color:red >Röd text<p> Alla övriga <p>-taggar i dokumentet kommer se ut som vanligt, utom den ovan.
Exempel: <p> Vanlig text, men helt plötsligt </p> <p style= color:red >röd text,</p> <p> sen blir det som vanligt igen. </p>
Resultat: Vanlig text, men helt plötsligt röd text, sen blir det vanligt igen
Genom att använda <style>-taggen: Om man vill göra ändringar för samtliga taggar på en sida är det bättre att lägga in formatmallen i dokumentets sidhuvud (i headtaggen, alltså).
Exempel: <html> <head> <style> p {color: red;} </style> </head> <body> <p>den här texten blir röd.</p> <p>den här texten med.</p> </body> </html>
Resultat: Den här texten blir röd. Den här texten med.
Via en extern css-mall: Det vanligaste och bästa sättet att arbeta med css är att ha en extern css-mall. En stor fördel: Du kan bestämma utseendet på flera sidor samtidigt, genom att skriva in definitionen bara en gång. Dessutom kan du koncentrera dig på utseende i css-mallen och på innehållet i htmldokumentet, utan att blanda ihop det.
Via en extern css-mall: Du använder taggen <link> i html-dokumentets sidhuvud för att koppla ihop htmlsidan med css-mallen. Du använder två attributet ska vara rel och href Värdet för rel är stylesheet, och för href skriver du in namn och adress till css-filen. Exempel: <head> <link rel= stylesheet href= mall.css > </head>
Via en extern css-mall: Du kan alltså koppla fast hur många sidor du vill till en och samma cssmall. Smidigt..css.html.html.html.html.html.html.html
Via en extern css-mall: I mallen skriver du in samtliga definitioner du vill använda för varje tagg. Här har vi definierat hur taggarna <h2> och <p> ska se ut. h2 { font-family: garamond; color: blue; } p { font-family: verdana; color: red; background-color: black; }
Via en extern css-mall: Om man nu skulle vilja ha tex två olika typer av stycken (ett vanligt och ett kursiverat) i sin text, så är det möjligt. Genom att använda attributet class till olika taggar - i det här fallet till <p>-taggen som ju är till för textstycken. Värdet för class-attributet kan vara nästan vad som helst, men det är smart att använda värden så att man själv förstår vad attributet gör; I det här fallet är värdet kursiv är smartare än värdet sten till exempel (men båda kommer funka). Exempel: <p class= kursiv >Kursiv text</p>
Via en extern css-mall: Om det här ska fungera så måste såklart class-attributet vara definierat i css-mallen. I vårt exempel skulle det se ut så här: p {font-family: verdana; color: gray; } p.kursiv { font-style: italic } Det här gör att vi dels bestämmer hur den vanliga <p>-taggen ska se ut, dels hur vår <p class= kursiv >-tagg ska se ut.
Via en extern css-mall: Vi kan nu formatera texten på två olika sätt. Såhär ser koden ut: html-dokument <html> <head> <link rel= styesheet href= mall.css > </head> <body> <p>vanlig text utan konstigheter</p> <p class= kursiv > Kursiverad text </p> </body> </html> css-dokument (mall.css) p {font-family: verdana; color: gray; } p.kursiv { font-style: italic }
Via en extern css-mall: Resultatet Vanlig text utan konstigheter Kursiverad text
Arbeta vidare!
Användbara taggar: <div> & <span> Två mycket användbara taggar - som egentligen inte gör något. Genom att använda <div>-taggen runt ett stycke (med rubrik, text etc.) och kombinera den med attributet style, så kan du formge ett textstycke. <div> används alltså bara för att påverka utseendet på en viss del av sidan. <span> gör exakt samma sak, men används för att påverka vissa delar inne i en text, tex. göra två ord mitt i texten kursiva.