CSS

Inhoud

Inleiding

Verschillende methoden

CSS structuur

Classes

Pseudo Classes

Margin - border - padding

Inleiding

CSS inleiding.mp4

We hebben reeds gezien dat we in HTML een basis opmaak aan onze website kunnen geven. We kunnen door middel van de HTML tags <b>, <u> en <i> de tekst onderlijnen, vet, en/of schuin zetten. Maar wanneer we een algemene opmaak willen definiëren voor bijvoorbeeld een <h1>, <p>,... doorheen de hele website, botsen we al snel op het feit dat dit via HTML niet kan. Daarom gebruiken we naast HTML, voor de structuur van de website, ook CSS (Cascading Style Sheet) om een opmaak te definiëren voor de verschillende elementen van de website.

We kunnen CSS gebruiken op verschillende manieren, als inline style, interne stylesheet en als externe stylesheet. Hier gaan we even verder op in.

Verschillende methoden

Inline style

CSS inline.mp4

Bij deze methode gaan we de opmaak van een element definiëren binnen de HTML-tag zelf. Dit wordt enkel gebruikt wanneer het om een incidentele en individuele afwijking van een specifiek element gaat. In HTML bestaat een attribuut style, welke we op een html-element kunnen toepassen. We verliezen met deze methode wel het doel uit het oog om een centrale opmaak, te definiëren voor onze website. Je kan bijvoorbeeld het h1 element een blauwe kleur geven op je HTML pagina.

Voorbeeld (inline.html):

<html>

<head>

</head>

<body>

<h1 style="color:blue;">Mijn titel</h1>

Mijn tekst op website

</body>

</html>

Interne stylesheet

CSS intern.mp4

Bij het gebruik van een interne stylesheet (ingesloten stijlblad), plaatsen we de CSS code binnen de <head></head> tags van elk HTML bestand.

Voorbeeld (intern.html):

<html>

<head>

h1{color: blue;}

</style>

</head>

<body>

<h1>Mijn titel</h1>

Mijn tekst op website

<h1>Mijn tweede titel<h1>

</body>

</html>

Dit wil zeggen dat we per pagina onze CSS moeten instellen, wat omslachtig is, indien je een uniforme layout hebt. Aanpassingen van je layout zullen dus ook in elk HTML document aangepast moeten worden. Om dit te vermijden, gebruiken we best een externe stylesheet.

Externe stylesheet

CSS extern.mp4

Om een koppeling te maken tussen een HTML-bestand en een extern stijlblad, moeten we onderstaande regel plaatsen tussen de <head> tags van dit HTML document waarop de CSS regels moeten toegepast worden. De koppeling naar het externe stijlblad wordt gelegd d.m.v. het link-element:

Voorbeeld (extern.html):

<html>

<head>

//leg koppeling tussen extern.html en de CSS gedefinieerd in opmaak.css

</head>

<body>

<h1>Mijn titel</h1>

Mijn tekst op website

<h1>Mijn tweede titel</h1>

</body>

</html>

opmaak.css:

h1{

color: red;

font-size: 24px;

}

Welke manier aan te bevelen is, hangt af van wat je wilt doen. Als je slechts 1 bestand hebt waar de opmaak voor nodig is dan maken we gebruik van plaatsing ervan binnen de <head></head> tags (interne). Als je van plan bent om de CSS voor meerdere bestanden te gebruiken, dan is het aan te bevelen en ook meer overzichtelijk om voor de externe bestand methode te kiezen.

Let op! Binnen deze cursus opteren we er voor om voornamelijk het externe stijlblad te hanteren.

CSS structuur

CSS structuur.mp4

Een CSS-opmaakregel voor een HTML-element wordt als volgt opgebouwd:

De selector is het HTML-element waarvoor we een opmaak willen definiëren. De eigenschap stelt dat attribuut voor waarvoor we een opmaak willen definiëren voor ons specifieke element. De waarde, is de waarde van de eigenschap die we willen instellen.

Stel dat we voor het HTML-element h1 opmaak willen definiëren, ziet dat er als volgt uit:

h1 {

color: red; /*Rood*/

text-align: center;

}

en het resultaat is:

Uitleg

h1, de selector, die zegt over welk element we het hebben;
color, is een eigenschap, die iets over het element zegt;
red, de waarde van color;
/* Rood */, commentaar.

Opmerkingen

Let op! In een stijlblad mag men naar eigen goeddunken spaties en lege regels toevoegen. Dus het is niet belangrijk waar het staat, maar wel hoe het er staat. Daarom zijn de te gebruiken leestekens van groot belang!

Zoals:

{ accolade openen;
- het streepje tussen text-align;
: de dubbele punt tussen de eigenschap en de waarde;
; de puntkomma aan het einde van de waarde;
} en de sluit accolade.

Let op! Elke selector kan meerdere eigenschappen hebben en elke eigenschap binnen die selector kan allerlei waardes bevatten.

Voorbeeld

body{

color: #e4e4e4; /* kleur grijs */

background-color: blue;

font-family: “Trebuchet MS”, Verdana, Arial, serif;

}

Let op! Waarden die uit meerdere woorden bestaan, worden tussen aanhalingstekens gezet. (zoals bij Trebuchet MS).Let op! We kunnen ook voor verschillende selectoren dezelfde opmaak definiëren.

Voorbeeld

We geven hier dezelfde opmaak aan h1,h2 en p.

h1,h2,p {

font-weight: bold; color:#008080;

}

Overerving - inheritance

Wanneer men een element binnen een ander plaatst (nesten), zal het geneste element de eigenschappen erven, toegekend aan het element.

Tenzij u een andere waarde toewijst aan een eigenschap:

body {

font-family: Verdana;

}

Nu krijgt alle tekst binnen de body het font verdana.

Als men bepaalde tekst een ander font wil geven kan dat als volgt:

h1 {

font-family: Arial, sans-serif;

}

p {

font-family: Tahoma, serif;

}

Nu krijgen alle <h1> tags binnen het bestand het font Arial en de <p> tags krijgen Tahoma, terwijl de font in andere elementen het eerdere font houden, die bij body is opgegeven (Verdana).

Commentaar

Commentaar plaatsen we tussen /* en */

/* dit is de opmaak voor h1*/

h1 {

font-family: Arial, sans-serif;

}

Classes

CSS classes.mp4

In CSS kunnen gebruik maken van klassen. Dit wil zeggen dat we een bepaalde opmaak gaan definiëren zonder dit direct voor een specifiek element te doen. In plaats van de selector als eerste te plaatsen in je opmaakregel, plaats je een naam, voorafgaand met een punt, van een bepaalde klasse. De naam mag slechts één woord zijn zonder spatie.

Met een class selector kan je een stijl maken, die toegepast kan worden op elke HTML tag. Je zou bijvoorbeeld een klasse kunnen maken om tekst te benadrukken. Dit kan je dan bijvoorbeeld zowel in een paragraaf, als in een tabel gebruiken.

De selector wordt dan als volgt geschreven: .naam van de class .(dus punt en naam van de klasse)

In de HTML tag ken je de klasse toe door de klasnaam in de tag te plaatsen, gevolgd door "=" en de naam van de klasse. (class="naamKlasse").

Voorbeeld

.benadrukken{ /*mijn klasse om tekst te benadrukken*/

font-weight: bold;

color: red;

}

<html>

<head>

</head>

<body>

<h1>Mijn titel</h1>

<p class="benadrukken">Dit is belangrijke tekst</p>

Deze tekst is niet belangrijk.

</body>

</html>

We kunnen ook 2 klassen laten werken op 1 element.

CSS definitie:

.benadrukken{ /*mijn klasse om tekst te benadrukken*/

font-weight: bold;

color: red;

}

.achtergrond{

background-color: blue;

}

Deze kan men als volgt combineren:

<p class="benadrukken achtergrond">dit is een voorbeeld van het toepassen van 2 klassen op 1 element.</p>

Conclusie

Een klasse gebruik je om individuele onderdelen te koppelen aan CSS. Je wilt bijvoorbeeld een tekst rood maken en dan geef je deze tekst een class mee. Deze class kan vaker worden gebruikt in een webpagina. Je kunt namelijk besluiten om meerdere delen van de tekst rood te maken.

Kies de namen zorgvuldig. Maak geen class met de naam rood of groen , want wil je die kleur ooit eens wijzigen in zwart en paars dan staat het raar dat de class rood een kleur zwart geeft. Geef de namen ook geen nummer mee, dat maakt het maar ingewikkeld .

Pseudo Classes

CSS pseudoclasses.mp4

Pseudo klassen worden gebruikt om een bepaald effect aan een selector mee te geven. Het bekendste pseudo-class is wel de :hover die zorgt ervoor dat de weergave van een element wijzigt, wanneer je er met de muisaanwijzer boven komt.

Een pseudo-class selector is vergelijkbaar met een klasse in HTML, maar heeft als basis een dubbele punt gevolgd door de naam van de pseudo-class.

Syntax

selector:pseudo-class {

eigenschap: waarde

}

Meest voorkomende pseudo-selectors

Onderstaande a:links (ankers) met hun resp. waardes

a:link {color:#FF0000;} /* niet bezochte link */

a:visited {color:#00FF00;} /* Reeds bezochte link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* geselecteerde link */

Let op! De juiste volgorde van definiëren is bij a: heel belangrijk. Bij verkeerde volgorde werkt het niet. Zo moet a:hover komen na a:link en ook na a:visited. Maar a:active moet weer na a:hover gedefinieerd worden.

Margin - border - padding

CSS padding margin.mp4

Margin - Padding

Om het verschil duidelijk te maken tussen margin en padding, kunnen we best naar de schematische voorstelling kijken.

Padding is de ruimte tussen de inhoud en de rand, die je al dan niet kan zien. Margin is de ruimte die je rond het element wil creëren, rond de border.

Let op! Wanneer we deze ruimtes willen definiëren, kunnen we dit instellen voor de bovenkant, onderkant of zijkanten. Dit hoeft niet perse aan elke kant gelijk te zijn.

De volgorde om de witruimtes in te stellen is:

top
right
bottom
left

Dit wil zeggen dat als je CSS definieert om de margin in te stellen voor een paragraaf als volgt:

p {

margin:3px 5px 8px 10px;

}

je de marge vanaf de top instelt op 3px, rechts 5px, onderaan 8px en links 10px.

Merk op! Indien je voor de margin of padding overal dezelfde waarde wil instellen, is het voldoende om slechts één waarde op te geven.

Onderstaand voorbeeld schakelt de marges rond de p uit.

p {

margin:0;

}

p {

margin: 25px 50px; /*onder en boven 25px, links en rechts 50px*/

}

Border

De border is de rand van een element. De randen kunnen voorzien worden van kleuren, de diktes en soorten randen kunnen ook ingesteld worden. De volgorde waarin dit wordt ingesteld, is net zoals bij margin en padding.

De randstijlen zijn: dotted, dashed, groove, solid, inset, double, ridge en outset.

De diktes van de rand zijn: medium, thin, thick.

Kleuren

CSS biedt zeer veel mogelijkheden om tekst of achtergronden een kleur te geven. De CSS-eigenschap color bepaalt de voorgrondkleur van de tekst. En background de kleur van de achtergrond.

body{

color:#008000;

background:#FFc;

}

Er zijn verschillende manieren om kleuren te schrijven:

RGB(0,23,103);
hexadecimaal #003399;
maar ook benoemen bij de engelse naam zoals blue, red, etc.

Een hexadecimale kleurcode bestaat uit 3 groepen van ieder 2 tekens. Deze 3 groepen vertegenwoordigen de RGB-waarden, dus de 3 kleuren Rood, Groen en Blauw.

Merk op! Als de 2 tekens van een kleur dezelfde zijn, kun je deze inkorten door maar 1 teken te schrijven.

Voorbeelden

#000000 wordt #000
#778888 wordt #788

Tekst

Text-align

We kunnen tekst gaan uitlijnen met behulp van de eigenschap text-align.

Waarden: left | right | center | justify

h4 {

text-align: center;

}

Text-decoration

Text-decoration voegt decoratie toe aan de tekst, zoals bijvoorbeeld een lijntje.

h1 {

text-decoration: underline;

}

En zo bestaan er uiteraard nog een heel aantal andere eigenschappen die ingesteld kunnen worden voor tekst.

Lijsten

HTML kent verschillende soorten lijsten, waaronder de:

genummerde lijst (ol), onderverdeeld in list items (Ii);
niet-genummerde lijst (ul), onderverdeeld in list items (li).

De eigenschap list-style beïnvloedt het opsommingsteken

Genummerde lijst - Ordered list (ol)

Deze lijst is geordend, en zet cijfers voor de verschillende opsommingen.

Niet geordende lijst - (UL)unordened list

Bij een ongeordende lijst, kan je de opmaak van de icoontjes instellen die gebruikt worden bij de opsomming. Je kan bijvoorbeeld instellen dat het vierkantjes, cirkels of niets moet zijn. Hieronder zijn de waarden die men kan gebruiken voor een unordened list:

disc
square
circle
none

Voorbeeld

li {

list-style-type:square;

}

Om geen cirkeltje of vierkantje voor het item te krijgen, gebruiken we volgende CSS:

li {

list-style-type: none

}

Vanuit de lijst code <ul> en <li> kunnen we eenvoudige en ingewikkelde menu’s maken.

In volgende onderdeel laten we zien hoe we een verticale en een horizontale menu kunnen maken.

Horizontale menu

CSS horizontale menu.mp4

In plaats van een menu bovenaan te maken door middel van gewone links, gaan we deze links nu zodanig opmaken dat we een mooie menu krijgen bovenaan. Daarvoor moeten we eerst CSS definiëren die deze links/opsomming goed opmaakt.

CSS (menu.css)

ul.menu {

list-style-type: none; /*geen bolletjes*/

background-color: salmon;

overflow: hidden; /*achtergrondkleur over heel de breedte*/

padding: 0;

margin: 0;

}

li.menu {

float: left; /*plaatst list items naast elkaar*/

}

li.menu a {

display: block; /*heel blok klikbaar*/

color: white;

padding: 15px 30px; /*padding groot = knop groot*/

text-decoration: none; /*niet onderlijnen*/

text-align: center;

}

li.menu a:hover{

background-color: black;

}

HTML (horizontaleMenu.html)

<html>

<head>

</head>

<body>

<li class="menu"><a href="nieuws.html">Nieuws</a></li>

<li class="menu"><a href="contact.html">Contact</a></li>

</ul>

<br>

<p>Dit is een lijst zonder opmaak</p>

<ul>

<li><a href="https://gib.smartschool.be">Smartschool</a></li>

<li><a href="https://www.google.com">Google</a></li>

</ul>

</body>

</html>

Resultaat

Classroom

Page updated

Report abuse