CSS-Etalage

Dit is een etalage met verklaring van veelgebruikte css-elementen en methoden. Gemaakt door Benno Kruit.

Inhoud

CSS in HTML
Verwijzingen naar elementen
Opmaak

1. CSS in HTML

1.1. Style tag

Hello World!

<style type="text/css">
	b
		{
		color:red;
		}
</style>
<b>Hello World!</b>

1.2. In tag

Hello World!

<b style="color:red;">Hello World!</b>

1.3. Linked

Hello World!

<link rel="stylesheet" type="text/css" href="external-stylesheet.css" />
<b>Hello World!</b>

2. Verwijzingen naar elementen

2.1. Alle elementen

Hello World!

<style type="text/css">
	b
		{
		color:red;
		}
</style>
<b>Hello World!</b>

2.2. Class

Hello World!
Oh No!

<style type="text/css">
	.warning
		{
		color:red;
		}
</style>
<b class="warning">Hello World!</b><br>
<b class="warning">Oh No!</b>

2.3. Id

Een class is voor meerdere dingen, een id voor één specifiek element. (Soort vs. naam)

Hello World!

<style type="text/css">
	#warning
		{
		color:red;
		}
</style>
<b id="warning">Hello World!</b>

2.3. Combinatie 1

Hello World!
Hello World!

<style type="text/css">
	b.warning
		{
		color:red;
		}
</style>
<b class="warning">Hello World!</b><br>
<i class="warning">Hello World!</i>

2.4. Combinatie 2

Let op de spatie bij b .warning!

Hello World!
Hello World!

<style type="text/css">
	b .warning
		{
		color:red;
		}
</style>
<b><i style="color:red;">Hello World!</i></b><br>
<b class="warning">Hello World!</b>

2.5. Combinatie 3

Hello World!

<style type="text/css">
	b span.warning i
		{
		color:red;
		}
</style>
<b><span style="color:red;"><i>Hello World!</i></span></b><br>

2.6. Meerdere

Hello World!
Hello World!

<style type="text/css">
	b, i
		{
		color:red;
		}
</style>
<b>Hello World!</b><br>
<i>Hello World!</i>

3. Opmaak

3.1. Kleur

Hello World!

color:red;

3.2. Font

Als hij de eerste van het lijstje niet kent, gaat hij naar de volgende.

Hello World!

font-family:Times New Roman, Times, Garamond, serif;

3.3. Font-weight

Hello World!

font-weight:bold;

3.4. Text-decoration

Hello World!

text-decoration:underline;

3.5. Font-style

Hello World!

font-style:italic;

3.5. Font-size

Hello World!

font-size:20px;

Veel en veel meer op W3schools.