HTML

Wat leren we:

- Wat is HTML? Wat is CSS? - HTML schrijven in Brackets - Informatie om zelf aan de slag te gaan

HTML

            test.html
            
              
            
          

HTML

HTML

CSS

CSS

CSS - elementen

Een CSS selector met de naam van een element, veranderd alle elementen van dat type.

CSS - class

Brackets

Inspector

rechtermuis knop + inspect inspector

Inspector

## aan het werk - verander de achtergrondkleur - voeg verschillende afbeeldingen to (GIF kan ook!) - kies een ander lettertype - style je headers - zet er een geheime boodschap in je code (comment) - bonus: verander de layout met de divs - probeer iets anders? je kunt altijd een stap terug als het breekt :) Deze slides:

https://tinyurl.com/leo-kanner-html

### Achtergrond - [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) - De property background-color stelt de achtergrondkleur van een element in. - [background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) - De property background-image stelt een of meer achtergrondafbeeldingen in op een element.

### Randen - [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border) - De `border` property veranderd alle randen van een element. - [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) - De property `border-radius` rondt de hoeken van de buitenste rand van een element af. - [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) - De property `box-shadow` voegt schaduweffecten toe rond het frame van een element.

### Color - [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) - De property `color` stelt de voorgrondkleurwaarde in van de tekst en tekstversieringen van een element. - [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) - De property `opacity` stelt de dekking van een element in. Dekking is de mate waarin inhoud achter een element verborgen is en is het tegenovergestelde van transparantie.

### Kleuren Een kleurwaarde kan op meerdere manieren worden gedefinieerd: - Door [name/keyword](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#keywords) - `color: red;` maakt je tekst rood. - Door [hex waarde](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#hex) - `kleur: #ff0000;` ook rood. - Of als een [functie](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#rgba), die transparantie mogelijk maakt. <br/> `kleur: rgba(255,0,0,0.5);` rood, maar 50% transparant.

color: red;

color: #ff0000;

color: rgba(255,0,0,0.5);

### Box model - [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) - De property margin stelt het margegebied aan alle vier de zijden van een element in. Marge verwijst naar ruimte tussen verschillende elementen. - [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) - De property padding stelt het opvulgebied aan alle vier de zijden van een element tegelijk in. Opvulling verwijst naar de afstand binnen de rand van een element. - [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - De property position stelt in hoe een element in een document wordt gepositioneerd. De properties `top`, `right`, `bottom` en `left` bepalen de uiteindelijke locatie van gepositioneerde elementen.

### Fonts - [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) - De property font-family specificeert de lettertypefamilies en/of generieke familienamen voor het geselecteerde element. Je kan een van de volgende generieke lettertypen kiezen. Welk lettertype precies wordt gebruikt, is afhankelijk van de instellingen van je computer. ```css font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; ``` <span style="font-family: sans-serif !important">sans-serif</span> / <span style="font-family: serif !important">serif</span> / <span style="font-family: monospace !important">monospace</span> / <span style="font-family: cursive !important">cursive</span> / <span style="font-family: fantasy !important">fantasy</span>

### Fonts. Het is ook mogelijk om een exacte lettertypenaam op te geven, maar deze wordt alleen gebruikt als deze daadwerkelijk beschikbaar is op je computer. De volgende rule zal bijvoorbeeld proberen Helvetica te gebruiken, indien beschikbaar, maar zal terugvallen op een generiek schreefloos lettertype als dat niet het geval is. (Let op de aanhalingstekens rond de naam van het lettertype). ```css font-family: "Helvetica Neue", sans-serif; ```

### Fonts - [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) - De property font-size stelt de grootte van het lettertype in. - [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) - De property font-style stelt in of een lettertype moet worden opgemaakt met een normaal, cursief of schuin gezicht uit de lettertypefamilie. - [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) - De property font-weight stelt het gewicht (of vetheid) van het lettertype in. De beschikbare gewichten zijn afhankelijk van de lettertypefamilie die momenteel is ingesteld. - [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) - De property regelhoogte stelt de hoogte van een regelvak in. Het wordt vaak gebruikt om de afstand tussen tekstregels in te stellen.- [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) - De property regelhoogte stelt de hoogte van een regelvak in. Het wordt vaak gebruikt om de afstand tussen tekstregels in te stellen.

### Text - [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) - De property letter-spacing stelt het gedrag van de horizontale spatiëring tussen teksttekens in. - [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) - De property text-align stelt de horizontale uitlijning van de inhoud binnen een blokelement in. - [text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) - De property text-transform specificeert hoe de tekst van een element in hoofdletters moet worden geschreven. - [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) - De property voor woordafbreking stelt in of regeleinden verschijnen waar de tekst anders het inhoudsvak zou overlopen. - [word-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing) - TDe property woordafstand stelt de lengte van de ruimte tussen woorden en tussen tags in. - [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) - De property text-shadow voegt schaduwen toe aan tekst.

### Transforms - [rotate](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate) - Met de property roteren kunt u de rotatie van elementen specificeren - [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/scale) - Met de property scale kunt u de schaal (grootte) van elementen specificeren

# Eenheden ```css border: 3px solid green; ``` - `px` - Pixels. Voor lettertypes en afbeeldingen - `%` - Percentage van het "parent" element. Voor breedte en hoogte. - `vw` and `vh` - Viewport eenheid: 1vw = 1% van de viewport breedte.