Categorie: CSS (page 1 of 11)

WordPress theme aanpassen met CSS

Wanneer je een eigen website hebt met WordPress en je wilt wat aanpassingen gaan doen aan het uiterlijk van de website dan is enige kennis van CSS wel handig. Je kunt namelijk op een redelijk eenvoudige manier aanpassingen doen in het CSS bestand wat het uiterlijk van je WordPress Theme regelt.

Overigens noemen we een theme ook wel een template. Beide termen gaan over hetzelfde. Het theme bepaalt hoe WordPress er uit ziet. In dit artikel heb ik het dus over het WordPress theme.

Lees verder »

Hoe maak ik een website met HTML en CSS?

Een eenvoudige website in HTML en CSS, hoe maak ik dat? Een vraag die je met een site als deze regelmatig langs ziet komen. In dit artikel laat ik je zien hoe je dat doet.

Hiervoor maak ik gebruik van HTML5 en CSS3. Maar let wel, ik heb het hier enkel over de basis. Niet over ingewikkelde mogelijkheden die er zijn, niet over allerlei toevoegingen zoals webwinkels of content management systemen.

Lees verder »

CSS Pseudo selectors :before, :after, :focus en :first-child

In de serie over CSS selectors ga ik het vandaag hebben over enkele bijzondere selectors. Ten eerste twee selectors om extra tekst te genereren, :before en :after. Daarnaast de pseudo selector :first-child en :focus.

:before

Het pseudo element kan iets wat met geen andere selector kan, namelijk het vooraf laten komen van content bij een element.

Lees verder »

Hoe maak je een flexibele layout met meerdere kolommen in HTML en CSS

Een website bestaat vaak uit meerdere kolommen. In deze tutorial wil ik je laten zien hoe je een webpagina maakt die bestaat uit 4 kolommen. Deze kolommen hebben een flexibele breedte, afhankelijk van de breedte van het beeldscherm. Let op, ik heb de webpagina niet responsive gemaakt.

Foto portfolio of kranten ‘look’

De 4 kolommen website zie je vaak terug bij websites die het uiterlijk van een krant weergeven of bij een website waar je een foto portfolio in wilt maken. Dat laatste gaan we dan ook oppakken.

Lees verder »

CSS selectors, de familie

In het eerste artikel over CSS selectors heb ik je vertelt dat CSS is opgebouwd uit verschillende onderdelen. In dit tweede artikel wil ik het hebben over de familieboom die je kunt gebruiken om de verschillende namen te kunnen plaatsen.

We gebruiken hiervoor een simpele html opzet.

uitleg-css-familie

Ancestor

Ancestor – (stamvader): Een HTML tag die geplaatst is rondom een andere tag is de stamvader van die tag. In bovenstaand voorbeeld is de tag <html>, de stamvader van alle andere genoemde tags. De tag <body> is de stamvader van <h1>, <p> en <em>.

Lees verder »