Eigen CSS

Met een <style> geef je je hele pagina in één keer opmaak. Zo hoef je niet bij elke tag een style te zetten, en verander je later alles op één plek. De regels gelden alleen voor je eigen pagina: de rest van de site blijft zoals hij is.

Een regel voor elke tag

Zet de <style> bovenaan je pagina. Een regel begint met wat je wilt opmaken, bijvoorbeeld h2 voor alle kopjes. Daarna komen tussen { en } de eigenschappen, elk met een dubbele punt en een puntkomma erachter.

<style>
h2 { color: #7048e8; font-family: Georgia, serif; }
p { line-height: 1.6; }
a { color: #e0338a; font-weight: bold; }
</style>
<h2>Over mij</h2>
<p>Elk kopje op deze pagina is paars, en elke <a href="{pagina:2}">link</a> roze en vet.</p>

Klassen en id's

Wil je niet alle kopjes of hokjes opmaken, maar alleen een paar? Geef ze dan een naam.

• Een klasse gebruik je zo vaak als je wilt: class="kaartje" in de HTML en .kaartje in de CSS, met een punt.
• Een id is er maar één keer per pagina: id="kop" in de HTML en #kop in de CSS, met een hekje.
• Een naam bestaat uit letters, cijfers, - en _, en is hooguit 40 tekens lang. Hoofdletters maken niet uit: .Kaartje en .kaartje zijn hetzelfde, net als vroeger.

<style>
#kop { color: #e0338a; letter-spacing: 3px; }
.kaartje { margin: 6px 0; padding: 8px; background-color: #fff0f6; border: 2px dotted #e0338a; }
</style>
<h3 id="kop">Mijn vrienden</h3>
<div class="kaartje">Lotte, al sinds de brugklas</div>
<div class="kaartje">Daan, van voetbal</div>

Achter de schermen zet de site u- voor elke naam. Zo kan jouw .kaartje nooit iets van de site zelf raken. Je merkt er niets van: je CSS werkt gewoon.

Als je muis erop staat: :hover

Met :hover achter een naam geef je opmaak die alleen geldt als de muis erop staat. Een telefoon heeft geen muis: verstop dus niets belangrijks achter :hover.

<style>
.knop { display: inline-block; padding: 6px 12px; border: 2px solid #1c7ed6; color: #1c7ed6; text-decoration: none; }
.knop:hover { background-color: #1c7ed6; color: white; }
</style>
<a class="knop" href="{pagina:2}">Naar pagina 2</a>
<a class="knop" href="{pagina:3}">Naar pagina 3</a>

Iets ervoor of erachter: ::before en ::after

Met ::before en ::after zet je tekst voor of achter iets, zonder dat je die overal hoeft te typen. De tekst staat tussen aanhalingstekens achter content. Plaatjes kunnen hier niet.

<style>
.nieuw::before { content: "NIEUW! "; color: #e0338a; font-weight: bold; }
.punt::before { content: "» "; color: #7048e8; }
</style>
<p class="nieuw">Ik heb een kat!</p>
<p class="punt">Lezen</p>
<p class="punt">Tekenen</p>

Alleen op een telefoon: @media

Regels binnen @media (max-width: 600px) { … } gelden alleen op een scherm tot 600 pixels breed, dus op de meeste telefoons. Zo zet je kolommen onder elkaar of maak je een kopje wat kleiner. Een voorbeeld staat bij Tabellen en kolommen.

De namen van toen

• body, html en .Achtergrond zijn de achtergrond van je hele profielpagina. In de voorbeelden van Profielhulp komt die achter het vak met het resultaat.
• .Profiel is je hele pagina-vlak: daar kun je bijvoorbeeld een tekstkleur, letter of rand op zetten.
• Stijlen voor de oude site zelf, zoals .KoKop en .MenuKop, doen niets meer.

Wat niet kan

Het filter houdt je pagina veilig voor iedereen die kijkt, ook voor de jongste leden. Daarom gaat dit eruit:

• Attribuutselectors (a[href]), :has(), :is(), :where() en :root: die selector valt weg (staat hij in een rij als h2, a[href], dan blijft h2 staan). Daarmee kan CSS ook dingen van de site zelf vinden en raken, zoals de kaart van een filmpje.
• @import en @font-face: die halen een bestand van een andere site, en die site ziet dan wie jouw profiel bekijkt. Kies een lettertype dat bijna iedereen heeft, zoals Arial, Verdana, Georgia of Trebuchet MS. Heeft een bezoeker jouw lettertype niet, dan ziet hij een gewone letter.
• var() en eigen variabelen (--kleur): die gebruikt de site zelf.
• !important wordt weggehaald; de rest van de regel blijft staan. De site gebruikt het zelf om haar vaste delen te beschermen, zoals de kaart van een filmpje.
• position: fixed wordt absolute: wat je neerzet, blijft op zijn plek in je pagina en schuift mee. z-index gaat hooguit tot 100.

<style>
@import url(https://www.andere-site.nl/stijl.css);
@font-face { font-family: Mooi; src: url(https://www.andere-site.nl/mooi.ttf); }
a[href*="youtube"] { color: red; }
div:has(img) { border: 1px solid; }
</style>

En wat je ook doet: alles blijft binnen je eigen vlak. Wat erbuiten valt, wordt afgeknipt. Zo blijft de site altijd herkenbaar, en kan iedereen je pagina bekijken in de eenvoudige weergave of melden bij de crew.