Gå til innhold

CSS Guide for nybegynnere

Left Blank

Anbefalte innlegg

Left Blank

Left Blank

Skrevet
Skrevet (endret)

INTRO

 

I denne guiden så skal jeg prøve å få dytta så mye informasjon som mulig på minst mulig plass. Jeg kommer ikke til å anta at du har noe slags forhåndskunnskap om CSS, men litt kunnskap om hvordan html, websider og kode ser ut/funker hjelper.

 

Først så kan jeg begynne med å forklare hva CSS er for noe.

Enkelt sagt så skiller CSS designet fra innholdet/koden.

Du kan tenke deg at en webside består av to deler, 1. koden og innholdet, og 2. CSS fila som forteller hvordan innholdet skal vises.

Før i tiden så måtte man kode dette rett inn med html.

 

Noen av fordelene med CSS er at man kan skille koden fra designet, men mer viktig, at man kan legge et CSS "stylesheet" eksternt, og linke til det i html koden, å dermed bruke det samme CSS stylesheetet på flere html sider.

CSS gir designeren /komplett/ kontroll over hvordan innholdet i en html side skal vises.

 

HTML

 

OK, så du vil lære deg CSS..

Den enkleste måten er faktisk å bare gi eksempler. så da skal jeg gjøre det.

Tenk deg denne enkle html koden:

 

<html>
<head>
<title> CSS er fett! </title>
</head>
<body>
<p> Heisann! Dette er min nye hjemmeside som snart skal dekoreres med CSS!
<p> Her har vi en meny!
BLOGG<br>
MUSIKK<br> 
LINKER<br>
CSS<br>
</body>

 

Kopier og paste dette inn i en tekst editor, så følger vi eksemplet sammen.

Ok, så nå har vi en basisk hjemmeside som ikke ser så veldig pen ut akkurat.

Det første vi må gjøre for å "style"(det kalles style når man stilerer en hjemmeside med CSS) denne siden er å fortelle web browseren hvor de forskjellige seksjonene i html koden CSS skal stilere.

Når browseren leser html koden, og så leser .CSS fila, så henter den ut informasjon fra html koden om hvor de forskjellige sekjsonene ligger, for eksempel Menyen er en seksjon, bloggen er en seksjon, paragrafene er en annen sekjson. (Paragrafene i mitt html eksempel begynner med html tagen <p>)

 

OK, greit nok sier du, men hvordan skal vi fortelle browseren hvor de forskjellige seksjonene er?

Jo, med div's.

Div er en html tag som deler html koden opp i sekjsoner, som vi da kan spesifisere i css fila.

Du kan egentlig spesifisere en style på de fleste html tagene, men vi skal ikke gå så mye inn på det.

 

Skriv inn følgende inn i html koden som jeg pastet ovenfor:

 
<div id="meny">
<p> Her har vi en meny!
BLOGG<br>
MUSIKK<br> 
LINKER<br>
CSS<br>
</div>

 

Ser du hva som skjedde? Vi puttet paragrafet "Her har vi en meny!"(og teksten "BLOGG, MUSIKK, LINKER og CSS") inne i div'en som vi kalte "meny."

Så da når vi legger en css stil på "meny", så blir den stilen pålagt alt som ligger inne i meny div'en.

Ganske enkelt ikke sant?

 

CSS

 

Så da når vi har html delen ute av veien, la oss gå over på selve CSS editeringa.

Først må vi fortelle browseren hvor .css fila som vi skal til å lage ligger hen.

Hvis du putter .css fila i samme mappe som .html fila, så behøver du bare bruke følgende kode:

<link rel="stylesheet" type="text/css" href="style.css"  />  </head>

Du ser da at vi forteller litt om hvordan type dokument det er, og hvor dokumentet ligger.

Kopier og paste dette inn i <head> taggen i html dokumentet slik:

<html>
<head>
<title> CSS er fett! </title>
<link rel="stylesheet" type="text/css" href="style.css"  /> 
</head>

 

Sånn, lag nå en ny fil i samme mappe som .html dokumentet vi lagde i begynnelsen av guiden, og kall den "style.css".

Det er også viktig at fila ikke har style.css.txt extension, som notepad er kjent for å gjøre.

 

For å lage en css "regel", så bruker vi følgende format:

 

selector { stil: verdi }

Selector betyr da div'en/taggen vi skal stilere, stil betyr selve css propertiet vi skal lage, og verdien er en verdi som er tilgjengelig for propertiet vi har valgt.

For eksempel la oss sette et par regler i "meny" diven som vi lagde tidligere.

 

Kopier og paste følgende inn i style.css fila, så åpner du html fila i en browser og trykker refresh for å se forandringen.

#meny {
   background-color: black;
   color: white;
}

De tingene som står innenfor {}'ene, eller brackets som de kalles på godt gammalt norsk, betyr at vi skal putte kode der inne.

Når vi velger en div, så må vi skrive # foran div navnet.

Ser du hva som har skjedd? Bakgrunnen på teksten har blitt sort, og teksten selv har blitt hvit, og det andre i html dokumentet er uforandret.

Du ser da at vi kan putte hva vi vil i hvilken som helst del av dokumentet, vi kan ha hundrevis av forskjellige fonter i samme dokument, eller mange forskjellige farger på hver linje, alt du behøver å gjøre er å putte inn nok div's.

 

background-color er et property som forteller browseren at nå skal vi farge backgrunnen en farge vi spesfiserer.

Jeg har skrevet "black" som verdi av enkelhets grunner, men du kan og spesifisere hexidecimale nummer, og rgb koder.

 

"color" forteller at teksten skal farges en viss farge vi spesifiserer.

Jeg tenkte at det var ikke noen vits i å gå gjennom masse forskjellige properties man kan stilere med, men heller gå gjennom det grunnleggende, slik at du selv kan lese om de forskjellige propertiene man kan spesifisere.

 

Uansett, du burde se nå mulighetene til å dividere et html dokument for så å stilere de forskjellige delene.

 

Jeg håper guiden har vært en hjelp til å lage dine egne sider.

 

Til slutt vil jeg gjerne gi noen linker til noen bra css editerings programmer.

Sett bort ifra de mange forskjellige tekst editorene, så finnes det to programmer som er laget for bare CSS.

Med disse behøver du ikke en gang kunne css, siden du kan velge alt med WYSIWYG interface.

 

Disse heter TopStyle og Style Master. Jeg anbefaler alle nybegynnere å hente ned en av disse, slik at de enkelt kan stilere sidene sine, får så å gå dypere inn i css.

 

Linker:

TopStyle: http://www.bradsoft.com/topstyle/index.asp

Style Master: http://www.westciv.com/style_master/

Endret av joltaire
Lenke til kommentar
  • 3 måneder senere...

Videoannonse

Videoannonse
Annonse
salah

salah

Skrevet
Skrevet

Du skriver litt feil i koden:

 

<html>
<head>
<title> CSS er fett!
</head>

 

Du har glemt </title>, altså det bør skrives slikt:

 

<html>
<head>
<title> CSS er fett!</title>
</head>

 

Dette er kanskje ikke verdens største krise, men for å kunne validere siden må du ha slutt-taggen :)

 

Mvh pavlion

Lenke til kommentar
  • 2 måneder senere...
CruellaDeVille

CruellaDeVille

Skrevet
Skrevet

Jeg vet dette er en gammel guide/tråd, men jeg har likevel noen kommentarer:

 

Du sier

Når vi velger en div, så må vi skrive # foran div navnet.

 

# kontra . viser til en eller flere, ikke div kontra ikke-div

Et element en bare ha en av gir man et navn og putter # foran og når en refererer til den bruker man id=navnet_man_har_valgt

 

eks 

<p id="stor_tekst">Denne typen paragraf kommer bare en gang, men den er til gjengjeld veldig stor</p>

og i css

#stor_tekst{
font-size:4em;
}

 

mens . viser til elementer man kan ha flere av, eks 

<a href="lenke" class="grønn_lenke">
<a href="lenke2" class="grønn_lenke">

og css

.grønn_lenke{
color:green;
}

Lenke til kommentar
  • 2 uker senere...
Toset

Toset

Skrevet
Skrevet (endret) 

<div id="meny">
<p> Her har vi en meny!
BLOGG<br>
MUSIKK<br> 
LINKER<br>
CSS<br>
</div>

 

Hadde det ikke vært bedre å lage dette som:

 

<div id="meny">
<p> Her har vi en meny!</p>
<ul>
<li>BLOGG</li>
<li>MUSIKK</li> 
<li>LINKER</li>
<li>CSS</li>
</ul>
</div>

 

Og du må huske å lukke tags :)

 

Edit: leif was here

Endret av dominizer
Lenke til kommentar
  • 1 måned senere...
  • 2 uker senere...
  • 1 måned senere...
Cuneax

Cuneax

Skrevet
Skrevet

Fin og nyttig guide for nybegynnere! :)

 

Fin guide :thumbup: , men jeg vet om en som er enda bedre  ;)

greycobra

5 Deler :dribble:

6398542[/snapback]

Tror denne linken funker bedre. Det er i alle fall Del 1.

 

Kopier og paste dette inn i en tekst editor, så følger vi eksemplet sammen.

Ok, så nå har vi en basisk hjemmeside som ikke ser så veldig pen ut akkurat.

5018800[/snapback]

Tror det er mer passende å skrive grunnleggende her. Bare for å pirke litt ;)

Lenke til kommentar
  • 2 måneder senere...
Haraldson

Haraldson

Skrevet
Skrevet 
...
<p> Her har vi en meny!
BLOGG<br>
MUSIKK<br> 
LINKER<br>
CSS<br>
</body>

Greit nok at dette er for nybegynnere, men det er ingen unnskyldning for å bruke en <p> og en haug med <br>. En meny er en liste, og skal følgelig settes i en <ul>, eller en <ol> om siden er lineær. Forresten hjelper det sikkert å lukke <p>-en din (som du egentlig ikke skal ha der).

 

OK, greit nok sier du, men hvordan skal vi fortelle browseren hvor de forskjellige seksjonene er?

Jo, med div's.

Div er en html tag som deler html koden opp i sekjsoner, som vi da kan spesifisere i css fila.

Du kan egentlig spesifisere en style på de fleste html tagene, men vi skal ikke gå så mye inn på det.

Hvorfor ikke gå inn på det? Hvorfor legge opp til div-mania fra første øyeblikk? Det syns jeg er dumt.

 

Skriv inn følgende inn i html koden som jeg pastet ovenfor:

<div id="meny">
<p> Her har vi en meny!
BLOGG<br>
MUSIKK<br> 
LINKER<br>
CSS<br>
</div>

<ul id="meny">
<li>BLOGG</li>
<li>MUSIKK</li> 
<li>LINKER</li>
<li>CSS</li>
</ul>

 

For å lage en css "regel", så bruker vi følgende format:

 

selector { stil: verdi }

selektor { egenskap: verdi }

 

Du ser da at vi kan putte hva vi vil i hvilken som helst del av dokumentet, vi kan ha hundrevis av forskjellige fonter i samme dokument, eller mange forskjellige farger på hver linje, alt du behøver å gjøre er å putte inn nok div's.
Æsj. Du legger ikke til divs for å tilegne tekstelementer som <p> og <li> egendefinerte fonter.

 

Disse heter TopStyle og Style Master. Jeg anbefaler alle nybegynnere å hente ned en av disse, slik at de enkelt kan stilere sidene sine, får så å gå dypere inn i css.
For de som virkelig vil lære seg å kode og forstå CSS anbefaler jeg heller en teksteditor med syntax-highlighting uten WYSIWYG-funksjonene du omtaler. :)
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...