Design og CSS
I artikkelen Joomla templates snakket vi om hva en template er, hva den består av og hvordan design og funksjon på en webside er adskilt. Her skal vi ta for oss ting som har spesifikt med design å gjøre.
Alle templates du laster ned fra nettet kommer med stilark, ferdige bilder - for eksempel bakgrunnsbilder - og andre mer eller mindre stilige designelementer.
Til noen formål er det greit å bruke en ferdig template slik den er. Noen ganger vil man bytte ut fonter og bakgrunn. Og andre ganger vil man utvikle et helt eget design med en eksisterende template som basis.
Det er i forbindelse med slike endringer design og CSS kommer inn i bildet.
CSS - Cascading Style Sheets
CSS er et språk som brukes til å definere hvordan ulike formater i HTML- eller XML-dokumenter skal se ut i nettleseren. Den artikkelen du leser nå er et rent HTML-dokument. Det inneholder ingen informasjon om hvilke fonter som skal brukes, hvilke farger tekst i avsnitt eller overskrifter skal ha, hvilken bakgrunnsfarge teksten skal ha osv. Dette dokumentet inneholder tekst satt opp i en bestemt struktur, men det er alt. Hvordan avsnittene og overskriftene skal se ut, bestemmes av CSS-en for den templaten som er i valgt.
<p>Dette er et avsnitt. HTML-dokumentet kommuniserer det ved at teksten befinner seg mellom to Paragraph tags. Med mindre vi definerer stiler for avsnitt, vil de se fryktelig kjedelige ut. Men vi gjør ikke det i HTML-koden, - det ville ta unødig mye tid nå og skape utrolig mye ekstraarbeid når websiden skal oppgraderes en gang i fremtiden. Ved å bruke CSS kan vi endre stilen på ALLE avsnitt i en operasjon, noe som ikke er mulig uten bruk av CSS.</p>
Teksten over over viser hvordan et avsnitt ser ut i selve HTML-dokumentet. Under ser du et eksempel på hvordan utseendet på body-teksten defineres i CSS-en.
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
color: #646464;
}
Som du ser velger vi ikke en font-type, slik man gjør i dokumenter som skal printes, men en font-familie. Det er ikke alle datamaskiner som har din favorittfont installert. Ved bruk av font-familie har du en mulighet til å kontrollere hvordan siden din ser ut på datamaskiner med ulike tekniske innstillinger eller forutsetninger.
I CSS-koden over er Trebuchet MS satt til foretrukket font, men hvis man besøker websiden fra en datamaskin som ikke har Trebuchet MS installert, vil teksten bli vist med Arial. Er ikke Arial installert, vil nettleseren lete etter Helvetica eller en annen font som tilhører familien sans-serif. Slik har du en viss kontroll over hvordan websiden din fremstår på ulike datamaskiner.
Fordelen med CSS
Den store fordelen ved å adskille struktur og stil på denne måten, er at du kan gi websiden din en ansiktsløftning ved å endre et par verdier i CSS-en. Skulle du gjort det samme kun ved hjelp av HTML, måtte du gått inn i hvert enkelt HTML-dokument og endret stilen overalt hvor den var definert. Det ville ta deg uhorvelig mye tid!
Et eksempel! Du har en webside der body-teksten er definert på følgende måte:
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 150%;
color: #646464;
}
Hvis du endrer denne biten i CSS-filen din så den ser slik ut:
body {
font-family: Georgia, Times, Times New Roman, serif;
font-size: 11px;
line-height: 150%;
color: #000000;
}
så endres utseendet på alle artiklene dine i det øyeblikk endringen lagres. Forutsatt at du ikke har gjort "ureglementerte" endringer i HTML-koden, vel å merke.
