Som jag nämnde i tidigare inlägg om HTML så kan man sammankoppla HTML med CSS.
CSS står för Cascading Style Sheets och är som en stilmall. Har du tidigare haft en blogg t.ex. på blogg.se så har du kanske även märkt att man kan redigera sin blogg både i HTML (sida för sida) eller redigera CSSen som då byter egenskaper för hela bloggen eftersom HTML-sidorna är kopplade till denna. Så kort och gott kan man säga att CSS är grundstilen för hela bloggen/webbplatsen. Om man t.ex. har en väldigt stor webbplats med många sidor och bara vill byta bakgrundsfärg eller kanske typsnitt på texten så skulle det ju ta väldigt lång tid att gå in på varje sida var för sig för att redigera en sådan sak.
Lite grunder om CSS
I CSS-dokument ska man jobba med { istället för < när man bygger taggar.
{ = start
} = slut
Exempel:
body {
background-color: #d0e4fe;
}
Då har vi bestämt bakgrundsfärgen för sidans "body".
Lägger vi dessutom till följande så har vi även bestämt rubrikers storlek (h1), färg (orange) och placering (center)
h1 {
color: orange;
text-align: center;
}
För att lägga till egenskaper för brödtext använder vi p och lägger sedan till typsnitt och storlek på följande vis.
p {
font-family: "Times New Roman";
font-size: 20px;
}
20px står för antalet pixlar, alltså storleken på texten.
Om vi ska sätta ihop dessa och använda de i en CSS-fil kommer det att se ut som nedan med före- och efter-bild.
CSS står för Cascading Style Sheets och är som en stilmall. Har du tidigare haft en blogg t.ex. på blogg.se så har du kanske även märkt att man kan redigera sin blogg både i HTML (sida för sida) eller redigera CSSen som då byter egenskaper för hela bloggen eftersom HTML-sidorna är kopplade till denna. Så kort och gott kan man säga att CSS är grundstilen för hela bloggen/webbplatsen. Om man t.ex. har en väldigt stor webbplats med många sidor och bara vill byta bakgrundsfärg eller kanske typsnitt på texten så skulle det ju ta väldigt lång tid att gå in på varje sida var för sig för att redigera en sådan sak.
Lite grunder om CSS
I CSS-dokument ska man jobba med { istället för < när man bygger taggar.
{ = start
} = slut
Exempel:
body {
background-color: #d0e4fe;
}
Då har vi bestämt bakgrundsfärgen för sidans "body".
Lägger vi dessutom till följande så har vi även bestämt rubrikers storlek (h1), färg (orange) och placering (center)
h1 {
color: orange;
text-align: center;
}
För att lägga till egenskaper för brödtext använder vi p och lägger sedan till typsnitt och storlek på följande vis.
p {
font-family: "Times New Roman";
font-size: 20px;
}
20px står för antalet pixlar, alltså storleken på texten.
Om vi ska sätta ihop dessa och använda de i en CSS-fil kommer det att se ut som nedan med före- och efter-bild.
I exemplet ovan har jag använt mig av Try it-editorn på W3schools.
Hur gör man då för att koppla en HTML-fil till en CSS-fil när du bygger helt själv från grunden?
Även nu kan du använda dig av W3schools som jag tipsade om i mitt tidigare inlägg om HTML. Där finns mycket hjälp och färdiga koder.
Hur gör man då för att koppla en HTML-fil till en CSS-fil när du bygger helt själv från grunden?
- Skapa en HTML-fil och en CSS-fil
- Lägg båda filerna i en och samma mapp i din dator
- Lägg in <link rel="stylesheet" type="text/css" href="minstilmall.css"> i din/dina HTML-filer som du vill koppla till CSS-filen. Glöm inte att byta ut mitt filnamn mot filnamnet på din egen CSS.
Även nu kan du använda dig av W3schools som jag tipsade om i mitt tidigare inlägg om HTML. Där finns mycket hjälp och färdiga koder.