CSS

CSS - Links

Wikipedia - Cascading Style Sheets.

W3schools.com - CSS Tutorial.

Zelfstudie.be - Wat is nieuw in CSS3?

css3generator.com - CSS3 Generator.

CSS - Voorbeeld met variabelen

Open hier het voorbeeld met CSS variabelen (var).

Opmerking. De CSS-code van de layout hierboven vind je hieronder.

CSS - Voorbeeld met variabelen in stylesheet

Inhoud van style.css:

:root {
	--background-color_body: lightblue;
	--background-color_container: floralwhite;
	--background-color_p: pink;
	--background-color_button: lightgreen;

	--border_button: 2px solid darkgreen;
	--border_container: 2px solid darkblue;

	--blue: #6495ed;

	--color_h2: purple;
	--color_h3: darkblue;
	--color_p: darkred;
	--color_button: darkmagenta;

	--font-size_h2: 44px;
	--font-size_h3: 34px;
	--font-size_p: 18px;
	--font-size_button: 15px;

	--radius: 15px;
	--radius_button: 5px;

	--font-weight: 900;
}

.css_var {
	background-color: var(--background-color_body);
	border-radius: var(--radius);
	padding: 15px;
}

.var_h2 {
	color: var(--color_h2);
	font-size: var(--font-size_h2);
}

.var_h3 {
	border-bottom: 2px solid var(--blue);
	color: var(--color_h3);
	font-size: var(--font-size_h3);
	margin-bottom: 15px;
	margin-top: 0;
}

.container_var {
	background-color: var(--background-color_container);
	border: var(--border_container);
	border-radius: var(--radius);
	margin-top: 15px;
	padding: 15px;
}

.var_p {
	background-color: var(--background-color_p);
	color: var(--color_p);
	font-size: var(--font-size_p);
	margin: 1px;
}

button {
	background-color: var(--background-color_button);
	border: var(--border_button);
	border-radius: var(--radius_button);
	color: var(--color_button);
	font-size: var(--font-size_button);
	font-weight: var(--font-weight);
	padding: 5px;
}

CSS - Voorbeeld met typen kleurcode

Open hier het Voorbeeld met typen kleurcode.

Joost De WebMaker
2002-2024 © Joost van Meeteren

Laatste update website: vrijdag 20 december 2024

Deze website past cookies toe voor optimaal gebruik van dit platform | bron | Akkoord