Annons

CSS-mallarJag har jobbat på webben ett tag nu, och jag har faktiskt tyckt att det är lättare att skriva alla dokument i HTML-format istället för DOC eller TXT. Om du använder Google Docs gör du faktiskt detsamma, eftersom Google Docs (tack och lov) i huvudsak har blivit en WYSIWYG HTML-redigerare. Att skapa några dokumentmallar med HTML och CSS är väldigt enkelt, kan göras av alla, och om du gör det rätt kommer det att se likadant ut för alla.

Varför använda HTML?

Min största anledning till att gå för rena HTML- och CSS-dokument är att det förmodligen är det mest kompatibla formatet över webbläsare och operativsystem, förutom PDF-formatet, som är mycket svårt och/eller dyrt att göra väl. Att använda Microsoft Office är inte heller det bästa. Jag använder Office 2007 som använder många extrafunktioner som inte stöds av tidigare versioner, så kvaliteten kan försämras. Vem vet hur dessa dokument kommer att se ut i Open Office till exempel? Om du skapar ett HTML-dokument som ser exakt likadant ut i Internet Explorer och Firefox har du skapat ett dokument som kan öppnas av Mac-, Linux- och Windows-användare, och kommer att se likadant ut på 99% av webbläsare.

Vad är CSS och HTML?

Om du är ny på det här med HTML och CSS-kodning, bli inte orolig. Det är väldigt enkelt och du kan hitta massor av resurser på webben för att hjälpa dig. HTML och CSS-kod är det som utgör det mesta av det du ser på den här sidan här, HTML styr innehållet, medan CSS styr stilen eller hur innehållet presenteras.

Hur skapar jag en mall?

Exempel på CSS-stil

Tja, du måste studera lite kod. Tack och lov är HTML och CSS väldigt lätt att förstå. För att till exempel ge ett objekt en ram, skriv bara

kant: 1px svart fast

. Detta kommer att skapa en 1px bred svart solid ram. Det finns massor av formateringsalternativ du kan slå upp och använda, mitt förslag är att visualisera vad du vill och sedan söka lite för att hitta hur du gör det. Den mest grundläggande mallen skulle vara en tom HTML-fil, ta en titt nedan.



<p><em>Titel på sidan går in här</em></p> <p></p>


Innehållet på din sida kommer hit.


Du kan sedan fylla allt detta med innehåll och stil för att skapa ditt dokument. Ta en titt på exempel 1, exempel 2 och exempel 3 Jag gjorde. Tänk på att koden i kroppen, innehållet är exakt detsamma, jag ändrar bara css-koden. Detta visar att du kan använda stylingen för att snabbt skapa olika looks.

Varför är detta så bra?

Anledningen till att detta är så fantastiskt är att du kan skapa anpassade stilar för dig själv som kan bli ett slags "varumärke" för dina dokument. Du kan klippa ut och klistra in CSS-koden och bara tänka på innehållet när du har slutfört det. Du kan också länka i stilarket, så om du lagrar dokument online behöver du inte inkludera CSS i själva filen. Det betyder att du kan länka olika stilmallar för olika tillfällen och att du inte behöver ändra dokumentet hela tiden.

CSS möjliggör också snabbare redigering av dokument stilmässigt. Jag föredrar att mina dokument ser bra ut eftersom jag bara mår bättre på det sättet, och med CSS blir formateringsprocessen mycket mindre av en börda. När du anger en rubrikstil kommer den att tillämpas på alla rubriker av den typen. Det betyder att du inte behöver ändra bakgrundsfärgen, teckensnittsfärgen, djärvheten och understrykningen av en rubrik individuellt, du anger det bara en gång.

Dessutom, eftersom Google Docs nu har fullt CSS-stöd, kan du bara kopiera och klistra in din stylingkod i Docs och ändra utseendet på dina dokument utan att behöva gå runt och formatera varenda rubrik en åt gången tid.

Var kan jag lära mig mer?

CSS är som sagt ett enkelt verktyg, men det kräver en del grundläggande kunskaper ändå. HTML är likadant logiskt och lätt att lära sig, rekommenderar jag W3C-skolor för dem båda. Jag lärde mig mycket av det jag kan idag där, för grundläggande behov är det en av de bästa sidorna på nätet. W3C utvecklar även webbstandarderna, så att du kan vara säker på att vad de än skriver på sin sida fungerar.

En annan sida som jag brukade lära mig mycket av var Din HTML-källa. Den här sidan innehåller HTML och CSS, och även några avancerade tips om kodning, marknadsföring, tillgänglighet och allmänt hur man skapar en bra webbplats. Det har stor CSS-hjälp dock, definitivt värt ett besök.

Äntligen kan du ta en titt på några relaterade bloggar och artiklar som denna fantastiska sammanfattning av grundläggande CSS-tekniker och 53 tekniker du inte kan leva utan.