Klicka på länkarna under varje avsnitt för att komma rätt. Observera att designhjälpen är anpassad till blogg.se.
Om du har designfrågor som inte besvaras här, kontakta mig på [email protected]. Jag tar även gärna emot önskemål på vad jag ska skriva om. Som ni kanske märker är den under ständig uppbyggnad och än så länge är det dessvärre inte så mycket jag har skrivit om, men ni ser iaf vad som komma skall.


Grunder
» Vad är CSS?
» Vad är kodmall?
» Genomgång av stilmallen
» HTML i korta drag

Text & typsnitt
» Text & typsnitt
» Ändra färg på text
» Ändra storlek på text
» Ändra typsnitt på text
» Övriga attribut för text

Bakgrund & bilder
» Använd en bakgrundsbild på bloggen
» Byt bakgrundsfärg på bloggen
» Byt bakgrundsfärg i menyn
» Skapa en egen header

Länkar
» Effekter då muspekaren är över textlänk - t ex byt textfärg, bakgrundsfärg, storlek, typsnitt
» Öppna länkar i nytt fönster - så att din blogg inte lämnas när du länkar någon annan

Inlägg
» Lägg till bilder där tid och datum visas
» Linje/bild mellan inläggen
» Låt läsarna betygsätta dina inlägg
» Ändra utseende på inläggstexten
» Ändra utseende på inläggsrubriken

Övrigt
» Formulär
» Länk för att lägga till din blogg som bokmärke/bookmark
» Tabeller


Först och främst vill jag ha sagt att det är betydligt enklare att använda sig utav stylesheets, d.v.s. css, istället för att meka med <font>Text</font> på varje sida. Det blir lätt bara trassligt och till sist stämmer inget av koden (det gäller att ha tungan rätt i mun när det gäller det här). Jag har även läst att <font> planeras att så småningom försvinna ur html, hur pass tillförlitligt detta nu är. Tolka mig inte fel nu, jag använder mig själva ganska mycket utav denna tag.

Eftersom man på blogg.se har en stilmall (style.css) att ändra i kommer följande text att handla om hur man ändrar stil på text i den stilmallen.

  • color - Bestämmer färg på texten. Färgen skriver man ut antingen som en hex-kod eller med standardnamnet på färgen. Det kommer att dyka upp en artikel om färger så småningom.

    Exempel på hur det skrivs:

    .entrybody {
    color: black;
    }


    Har ni läst min genomgång av stilmallen så vet ni att .entrybody är texten i inläggen.


  • font-size - Textstorlek. Man kan välja från 1 (minsta) till 7 (största). Standardstorleken är 3. Det finns även andra storleksenheter man kan använda sig av, pt (points), px (pixlar), em (ems) och % (procent). Med alla de sistnämnda enheterna har man mer valmöjligheter eftersom dessa inte begränsas av 7 alternativ utan man kan välja i princip vilken storlek som helst.

    Här kommer en jämförelse med de vanligaste storlekarna (enligt vad jag stött på) för att se hur de olika enheterna förhåller sig till varandra:



    Dessvärre är detta inget som är helt tillförlitligt, utan hur stor texten är kan variera lite beroende på vilken dator och browser/webbläsare som läsaren använder.

    Exempel på hur det skrivs:

    .entrybody {
    font-size: 10 pt;
    }



  • font-family (kallas i html för font-face) - Bestämmer vilket typsnitt/teckensnitt/font som kommer att användas i texten innanför font-tagen. För din egen del funkar det med vilket typsnitt du än har installerat på datorn, men tänk på att de som läser din blogg/hemsida inte ser det på samma sätt om de själva inte har samma typsnitt på sin dator. Har de inte det så är det standardfonten Times New Roman de ser texten i.

    Ett alternativ är att välja några stycken liknande, utifall att läsaren inte har det huvudsakliga typsnittet, så har du ändå kontroll över vilket typsnitt som visas. Det görs på följande sätt:

    .entrybody {
    font-family: Bookman Old Style, Book Antiqua, Garamond;
    }


    Där Bookman Old Style är den font som helst ska visas, i andra hand Book Antiqua, och i tredje hand Garamond. Vill du bara att ett typsnitt ska användas och inga alternativa, skriver du bara ett namn.


    Jämförelse med hur det ser ut om man bara vill ändra en viss text i en kodmall (ska ej användas i stilmallen!):

    <font face="Bookman Old Style, Book Antiqua, Garamond
    ">Text här</font>


    De vanliga typsnitten som i stort sett finns på alla datorer, pc som mac, är följande:
    Notera att namnen ibland skiljer sig lite mellan mac och pc. Pc-namn står först, därefter mac-namn och sist namnet på "familjen" om typsnittet tillhör (i en familj tillhör liknande fonts).



    Obs!
    Symboliska typsnitt visas bara i Internet Explorer, i andra webbläsare visas substitut. Fast typsnittet Symbol funkar i Opera och Webdings i Safari.

    Här hittar ni en lång och trevlig lista med typsnittet som finns i OS X (Mac).

    Lista med typsnittet som finns för de som har Windows (PC).


    Om ni vill veta mer om de olika typsnittsfamiljerna:
    http://en.wikipedia.org/wiki/List_of_typefaces



» Gå vidare till information om övriga attribut.

Det finns ett gäng attribut (egenskaper) man kan använda sig av för att bestämma hur texten ska se ut. Det fetmarkerade är attributet och de kursiva är de värden man kan använda sig av inuti attributet.

  • color - Bestämmer färg på texten. Färgen skriver man ut antingen som en hex-kod eller med standardnamnet på färgen. Det kommer att dyka upp en artikel om färger så småningom.
  • direction - Bestämmer textens riktning. ltr eller rtl, d.v.s. left to right eller right to left.
  • letter-spacing - Ökar eller minstar avståndet mellan bokstäver/tecken. normal ger ett normalt avstånd och en bredd (t.ex. 12px eller -0.5px) ökar eller minskar avståndet.
  • line-height - Bestämmer avståndet på höjden mellan texten vilket syns mer om du skrivit flera rader. normal ger ett normalt avstånd, ett nummer (t.ex. 1.4) multipliceras med textstorleken för att bestämma avståndet, höjd (t.ex. 14pt) bestämmer ett exakt avstånd, % (t.ex. 140%) bestämmer avståndet i procent av textstorleken.
  • text-align - Bestämmer var texten ska befinna sig någonstans. left (texten kommer till vänster. brukar vara det automatiskt även om man inte använder text-align), right (texten kommer till höger), center (texten blir centrerad), justify (avståndet justeras mellan varje ord så att varje rad börjar och slutar på samma ställe.
  • text-decoration - Dekorerar texten. none (så som 'normal' text ser ut), underline (ger en linje under texten), overline (ger en linje över texten), line-through (ger en linje genom texten), blink (får texten att blinka. Obs! Detta är väldigt irriterande för ens besökare så det rekommenderas ej. Det funkar inte i Internet Explorer).
  • text-indent - Indrag för texten från vänsterkanten/marginalen. längd (t.ex. 20px, 1cm eller -20px. 0px är det 'normala'), % (t.ex. 5%) bestämmer ett indrag i procent av bredden i det område texten är.
  • text-transform - Bestämmer över textens gemener och versaler (små och stora bokstäver). none är det 'normala', capitalize gör första bokstaven i varje ord till versal, uppercase gör alla bokstäver till versaler, lowercase gör alla bokstäver till gemener.
  • word-spacing - Bestämmer avståndet mellan ord. normal är det 'normala', längd (t.ex. 20px eller -20px) ökar eller minskar avståndet.

Exempel:
Jag har i exemplet valt att ge stycket (p) lite attribut. Röd färg på texten, endast versaler, ett ordavstånd på 25px och att texten är centrerad är summan av kardemumman.

p {
color: #FF0000;
text-transform: uppercase;
word-spacing: 25px;
text-align: center;
}

Såhär blir stycket


Det är väldigt viktigt att man efter attributet har kolon (:) och efter värdet semi-kolon (;) för att det ska fungera.


» Gå vidare till information om de grundattribut som används mest (typsnitt, storlek etc).

Bestäm typsnitt för hela bloggen
BODY    {    font-family:typsnitt;    } 
BODY talar om att det är för hela bloggens 'kropp' vi ska bestämma typsnittet.
font-family talar om att det är typsnittet vi ska bestämma.
typsnitt är där du ska skriva namnet på typsnittet du vill att bloggen ska ha. HÄR (länk, ankare?, till annan del av sidan där jag skriver och visar de olika, vanliga typsnitten) kan du se vilka som är att föredra så att alla ser samma typsnitt som du.

Attribut för text
font-weight - Bestämmer hur bred texten ska vara. Alternativen är från 100 till 900 där 400 är detsamma som 'normal' och 700 detsamma som 'bold' (fetstil).

När man ska ändra färg, typsnitt, bakgrund, storlek och en massa annat så är tillvägagångssättet ganska snarlikt oavsett var och vad det är man ska ändra. Det handlar mest om att ändra på rätt ställe. Så för att hitta rätt i stilmallen kommer här nu en genomgång av vad de olika delarna i den står för. Jag går igenom delarna allteftersom de dyker upp i stilmallen.


#wrapper - Wrappern är det som omsluter menyn, headern och där inläggen kommer, d.v.s. hela bloggen (ej bakgrunden). Wrapper = hölje/omslag.
#header - Headern helt enkelt. Header = rubrik.
#side - Den del vid sidan av inläggen, oftast använd som meny. Här styr man t.ex. om den ska vara till höger eller vänster om inläggen.
#content - Delen där alla inläggen kommer. Content = innehåll.
#header a - Headerlänken som länkar till startsidan.

h1
- Om man har text istället för en bildheader (eller ovanpå den) så är det här man ändrar stilen för den texten.
h2 - Bloggbeskrivningen som dyker upp under headern.
h3 - Inläggsrubriker.

.navheader - Rubrikerna i menyn, såsom 'kategorier', 'senaste inläggen', 'sök'.
.nav - All text som förekommer i menyn som inte är rubriker eller länkar eftersom de har egna inställningar.
.nav ul - Den lista som länkarna i menyn kommer i. Här behöver man oftast inte bry sig om att ändra något.
.nav li - Samma som ovan.
.nav a - Länkarna i menyn, t.ex. de under 'senaste inläggen'.
.nav a:hover
- Hur länkarna ser ut när muspekaren är över dem.

.entrybody - Texten i inläggen. Entry = inlägg, body = kropp.
.entrymeta - Texten som är längst ner i inläggen där det bl.a. brukar stå 'kommentarer (0)', 'trackbacks (0)' och datumet för då nlägget skrevs.
.entrymeta a - Hur länkarna (kommentarer, trackbacks o.s.v.) längst ner i inläggen ska se ut.
.entrymeta a:hover - Hur länkarna längst ner i inläggen ska se ut när muspekaren är över dem.

.commentheader - Där det står 'Postat av: ...' bland kommentarerna.
.commenttext - Texten i själva kommentaren som någon skrivit.
.commentmeta - Texten längst ner i kommentaren där datum då kommentaret skrevs och URL brukar stå.
.commentmeta a - Länkar i texten längst ner i kommentaren, t.ex. URL-adressen.
.commentmeta a:hover - Hur länkarna ser ut när muspekaren är över dem.
.commentform
- Rutan som innehåller allt man ska fylla i för att skriva kommentar.

.separator - Linjen mellan varje inlägg.
.image - Bilder. Kanske du vill ha en border runt om bilderna?
.thumbnail - Förminskade bilder som kommer upp större på skärmen när man klickar på dem.
form - Rutan för sökfunktionen i bloggen.
#profile - Profilen, din personliga beskrivning. Brukar vara överst i menyn.


Du märker säkert att det finns en hel del andra grejer i din stilmall, men de jag nämnt är de man oftast brukar ändra. Skulle du ändå vilja veta vad något av det andra innebär så kontakta mig, louise(at)losan.se.

Är det några konstigheter i mina förklaringar så säg gärna till. Jag vill ju att det ska vara lättförstått.

Vad är CSS? Det är ett språk man använder för att styra utseendet på på t.ex. en blogg. CSS står för Cascading Style Sheets - också kallade stilmallar.


Det finns tre olika sätt att få in CSS på sin hemsida
  1. Man gör en extern stilmall som man styr all formatering av hemsidans alla sidor. Den externa stilmallen måste man ladda upp på hemsidan och sedan skriva följande på varje sida som ska innehålla formateringen:

    <HTML>
    <HEAD>
    <LINK rel=stylesheet href=style.css type="text/css">
    </HEAD>

    <BODY> ..</BODY>
    </HTML>

    Man kan skriva en stilmall i t.ex. Anteckningar - det behövs alltså inget avancerat program. Det viktiga är sedan att spara filen med filändelsen .css och inte t.ex. .txt som det blir i Anteckningar annars.
    Det går inte att ladda upp andra filer än bilder till sin blogg om man inte har ett webbhotell, men detta är redan fixat hos blogg.se. Det som heter style.css i koden ovan är detsamma som stilmallen hos blogg.se.

  2. Istället för att ha en extern fil kan man skriva in koden på varje sida. Det gör man på följande sätt:

    <HTML>
    <HEAD>
    <TITLE>Din titel på bloggen</TITLE>
    <STYLE type="text/css">
    <!--


    Här skriver du in de formateringar (attribut) du vill att bloggen ska ha. Jag kommer att gå igenom olika attribut lite senare :) Glöm inte att avsluta koden! Det gör du på följande sätt (Ett backslash, /, är det som avslutar en tag):

    -->
    </STYLE>

    </HEAD>
    </HTML>


    Skillnaden mot sättet ovan är att man med hjälp av detta kan skriva olika attribut på olika sidor istället för att alla sidor får samma formatering.

  3. Det tredje sättet är att man skriver css-koden direkt i tagen för det du vill ändra formatering på, alltså inte i tagen <HEAD> ...... </HEAD>. Hur det ser ut beror på vilka attribut man vill ha. Här är ett exempel där fonten och färgen ändras i ett speciellt stycke (tagen för ett stycke är <P>):

    Tagen innan formatering:
    <P>Här är den oformaterade texten.</P>

    Tagen efter formatering där Verdana är namnet på fonten och #000000 (svart) är färgen på texten:
    <P style="font-family:Verdana; color: #000000;">Här är den formaterade texten.</P>

    Det är alltså style="de attribut du vill ha" man skriver i de tags man vill ge en formatering.


Skriv gärna en kommentar om något är oklart eller om du har några andra frågor :)