Designhjälpen är en nystartad guide för alla bloggare/bloggerskor som vill ändra utseendet på sin blogg. Observera att designhjälpen är anpassad till blogg.se. Om du har förslag på vad jag kan skriva om eller feedback om det jag skrivit, kontakta mig på losanbloggen@gmail.com.

Grunder
» Vad är CSS och hur använder man det?
» Genomgång av stilmallen

Text & typsnitt
» Attribut för text - vad som går att ändra

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.

---

Dessa attribut är som sagt för texten. Det finns en hel del som bestämmer mer för fonten (teckensnittet) också. Det kommer att dyka upp en artikel om attribut för font så småningom.

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, losanbloggen@gmail.com.

Ä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 :)