Vi har avslutat projekt 1 och kommer nu introducera CSS.
Del 1 – Inledning Visual Studio Code
Det kommer skärmdumpar här nedan hur vi arbetar med Visual Studio Code genom att skapa mappar för varje övning/projekt.
Ovan hur det kan se ut när du startar Visual Studio Code. Vi har tidigare skapat en mapp för hela kursen, den mappen kan redan vara öppen i Visual Studio Code men behöver ni öppna upp den väljer ni Open Folder som ni ser på bilden ovan. Det går också att använda rullgardinsmenyn File -> Open Folder.
När ni valt Open Folder får ni utseendet som bilden nedan.
Då väljer ni er mapp som ni skapat innan som troligtvis heter Webbutveckling.
När ni valt er mapp så kommer den upp i vänsterspalten. Härifrån kan ni skapa nya mappar och filer för era respektive projekt eller övningar.
Markerat till vänster ser ni knappen för att skapa en ny mapp. När vi nu ska arbeta med Övning 1 så skapar vi en mapp för det.
När mappen är skapad så döper vi den. I detta fall till Övning 1.
Nu är det dags att skapa en fil. Kolla på bilden till vänster så ser ni markeringen på knappen som är till för att skapa en ny fil. Se till att mappen Övning 1 är markerat så att filen du skapar hamnar där. Skulle den hamna utanför den mappen kan du flytta den genom att dra i den och släppa i korrekt mapp.
Eftersom detta är vår första fil till vår webbplats så döper vi den till index.html
När vi döpt den så kommer det dokumentet upp.
Det är nu vi ser vårt HTML-dokument. För att skapa den grundläggande strukturen som vi alltid vill ha gör vi ett utropstecken och slår enter. Utropstecken gör ni med shift+1, när det är gjort så har vi vår grundläggande HTML-fil och kan börja jobba.
Del 2 – Skapa och länka en CSS-fil
För att skapa en CSS-fil gör vi på samma sätt som med HTML-filen bara att vår filändelsen ska vara .css istället för .html
Det blir en tom fil och när vi arbetar med CSS så behöver vi inte ha någon grundstruktur utan den får vara helt tom nu från början.
Din CSS-fil behöver vara länkad till din HTML-fil. Om vi inte länkar ihop dem så kommer vi heller inte se någon förändring på vår hemsida när vi sedan kikar på den.
För att länka ihop dem använder du nedanstående någonstans mellan head-taggarna. Markupen nedan förutsätter att din CSS-fil heter style.css, har du döpt den till något annat så ska du byta värdet på href här.
<link href="style.css" rel="stylesheet">Nu har vi länkat våra sidor och kan börja att fixa vår HTML-sida. HTML är strukturen på vår sida vi kan kalla det skelettet där vi har vårt innehåll i form av text och taggar. Utan CSS blir det inte så snyggt utan vi får samma typsnitt, allt blir svart och det mesta presenteras efter varandra i en kolumn.
Med CSS kan vi byta färger, typsnitt och placera element bredvid varandra. I CSS så väljer vi ut exempelvis taggar för att ändra utseendet på dem. HTML använder vi < > och behöver också stänga med </
I CSS ser det lite annorlunda, du kan se exemplet nedan hur vi kan byta färg på rubriken h1.
h1 {
color:blue;
}Först skriver vi vilken tagg vi väljer, då använder vi bara taggens namn. Sen använder vi måsvingar (curly brackets, klammerparenteser) åt båda hållen. Måsvingarna skapar du med knappen alt gr + 7 och alt gr + 0.
Mellan måsvingarna kan vi skriva de vi vill förändra. Vi använder en egenskap och fyller i ett värde. Exempelvis egenskapen color som ovan och värdet blue. Vi använder kolon : mellan egenskap och värde och semikolon när vi är klara med en deklaration.
Ha för vana att använda semikolon i slutet på varje deklaration även om den inte behövs om man bara skapar en deklaration eller på den sista om man har flera.
Det du ska göra
Nu vill jag att du i ditt dokument skapar tre olika rubriker med valfri text. Varje rubrik ska ha en egen färg.
Skapa också två stycken med text i. Kopiera in valfri text från någon uppgift eller använd platshållartext från lorem ipsum.
Eftersom vi väljer en tagg så blir det nu problem om vi vill ha olika färg på våra stycken.
Som bonusuppgift kan du se om du kan lösa det?
När du är klar zippar du ihop din HTML-fil och din CSS-fil och lämnar in under Övning 1 i Classroom.