Nyhet! Besøk stihk.com for å få hjelp og gratis bloggdesign

En liten innføring i CSS for blogg.no

For jeg begynner å skrive guider om hvordan man gjør divere endringer og designer bloggen sin, tenkte jeg at det kan være lurt å gi dere (som ikke har kunnskaper om emnet fra før) en aldri så liten innføring i css. Har du basis kunnskaper om css? Da kan du vel prøve å lage et design til bloggen din så lenge :)

"Denne guiden er for nybegynnere, men kan likevel oppfattes som noe avansert og rotete. CSS er egentlig veldig lett. Det gjelder bare å forstå hvordan det fungerer"



Hvordan komme i gang?

For at endringene skal vises på bloggen din må du lagre css-kodene på bloggen din. Det gjør du ved å gå til "Design > Rediger > Stilsett (css)" som du finner i kontrollpanelet ditt. Deretter er det bare å fylle inn css-kodene (helst i bunnen) av tekstboksen og trykke "Lagre malen". For å se endringene dine, går du bare til forsiden av bloggen din. Enklere blir det ikke!

Strukturen til css er som følger:
element {
   egenskap: verdi;
}
For at dere skal kunne forstå hvordan dette skal virke, bør vi også ha noe html-kode å jobbe med:
<div id="identifikasjon">
   Dette er en boks, med id = "identifikasjon"
</div>
<div class="klasse">    Dette er en boks med class = "klasse" </div>
Over har vi en html-kode med to bokser (div), hvor den ene har en id og den andre har en class. Forskjellen på disse elementene er i hovedsak at en id må være unik, mens en class kan benyttes flere ganger på en side. La oss gi disse to boksene en stil hver ved hjelp av css. Koden under forandrer bakgrunnen på begge boksene (henholdsvis grønn og rød):
#identifikasjon {
   background: green;
}
.klasse {
   background: red;
}
Som du kan se er elementet spesifisert med en firkant (#) foran ID-navnet og en punktum (.) foran class-navnet. Det er på denne måten man ser forskjell på en ID og en klasse i css. I tillegg kan du se at egenskapen er background og verdien er green og red.

Resultatet på denne kombinasjonen av css og html blir som følger:
   Dette er en boks, med id = "identifikasjon"

   Dette er en boks med class = "klasse"

En liten oversikt over egenskaper for CSS

Her følger en liten liste over de vanligste egenskapene for css og et lite eksempel på hvordan de fungerer.

For en fullstendig oversikt, med forklaring, finner du her! (engelsk)

  • background
        – Forandrer bakgrunnen (farge/bilde/plassering). Eks: background:#000000;
  • color
        – Forandrer skriftfargen i elementet. Eks: color: #000000;
  • border
        – Bruke for å gi et element en ramme. Eks: border: 5px solid #000000;
  • font-family
        – Forandrer skrifttypen. Eks: font-family: Arial;
  • font-size
        – Forandre skriftstørrelsen. Eks: font-size: 12px;
  • height
        – Brukes til å definere høyde. Eks: height: 150px
  • width
        – Brukes til å definere bredde. Eks: width: 150px
  • padding
        – Legger til luft runt elementet. Eks: padding: 5px

Hvordan sette sammen disse egenskapene?

For dette eksempelet, så tar jeg for meg samme elementet som forrige eksempel. Bare at denne gangen bruker jeg kun boksen med en en annen ID.
#boks {
   background: #ffff99;
   border: 1px solid #999999;
   font-size: 16px;
   padding: 10px;
   text-align: center;
}
Resultatet blir da slik:
Dette er resultatet av styling med flere css-egenskaper!


Til informajon: En guide med hvilke elementer som malen til blogg.no består av vil komme senere. Forstod du noe av dette? Er det noe som er uklart? Still gjerne spørsmål!
19.02.2010 kl.17:29 i Guide - 10 kommentarer - # - Permalenke - Del på Twitter

10 kommentarer

Caroline Louise

19.02.2010 kl.20:19
trodde du blogget på ipublish ? :)

Marianne Monsen

19.02.2010 kl.21:37
kjempe smart å gi en god forklaring på dette! Jeg skjønner litt mer nå, selvom jeg blir veldig forvirret med alle de ordene :p

devpublish

19.02.2010 kl.23:45
Hei Caroline! Så det er her du har havnet etter iPublish ja. Hyggelig :) Joa, jeg har jo fortsatt en blogg på ipublish, men tenkte jeg skulle "utvide" det litt og starte en ny (i tillegg) og hjelpe bloggerne her også ;)

devpublish

19.02.2010 kl.23:48
Marianne Monsen: Så bra at du forstår litt mer nå. Jeg ser selv at dette kanskje er litt vanskelig å forstå i starten. Jeg er heller kanskje ikke så god på å forklare på en enkel måte heller :)

Satser på at jeg kommer med noen nye guider som kan være til nytte for dere.

Hvis noen lurer så en den andre (gamle) bloggen min her: http://idev.ipublish.no/

KAYSO

20.02.2010 kl.21:33
Kjempebra initiativ å hjelpe bloggere med design :) CSS og htmlkoder er noe som bare ikke klaffer hos noen, så bra at noen kan hjelpe :) Jeg liker å lære meg selv ved å plukke opp et tips her og der: ) gøy når en lærer litt mer og kan gjøre større endringer som skiller bloggen fra andre :)

devpublish

21.02.2010 kl.02:27
Kayso: Hyggelig å høre :) Jeg har hjulpet iPublish-bloggere i lang tid nå (noe som tydligvis ble veldig populært), så nå tenkte jeg at jeg kunne jobbe litt med blogg.no-bloggere også :)

Har sett at veldig mange som skriver om slik hjelp her på blogg.no, bare kopierer hverandre og skriver nøyaktig det samme. Det ser ikke jeg på som hjelp, da de ikke kan 100% det de snakker om. Så jeg håper jeg kan få opp noe nytt og mer unikt.

Håper denne blogger kommer til nytte for mange etterhvert :D

Mari Sunniva

22.02.2010 kl.15:43
sv: mm! blir så.. oppgitt, rett og slett.

Utrolig bra at du hjelper oss på blogg.no også! Forstår meg absolutt ikke på design noe som helst sted, men har etter hvert klart å fått til littegrann. Ser fram til flere tips! :-D

09.03.2011 kl.18:28
Hei! Veldig fin og lærerik blogg, i allefall for meg som ikke kan så mye om dette. Jeg har et spørsmål, så jeg må bare bruke noen eksempler her. Hvis man har en stripete bakgrunn, altså en som ikke er ensfarget. Også ønsker man f. eks et eple eller noe som header, og kun det, ikke noen bakgrunnsfarge bak. Hvordan får man det til? Hadde det vært en ensfarget bakgrunn, kunne man jo bare laget en vanlig header med bilde av et eple og valgt samme bakgrunnsfarge i headeren som på bakgrunnen ellers. Håper du skjønner spørsmålet.

devpublish

09.03.2011 kl.18:50
Anonym: Hei, takk for hyggelig tilbakemelding :)

Har du stripete bakgrunn så er det flere måter å lage en header som passer inn på måten du beskriver. Første måte er å lage headeren med samme bakgrunn som resten av bloggen din. En annen måte er å lage headeren med transparent/gjennomsiktig bakgrunn. Noe mer hokuspokus enn det er det ikke :)

09.03.2011 kl.19:31
Tusen takk for svar. Jeg visste ikke det gikk an å lage med transparent bakgrunn. Striper var bare et eksempel, men da er det jo det samme hva slags bakgrunn, siden det går an på denne måten :)

Skriv en ny kommentar

hits