På mine tidligere blogger har jeg skrevet litt om css og hvordan man bruker dette. Jeg er absolutt ingen gud i å forklare ting, men forhåpentligvis så forstår noen mer etter å ha lest dette. Før jeg eventuelt skriver guider på hvordan man kan gjøre diverse endringer i designet på bloggen sin, så tenkte jeg at jeg kunne starte med en liten innføring i CSS.
Dette innlegget er beregnet for nybegynnere, men kan likevel oppfattes som noe avansert og rotete. Basis bruk av CSS er egentlig veldig enkelt, men det finnes selvfølgelig måter og løsninger for å oppnå avanserte ting. For å ta i bruk de nyeste og spennede mulighetene i CSS som for eksempel “runde kanter” uten bruk av bilder, må du benytte en moderne nettleser. Ikke IE!
Les også: Hvilken nettleser bør du bruke?
Hvordan komme i gang?
For å finne ut hvilke elementer (og hva de heter) du ønsker å forandre utseende på, anbefaler jeg at du bruker et “Inspiser element”-verktøy som du finner i Chrome, Safari eller Firefox. Til sistnevnte anbefaler jeg vektøyet Firebug som jeg har skrevet om tidligere. Ved å bruke disse vektøyene kan du gjøre endringer og se de direkte på bloggen din før du legger det inn i stilsettet (css) ditt.
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 (som du f.eks finner via firebug):
<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 klasse (class). Forskjellen på disse elementene er i hovedsak at en id må være unik. Det vil si at den teoretisk sett kun finnes ett sted på nettsiden, mens en class kan benyttes flere ganger på en side. La oss nå gi disse to boksene en stil hver ved bruk 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 henholdsvis “green” og “red”.
Resultatet på denne kombinasjonen av css og html blir som følger:
Forstår du hvordan dette fungerer?
En liten oversikt over egenskaper i 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
Så hvordan setter vi sammen disse egenskapene?
I dette eksempelet bruker vi et element (div) med id “boks” og en kombinasjon av forskjellige css-egenskaper.
#boks {
background: #ffff99;
border: 1px solid #999999;
font-size: 16px;
padding: 10px;
text-align: center;
}
Resultatet av css-koden over blir da slik:
Forstod du noe av dette? Er det noe som er uklart? Still gjerne spørsmål!
Har prøvd å legge inn design i wordpress her på ipublish, men det fikk jeg ikke til :(.. Om du vet om noen som lager design slik jeg har lyst på liksom? :)
Hei, jeg kommer dessverre ikke på noen som lager design for andre.
Hei, jeg har prøvd border-bottom på overskrift, men det går ikke. Hele koden på overskrift virker plutselig ikke. Og vet du hvordan man skifter farge på hover overskrift og selve menyen under header på bloggr?
Hei,
Den css-koden du bruker ser ut til å fungere når jeg ser på bloggen din. Har du rettet det som er feil?
For å endre skriftfargen (hover) på overskriften, kan du gjøre slik:
h2.entry-title a:hover {
color: #000000;
}
For å endre det samme i menyen kan du prøve dette:
#access ul li a:hover {
color: #000000;
background: #ffffff;
}
Tusen hjertelig takk for så kjapt svar :-D Hvordan endrer man farge på menyen fra svart til hvit da?
Bare hyggelig :)
Du endrer bakgrunnsfargen til menyen slik:
#access {
background: #ffffff;
}
blæh, hvorfor skal det være så mer komplisert enn blogg.no da hehe. menyen ble hvit, men menyen som “detter ned” er fortsatt grå når jeg holder musa over.. og teksten vil ikke bli svart. :P
Hehe, det er egentlig ikke så mye vanskeligere enn blogg.no. Det er bare at ting heter og er satt opp annerledes på wordpress (bloggr, ipublish osv) enn på blogg.no.
For å få teksten svart kan du prøve noe alà:
#access ul li a:link,#access ul li a:visited {
color: #000000 !important;
}
Når det gjelder “dropdown”-menyen så må jeg nesten se “problemet” før jeg kan si noe mer der :)
Hei :) Nå har jeg prøvd alt jeg kan for å få sidemenyen opp fra bunnen av bloggen, men det er helt umulig. Har du noen løsning på hvordan jeg kan få det til? Ta en titt: http://www.andreaomlivet.blogg.no
Håper på svar:) Mvh Andrea
Hei Andrea,
Det ser ut som at du har prøvd å redigere litt i html-koden din (kanskje lagt til en meny og fjernet den igjen?) så det er noe som er litt feil. Den eneste feilen jeg ser nå er i malen for “forside”. Finn følgende kode i “forside”:
<div id="wrapper" class="yui-gc">
Rett under den linjen finner du følgende “</div>” og fjerner denne. Så lagre og se om det løste problemet ditt :)
Hei! :) Tenkte å prøve å lage design til blogg.no.. jeg har både photoshop og dreamweaver, er det mulig å bruke noen av de programmene? Jeg kan ganske mye med photoshop, jeg har også satt meg inn i html og css. Problemet mitt er bare det at når jeg skal sette inn html kodene til designet jeg har laget, inn på blogg.no så er ikke bildene jeg har brukt der.. header, meny knapper, bakgrunnsbilde osv.. Så tenkte jeg å prøve å laste opp via FTP, men det funket heller ikke, så nå har jeg ikke peiling på hvordan jeg kan gjøre det.. vet du? :) Ville blitt kjempe glad hvis noen kunne hjelpe meg! :D
Hei! Jeg er veldigveldig nybegynner på blogg og design, men ønsker å lage en blogg der alt er hvitt sett bort i fra det jeg skriver + bilder. ønsker det helt enkelt, ingen header eller overskrifter, ingen kommentarer osvosv. Hvordan ordner jeg det? ca. som sofiemeta.blogg.no
Jeg skal lage eget design med bilder osv…Men det får jeg ikke til, litt tips på mail?:) TAkk!
Hei, utifra din kommentar så vet jeg dessverre ikke hva du mener eller hva du ønsker!
Hei. Jeg lurte egentlig bare på hvordan jeg kan få profilbilde og profiltekst i sidemenyen på det designet jeg bruker nå? :)
Hei, for å få til det må du gå til “Utseende > Widgeter” og dra widgeten som heter “Tekst” til “Hovedområde for widgeter” som du finner på høyre side. I tekstfeltet til widgeten kan du f.eks skrive følgende (husk å bytt ut teksten med det du ønsker skal stå der):
<img src=" http://malinh.ipublish.no/files/2009/09/IMG_7293-m-425×500.jpg " alt="Profilbilde" class="size-auto" />
<p>
Her kan du skrive det du ønsker skal stå i profilteksten din under profilbildet!
</p>
Klikker snart for meg her; får ikke forandret bakgrunnsfargen min. Body color sant?
Prøvd uendelig mange ganger nå. Hva gjør jeg feil?
body { background: #633300; }
#navigation { background: transparent; padding: 0px; }
#navigation ul { background: #663300; border-bottom:1px solid #663300; }
#footer { background: transparent; color: #ffffff; }
#footer a { color: #663300; }
#footer a:hover { background: #484848; }
Tallene ser litt rare ut her, men det er normale tall :)
Hei, koden din ser forsåvidt riktig ut. Det kan hende forandringene ikke vises pga mellomlagring fra ipublish sin side. Prøv å la koden være en stund og se om det løser seg.
Eneste som er feil ift malen på bloggen din er at “#navigation” ikke eksisterer. Menyen er bygget opp på denne måten:
<div id="access">
<div class="menu">
<ul>
<li><a href="">Menylink</a></li>
</ul>
</div>
</div>
Tingen er at alle andre endringer jeg foretar meg funker umiddelbart, utenom den der blåfargen i bakgrunnen. Kan ikke du skifte den for meg? Farge #663300 :)
Jeg har ikke tilgang til bloggene her lenger så får dessverre ikke gjort det for deg, men jeg tror jeg vet hva problemet ditt er. Du har nok satt den blå bakgrunnsfargen under “Utseende > Bakgrunn” i kontrollpanelet. Gå til denne siden i kontrollpanelet, trykk slett ved siden av der man velger farge og lagre, så bør det løse problemet ditt :)
Se bilde her om du ikke forstår helt hva jeg mener!
Aah, selvfølgelig :) Problem solved. Takk