Hvordan bygge nettsteder med CSS

Integrering gripende stilark (CSS) til nettstedet ditt gir deg muligheten til å kontrollere utseendet på nettstedet ditt --- alt fra skriftene som brukes, tekststørrelser og farger for å lister, bilder og andre innholdselementer. Etter at du har lært Hypertext Markup Language (HTML) for å lage nettsteder, er neste skritt å legge CSS til repertoaret. Mens innholdet --- tekst og bilder --- vil ligge på HTML-sider, vil du bruke CSS til å definere stilen av disse innholdselementer.

Bruksanvisning

Opprett med referanse til din stilark

1 Start en ny CSS fil. I de fleste web design programmer, type CTRL + N (CMD + N på Mac) for å starte et nytt dokument, og programvaren vil spørre hvilken filtype du vil. Velg stilark (CSS), og lagre filen med et dot-css forlengelse.

2 Still dine primære side design attributter. Starten av stilark (forutsatt at du bare bruker én - hvis du bruker mer enn én, vil dette være den stilark som håndterer grunnleggende utseendet på nettstedet ditt) bør inneholde elementer som bredden på siden din, bakgrunnsfarger og bilder, skriften du vil bruke, tekststørrelser og farger for lenker, overskrifter og brødtekst, og andre overordnede attributter.

3 Definer dine IDer og klasser. Det er der du bore ned og definere hva de andre ulike elementer av nettstedet ditt vil se ut. Syntaksen ser omtrent slik ut:

ID {attribute1: beskrivelse; attribute2: beskrivelse; }

eller

.class element {attribute1: beskrivelse; attributt 2: beskrivelse; attribute3: beskrivelse; }

Hvis du er usikker på vokabular for å bruke for attributter og beskrivelser, vil de fleste store bokhandlere bære CSS guider, eller bruke en av de referansene som er oppført nedenfor. Dreamweaver vil hjelpe deg med en pop-up menyen, hvis det er programvaren du bruker.

4 Referanse din stilark på hver side av nettstedet ditt som er avhengig av den. For å gjøre det, setter du inn følgende kode mellom <head> og </ head> taggene:

<Link type = "text / css" rel = "stylesheet" href = "LocationAndNameOfYourStylesheet.css">

Hint

  • Ved hjelp av et eksternt stilark fremfor inkludert din stil i HTML-sider vil hjelpe nettstedet ditt gjøre det bedre i søkemotorrangeringer fordi det tynner ut mengden med kode på sidene dine, slik at de søkemotorer for å finne innholdet ditt lettere.