HTML är ett märkspråk där vi märker ut vår hemsida med hjälp av taggar. Vi märker exempelvis ut var det ska vara en rubrik eller text, var vår bilder ska ligga och så vidare.
CSS är stilspråk vilket gör att vi kan förändra våra taggar med att till exempel byta färg på texten, ändra storlek eller skapa marginaler. I CSS väljer vi vad vi vill förändra. Ett enkelt val är att välja någon tagg i vår HTML, för att välja en tagg är det bara att skriva taggens namn. Nedan kan du se hur jag har valt h1 och sedan ändrar jag textfärg på min h1:a.
h1 {
color:red;
}Syntaxen för CSS är annorlunda än HTML. Iställer för att använda större eller mindre än så används här klammerparentser kallas också måsvingar eller curly brackets på engelska.
Vi väljer först vad vi vill förändra och använder sen måsvingar. Mellan måsvingarna skriver vi en egenskap (color) och ger den ett värde (red).
Mellan måsvingarna kan vi skriva mer CSS för att göra ytterligare förändringar.
h1 {
color:red;
font-size:64px;
}Syntaxen för CSS: Först väljer vi vad vi vill förändra (selector). Om vi tar exemplet ovan så är det h1. Efter det behöver vi måsvingar åt båda hållen. Mellan måsvingarna lägger vi till egenskaper och sen ett värde till egenskapen. Mellan egenskapen och värdet använder vi kolon : och efter värdet använder vi semi-kolon ;
Semikolonet behövs om vi ska skriva mer än en egenskap (property) och värde (value). Dessa tillsammans (egenskap & värde) brukar kallas declaration (finns inget riktigt bra svenskt ord). Vi behöver alltså ett semikolon för att berätta att nu är denna declaration slut och jag tänker skriva en till.
Vi kan välja alla taggar i ett dokument för att förändra utseendet eller layouten.
Var skriver jag CSS?
Nu har vi bara gått igenom lite hur CSS ser ut men vart i mitt dokument kan jag skriva detta? Jag vill att vi jobbar med det som heter external stylesheet det betyder att vi har en seperat fil där vi skriver all vår CSS. Om vi har en egen fil som vi skriver CSS i så behöver vi något sätt att koppla ihop vår HTML-fil med vår CSS-fil. För att skapa en ny och om ni använder Dreamweaver ser snarlikt ut i alla program så räcker det att gå via menyn arkiv och sen skapa nytt. Nästa dialogruta kan ni välja CSS. Nästa steg är att spara filen via arkiv spara eller ctrl+s. Spara filen på samma plats som ni har er HTML-fil eller i en undermapp där er HTML-fil ligger.
För att koppla er CSS så kan ni använda er av Dreamweavers funktion via arkiv -> koppla formatmall och leta upp er fil. Alternativt lägger man in meta-taggen själv mellan head-taggarna. Vi har pratat om attribut och värde och dessa finns även med på denna tagg.
<link href="style.css" rel="stylesheet">Ovan räcker för att länka, detta förutsätter att filen heter style.css och ligger i samma mapp som HTML-filen. Surfar ni runt eller använder er av Dreamweavers funktion för att koppla CSS:en så tillkommer ett till attribut, det måste inte vara med utan funkar ändå men det gör inget om det är med.
<link href="style.css" rel="stylesheet" type="text/css">Det är också möjligt att lägga till CSS på två andra sätt som heter internal och inline. Båda dessa sker direkt i HTML-dokumentet. Det går att läsa mer på W3Schools – https://www.w3schools.com/css/css_howto.asp
Klasser
I CSS väljer vi vad vi vill förändra. Så här långt har vi kollat på hur man väljer en tagg, det kan ibland vara bra men ibland måste vi kunna separera taggar. Vi har exempelvis många stycken (p-taggar), väljer vi p-taggen så kommer alla förändras men jag kanske bara har som avsikt att förändra en av dem. Jag måste då kunna separera dessa på något sätt, då kan använda klasser. Med hjälp av klasser kan vi namnge våra taggar med ett valfritt namn förutom att det inte få börja på en siffra. Att sätta en klass på en tagg måste vi då såklart göra i vår HTML. Klass är ett attribut som vi kan lägga till på vilken tagg vi vill.
<p class="intro">Här är min första text efter en rubrik, den får en klass som heter intro
för jag vill att den ska kunna var lite annorlunda mot övriga p-taggar</p>Om vi tittar på ovanstående kod så har vi lagt till attributet class och sedan har vi ett värde som heter intro. Värdet bestämmer du helt själv men undgå å,ä eller ö och börja inte med en siffra. När vi har lagt till en klass så kan vi välja den i CSS:en istället för taggen. Det betyder att den kommer välja alla som har klassen intro. Det som är bra med klasser är också att vi kan återanvända den på flera olika taggar om de ska ha samma egenskaper. För att välja en klass i CSS så använder vi oss av en punkt följt av klassens namn sen är det precis likadant som tidigare.
.intro {
font-weight:700;
font-size:21px;
font-style:italic;
}Med hjälp av klasser kan jag alltså skilja på taggar med samma namn. Ovan bestämmer tjockleken på texten med font-weight, storleken på texten med font-size och utseende med font-style som med italic gör att texten blir kursiv.
DIV-taggen
Många av våra taggar har någon betydelse och också ett förutbestämt utseende. Ta rubriken som exempel, använder vi h1 kommer texten bli större och vara fet stil. DIV-taggen däremot har ingen betydelse och ingen direkt styling på sig (den har vissa egenskaper som vi kan ta upp senare) lägger vi in en div tagg utan något mer på en hemsida så kommer den inte synas mer än i vår markup.
DIV-taggen ska vara en sektion på hemsidan, idag har vi flera semantiska element som vi också kan använda, vad semantiska element är kommer vi till senare. Oavsett är DIV-taggen populär för att bygga en layout och vi kommer använda den på våra lektioner. Eftersom DIV-taggen kan förekomma på många platser i ett dokument och vi kanske önskar separera dem så kan vi använda klasser till det. Bara för att träna CSS och HTML så kan DIV-taggen vara bra. Nedan exempel kommer skapa en ruta med bakgrundsfärgen röd och flytta rutan (med hjälp av margin) 10 pixlar åt alla håll (uppe, höger, nere, vänster). Har vi flera div så kan vi alltså separera dem med hjälp av klasser.
<div></div>div {
background-color:red;
width:200px;
height:200px;
margin:10px;
}