CSS

Infogat eller inlänkat

Stilmallar kan vara interna (infogade i texten) eller externa (inlänkade). De interna bäddar man in i sitt HTML-dokument medan de externa länkas in med HTML-märket LINK. Ska man formatera flera sidor med sin stilmall är det självklart enklast att använda sig av en extern stilmall. Annars behöver man gå in och ändra i stilmallen i varje dokument när man vill ha en enhetlig stilförändring på sidan.

Det finns också ett tredje sätt att använda CSS. Det går att direkt i HTML-elementen skriva in de direktiv som ska gälla för just det elementet, men att skapa en hel sida på det sättet blir ganska jobbigt. Vi kommer inte att använda det här sättet i kursen men här följer ett exempel på hur det kan se ut.

Rubrik med CSS direkt i elementet

Koden i denna lektion kommer att skrivas med följande font: <HTML>. Kod som inte ligger i den löpande texten har följande utseende

<HTML>

Koden för rubriken ovan ser ut såhär :

<H1 STYLE="background : yellow ; color : green">Rubrik med CSS direkt i elementet</H1>

För att stilmallar ska fungera måste man uttrycka vad i sitt HTML-dokument som ska formateras med en viss stil. Man kan t ex låta alla H1-märken få en stil eller alla TD-märken en stil.

Men ibland vill man att vissa H1-element ska se ut på ett sätt och resten på ett annat. Detta gör man genom att märka upp de olika elementen så att man kan skilja på dem. Vi säger att man anger en klass till ett visst element genom att skriva class="stilklass" som attribut/värde till ett märke. Det kan se ut som följande

<H1 CLASS="huvudrubrik">

Det är en hel del saker som kommer att hända och här följer lite instruktioner för hur du kan göra.

TipsVi ska arbeta med filerna från förra delen och förbättra dessa genom ett antal delsteg. Om du vill spara undan resultatet som du gjorde i ren HTML (eller som du laddat ned från kurssidan) skapar du en ny katalog där du lägger de kopierade filerna. T ex kan du döpa denna "gamla" katalog till HTML. Arbeta nu vidare i den katalog som du höll på i under HTML-delen (htmlfiler). När det sedan är dags att jobba med exemplet öppnar du den fil som det handlar om i din texteditor . Efter att ha gjort ändringar i filen öppnar du samma fil i din webbläsare för att titta på resultatet. För varje ändring som du gör i koden måste du ladda om HTML-sidan i webbläsaren för att ändringen ska synas där också. Glöm inte att spara filen i texteditorn först!
TipsI det här avsnittet arbetar du ofta med flera filer samtidigt. Det kan då vara bra att organisera din arbetsyta enligt följande: Öppna två texteditorer (två fönster) och ha HTML-dokument i ett och CSS-dokument i det andra. Det här gör att du slipper byta allt för mycket mellan olika dokument inne i editorn. Stilmallen vi arbetar med heter stilmall.css och ska ligga i samma katalog som övriga HTML-filer.