Att lägga till CSS - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.08

2020-10-31T13:08:45Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.08
Rad 36:		Rad 36:
	För att länka till en extern CSS-fil behöver vi ytterligare en ny [[tagg]]. I det här fallet heter [[tagg]]en <code><[[link]]></code>. Den används för att skapa en länk till en extern fil. Vi behöver även tala om vad det är för typ av [[relation]] som gäller mellan de två filerna. Det gör man med hjälp av attributet ”<code>rel</code>” (som är förkortning av ”[[relation]]”). I vårt fall vill vi ange relationen som ”<code>stylesheet</code>”. Låt oss nu säga att vi vill länka till en extern CSS-fil som heter ”<code>style.css</code>”, då skulle vi lägga till följande i <code>[[head]]</code> på vår HTML-sida:		För att länka till en extern CSS-fil behöver vi ytterligare en ny [[tagg]]. I det här fallet heter [[tagg]]en <code><[[link]]></code>. Den används för att skapa en länk till en extern fil. Vi behöver även tala om vad det är för typ av [[relation]] som gäller mellan de två filerna. Det gör man med hjälp av attributet ”<code>rel</code>” (som är förkortning av ”[[relation]]”). I vårt fall vill vi ange relationen som ”<code>stylesheet</code>”. Låt oss nu säga att vi vill länka till en extern CSS-fil som heter ”<code>style.css</code>”, då skulle vi lägga till följande i <code>[[head]]</code> på vår HTML-sida:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<link rel="stylesheet” href=”style.css">		<link rel="stylesheet” href=”style.css">
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	<code>[[Link]]</code> är en av de [[tagg]]ar som inte behöver en [[sluttagg]]. Liksom i fallet med <code>[[img]]</code> kan man stänga den om man vill, men man gör oftast inte det.		<code>[[Link]]</code> är en av de [[tagg]]ar som inte behöver en [[sluttagg]]. Liksom i fallet med <code>[[img]]</code> kan man stänga den om man vill, men man gör oftast inte det.
Rad 51:		Rad 49:
	För att använda denna metod lägger man till [[CSS]] direkt i taggarna med hjälp av det [[globala attribut]]et <code>style</code>. Om vi vill använda denna metod för att sätta röd text på ett <code>[[hx\|h1]]</code>-element, skulle vi göra så här:		För att använda denna metod lägger man till [[CSS]] direkt i taggarna med hjälp av det [[globala attribut]]et <code>style</code>. Om vi vill använda denna metod för att sätta röd text på ett <code>[[hx\|h1]]</code>-element, skulle vi göra så här:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<h1 style=”color=red;”>En röd rubrik</h1>		<h1 style=”color=red;”>En röd rubrik</h1>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.		Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.

PGJ: /* CSS direkt i HTML-taggarna */

2020-09-05T06:15:59Z

CSS direkt i HTML-taggarna

← Äldre version		Versionen från 5 september 2020 kl. 06.15
Rad 59:		Rad 59:
	Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.		Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.

	Det finns väldigt få anledningar att ~~sätta~~ [[CSS]] direkt i element och man bör undvika det så mycket som möjligt. Håll dig helst till externa [[stilmall]]ar, som du länkar till. Det är den bästa och mest flexibla lösningen.		Det finns väldigt få anledningar att lägga till [[CSS]] direkt i element och man bör undvika det så mycket som möjligt. Håll dig helst till externa [[stilmall]]ar, som du länkar till. Det är den bästa och mest flexibla lösningen.

	== Nästa aktivitet ==		== Nästa aktivitet ==

PGJ: /* <style> */

2019-01-13T13:12:41Z

<style>

← Äldre version		Versionen från 13 januari 2019 kl. 13.12
Rad 26:		Rad 26:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	Ovanstående skulle på ett enkelt sätt tillämpa det vi lärt oss hitintills om [[CSS]]. Lägg märke till att <code>[[style]]</code>-taggen sitter inom <code>[[head]]</code>. Detta beror på att det är information om dokumentet, dvs hur det ska se ut, snarare än innehåll som ska visas~~. Tryck på "result"-fliken för att se hur resultatet blir~~.		Ovanstående skulle på ett enkelt sätt tillämpa det vi lärt oss hitintills om [[CSS]]. Lägg märke till att <code>[[style]]</code>-taggen sitter inom <code>[[head]]</code>. Detta beror på att det är information om dokumentet, dvs hur det ska se ut, snarare än innehåll som ska visas.

	== Att länka till en extern CSS-fil ==		== Att länka till en extern CSS-fil ==

PGJ: /* <style> */

2019-01-13T13:12:25Z

<style>

← Äldre version		Versionen från 13 januari 2019 kl. 13.12
Rad 7:		Rad 7:

	Här följer ett kort exempel på hur man skulle kunna använda vår <code>[[hx\|h1]]</code>-regel i ett HTML-dokument.		Här följer ett kort exempel på hur man skulle kunna använda vår <code>[[hx\|h1]]</code>-regel i ett HTML-dokument.
	<codepen pen="KpQwxL" height="~~360~~">		<codepen pen="KpQwxL" height="380" tab="html,result">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>

PGJ: /* style-attributet */

2019-01-11T21:41:16Z

style-attributet

← Äldre version		Versionen från 11 januari 2019 kl. 21.41
Rad 55:		Rad 55:
	<h1 style=”color=red;”>En röd rubrik</h1>		<h1 style=”color=red;”>En röd rubrik</h1>
	</syntaxhighlight>		</syntaxhighlight>
	</~~code~~>		</div>

	Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.		Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.

PGJ: /* style-attributet */

2019-01-11T21:41:00Z

style-attributet

← Äldre version		Versionen från 11 januari 2019 kl. 21.41
Rad 51:		Rad 51:
	För att använda denna metod lägger man till [[CSS]] direkt i taggarna med hjälp av det [[globala attribut]]et <code>style</code>. Om vi vill använda denna metod för att sätta röd text på ett <code>[[hx\|h1]]</code>-element, skulle vi göra så här:		För att använda denna metod lägger man till [[CSS]] direkt i taggarna med hjälp av det [[globala attribut]]et <code>style</code>. Om vi vill använda denna metod för att sätta röd text på ett <code>[[hx\|h1]]</code>-element, skulle vi göra så här:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<h1 style=”color=red;”>En röd rubrik</h1>		<h1 style=”color=red;”>En röd rubrik</h1>
	</syntaxhighlight>		</syntaxhighlight>
			</code>

	Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.		Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.

PGJ: /* <link> */

2019-01-11T21:40:43Z

<link>

← Äldre version		Versionen från 11 januari 2019 kl. 21.40
Rad 36:		Rad 36:
	För att länka till en extern CSS-fil behöver vi ytterligare en ny [[tagg]]. I det här fallet heter [[tagg]]en <code><[[link]]></code>. Den används för att skapa en länk till en extern fil. Vi behöver även tala om vad det är för typ av [[relation]] som gäller mellan de två filerna. Det gör man med hjälp av attributet ”<code>rel</code>” (som är förkortning av ”[[relation]]”). I vårt fall vill vi ange relationen som ”<code>stylesheet</code>”. Låt oss nu säga att vi vill länka till en extern CSS-fil som heter ”<code>style.css</code>”, då skulle vi lägga till följande i <code>[[head]]</code> på vår HTML-sida:		För att länka till en extern CSS-fil behöver vi ytterligare en ny [[tagg]]. I det här fallet heter [[tagg]]en <code><[[link]]></code>. Den används för att skapa en länk till en extern fil. Vi behöver även tala om vad det är för typ av [[relation]] som gäller mellan de två filerna. Det gör man med hjälp av attributet ”<code>rel</code>” (som är förkortning av ”[[relation]]”). I vårt fall vill vi ange relationen som ”<code>stylesheet</code>”. Låt oss nu säga att vi vill länka till en extern CSS-fil som heter ”<code>style.css</code>”, då skulle vi lägga till följande i <code>[[head]]</code> på vår HTML-sida:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<link rel="stylesheet” href=”style.css">		<link rel="stylesheet” href=”style.css">
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	<code>[[Link]]</code> är en av de [[tagg]]ar som inte behöver en [[sluttagg]]. Liksom i fallet med <code>[[img]]</code> kan man stänga den om man vill, men man gör oftast inte det.		<code>[[Link]]</code> är en av de [[tagg]]ar som inte behöver en [[sluttagg]]. Liksom i fallet med <code>[[img]]</code> kan man stänga den om man vill, men man gör oftast inte det.

PGJ: /* Att länka till en extern CSS-fil */

2016-10-12T11:16:40Z

Att länka till en extern CSS-fil

← Äldre version		Versionen från 12 oktober 2016 kl. 11.16
Rad 29:		Rad 29:

	== Att länka till en extern CSS-fil ==		== Att länka till en extern CSS-fil ==
	Det finns många anledningar till varför man egentligen inte vill blanda [[HTML]] och [[CSS]] i samma dokument. Den främsta anledningen är att om vi har externa CSS-filer, så kan vi återanvända samma [[CSS-regel\|CSS-regler]] i flera HTML-dokument. Vilket vi enkelt kan göra genom att länka till en och samma CSS-fil. Låt säga att man har en riktigt stor sajt med massvis med sidor~~, så~~ kommer ~~man~~ på att man vill göra om all text till lila, då skulle det bli jättejobbigt om man behövde redigera och ändra i varje sida! Istället samlar man allt i en extern CSS-fil, ändrar i den och vips slår ändringen igenom på alla sidor som länkar till den CSS-filen.		Det finns många anledningar till varför man egentligen inte vill blanda [[HTML]] och [[CSS]] i samma dokument. Den främsta anledningen är att om vi har externa CSS-filer, så kan vi återanvända samma [[CSS-regel\|CSS-regler]] i flera HTML-dokument. Vilket vi enkelt kan göra genom att länka till en och samma CSS-fil.

			Att ha separata CSS-filer är att föredra. Låt säga att man har en riktigt stor sajt med massvis med sidor... Man kommer på att man vill göra om all text till lila, då skulle det bli jättejobbigt om man behövde gå in och redigera och ändra i varje sida! Istället samlar man allt utseenderelaterat i en extern CSS-fil, ändrar i den och vips slår ändringen igenom på alla sidor som länkar till den CSS-filen.

	=== <code><[[link]]></code> ===		=== <code><[[link]]></code> ===

PGJ: /* <style> */

2016-10-12T11:14:28Z

<style>

← Äldre version		Versionen från 12 oktober 2016 kl. 11.14
Rad 26:		Rad 26:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	Ovanstående skulle på ett enkelt sätt tillämpa det vi lärt oss hitintills om [[CSS]]. Lägg märke till att <code>[[style]]</code>-taggen sitter inom <code>[[head]]</code>. Detta beror på att det är information om dokumentet, dvs hur det ska se ut, snarare än innehåll som ska visas. ~~[http://exempel.webbling.se/cssdemo1.html Här] kan du~~ se hur ~~exemplet~~ blir ~~att se ut i din webbläsare~~.		Ovanstående skulle på ett enkelt sätt tillämpa det vi lärt oss hitintills om [[CSS]]. Lägg märke till att <code>[[style]]</code>-taggen sitter inom <code>[[head]]</code>. Detta beror på att det är information om dokumentet, dvs hur det ska se ut, snarare än innehåll som ska visas. Tryck på "result"-fliken för att se hur resultatet blir.

	== Att länka till en extern CSS-fil ==		== Att länka till en extern CSS-fil ==

PGJ: /* CSS direkt i HTML-taggarna */

2016-04-01T08:51:57Z

CSS direkt i HTML-taggarna

← Äldre version		Versionen från 1 april 2016 kl. 08.51
Rad 51:		Rad 51:
	</syntaxhighlight>		</syntaxhighlight>

	Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av ~~så kallade~~ [[selektor]]er. Vi kommer ~~till dessa~~ i en kommande ~~sektion~~.		Denna typ av stilar påverkar enbart det [[element]] i vilket [[attribut]]et sätts (och eventuellt dess underelement, beroende på om det är CSS-egenskaper som ärvs). Vilket ju kan vara praktiskt. Men det finns mycket bättre sätt på vilka man kan adressera specifika [[element]]. Detta görs med hjälp av [[selektor]]er. Vi har sett hur man använder element-selektorn i tidigare exempel. Vi kommer att täcka in mer avancerade selektorer i kommande avsnitt.

	Det finns väldigt få anledningar att sätta [[CSS]] direkt i element och man bör undvika det så mycket som möjligt. Håll dig helst till externa [[stilmall]]ar, som du länkar till. Det är den bästa och mest flexibla lösningen.		Det finns väldigt få anledningar att sätta [[CSS]] direkt i element och man bör undvika det så mycket som möjligt. Håll dig helst till externa [[stilmall]]ar, som du länkar till. Det är den bästa och mest flexibla lösningen.