CSS Cascading Style Sheets

CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies uit? – Stuk code zegt iets over meerdere elementen

Properties Eigenschappen (properties) bepalen hoe element eruit ziet – height – background-color – vele anderen… – 250+ –

Selector Selector geeft aan welke elementen Properties geven aan hoe ze eruit zien h3 { font-size: 20px; color: red; } HTMLCSS Selecteer op tag (type element)

Class selector.large-font { font-size: 99px; } HTMLCSS Selecteer op class (speciaal attribute)

Class selector p.large-font { font-size: 99px; } HTMLCSS Selecteer op tag met class

Class selector.link { cursor: pointer; }.green { color: green; }.purple { color: purple; } HTMLCSS Meerdere classes per element

Id selector #title { border-width: 3px; }.green { color: green; } HTMLCSS Selecteer op id (speciaal attribute) en/of op class

Combineren Operatie op/tussen selector(s) – Geeft nieuwe selector Operaties aan elkaar rijgen dus! – ((4 + 5) / 3) * 2) – #main p > h3::first-letter rs.asp rs.asp – 50+ selectors/operaties

#main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

#main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

#main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

#main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

#main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

#main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

#main.abc > h3::first-letter Eerste letter van h3 dat kind is van element met class “abc” dat ergens in element met id “main” staat body div id=“main” div a class=“abc” h3 div “tekst” p class=“abc” h3 “tekst” div class=“abc” h3 “tekst” h3 “tekst”

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar ol { } Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty { }

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, { }

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul { }

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { }

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { visibility: }

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { visibility: hidden; }

Voorbeeld Maak lege ordered en lege unordered lists onzichtbaar Welke elementen? – lege ordered en lege unordered lists Wat veranderen? – Zichtbaarheid Waar naartoe? – Onzichtbaar ol:empty, ul:empty { visibility: hidden; }

Opdracht Lever in bestand opdracht-2.css in moodle (Exacte Vakken > Informatica > V4_in1) met daarin CSS code voor het volgende: De achtergrondkleur van oneven rijen in tabellen met class “striped” is lichtblauw, de achtergrondkleur van even rijen in tabellen met class “striped” is wit