Coding without being complex: understand HTML and CSS in 15 minutes

We love WordPress and code as little as possible ourselves, but sometimes it comes in handy. Or at least: it is handy to know what it is and what you can use it for. That way, you can see much quicker whether something is easy to set up via the theme or whether you need to create custom codes.

That's why today we're giving you a crash course in HTML and CSS as a programming language, without it being super complex or nerdy. Just the basics so you know how it works more or less. And a big shout-out to our awesome VA Mirjam, who provided all the input for this! All right, let's dive right in.

HTML: for building web pages

HTML staat voor Hypertext Markup Language. Het is een programmeertaal voor het ontwerpen van websites. Wat belangrijker is om te weten is de functie. HTML wordt in eerste instantie gebruikt voor het bouwen van webpagina’s, daarnaast ook voor de algemene layout. Het is in principe de basis voor de grafische opmaak. Het zorgt voor alle inhoud die je te zien krijgt, zoals teksten, links, afbeeldingen, etc. HTML code begint altijd met een <element > en eindigt ook weer met een </element> Waarbij het “element” kan verschillen, zoals bijvoorbeeld body, h1, h2, h3, p, li, ol, ul.

Why knowing what HTML is and how it works is useful

"Yes, that's nice, but I don't need to know that," you may think. Indeed, there are many ready-made web builders with which you can build beautiful websites. Think of WordPress which we use, or maybe Webflow or Wix. But still, it is useful to know what HTML is. Why? In case you want to make changes to your website that are not possible using the web builder, but also for something simple like the structure of your texts (headings or paragraphs, h1/h2 or p respectively).

Example of HTML code

We are not going to explain everything step by step. It would be too complex. There are, however, a number of things that stand out and points of attention that we would like to explain.

  • Je ziet dat het op bepaalde stukjes inspringt, bijvoorbeeld bij <ol> en dan <li> en <ol> vanaf rij 20. Dit betekent dat het ‘eronder valt’. In dit geval zijn het onderdelen van een lijstje met bullet points, met daaronder nog sub-bullet points. Eigenlijk kan je het visueel zien als elementjes in elementjes. In dit geval is het dus een lijst in een lijst, maar het kan ook een titel op een foto zijn of een afbeelding in een overlappend vlak waar bijvoorbeeld ook stukjes tekst staan
  • Het document begint eigenlijk altijd met wat standaard stukjes zoals <html lang=”en”> en dan <head> en <body> en meestal nog <footer> helemaal op het einde. <head> is het onzichtbare stukje waar je bijvoorbeeld je Google Analytics code of Facebook Pixel plakt; <body> is het content stukje; en <footer> is de footer waar je bijvoorbeeld je social media iconen en juridische voorwaarden hebt staan.
  • Elke code die je begint, moet je ook afsluiten – en dan ook in de juiste volgorde. Zo zie je bijvoorbeeld dat er op rij 10 een kop begint (namelijk <h1>) en dat daarbinnen een link valt (<a href=”…..>). Maar de link wordt eerst weer afgesloten, voordat de kop wordt afgesloten. Dat heeft weer te maken met wat we net zeiden over elementjes in elementjes.
  • <p> staat voor paragraaf. Dit is veruit het meeste gebruikt voor tekst. Soms wordt er ook <span> gebruikt maar <p> is gebruikelijker.

HTML fun facts

  • It is important to know that the code must be exactly right. One typo and your whole design can be messed up. Even missing a ; can cause a lot of frustration. But also solved quite easily.
  • You can always view the code of a website with your browser. That way you can see the HTML code (and the CSS). Super interesting to see how people have built their websites!
  • If a website has been built with WordPress, you can also see the theme that has been used in the Sources section. This can be found at wp-content > wp-themes. Super handy!
  • Often you can also see in the HTML which plug-ins have been used, because you can tell that from the classes. Think of the name of a slider or a photo plug-in.
  • You can also add 'notes' in HTML. These will not be shown on the website, but will be in the code. This can be useful if you want an element in your code but don't want it to be shown yet, like a new team member or an announcement that is 'scrolled'. Among developers, it is used to communicate with each other without affecting the user, for example to tell when a certain section starts or that a piece of code may not be changed.

CSS: for the design of the web pages

CSS, an abbreviation for Cascading Style Sheet (you can forget about that) is also a programming language, but meant for the layout of HTML. Where with HTML you design as it were a naked site, with CSS you make sure that everything looks nice. With one CSS file you can define the entire design of your website (style sheet). But by using Classes and IDs, you can design specific elements differently on certain pages. It is important to know that an ID is unique and a Class can be used for several elements.

Why should you pay attention to CSS?

Putting the code for the design of a website into a CSS style sheet makes the HTML code of the site more readable and understandable - not only for the user, but also for search engines. Search engines also appreciate clear codes and this leads to better results in search engines (part of SEO).

Structure of a CSS file

  • HTML elements such as body, h1, h2, a etc. can be typed just like that.
  • CSS Classes always start with a . (a point) You can use these classes several times.
  • CSS IDs always start with a # but you cannot use them more than once.

Example:

What exactly does it say here?

  • Header 1 is 25 pixels, black, super bold and underlined (has a dash under the text)
  • H2 is 40 pixels large, pink and centred
  • A banner with the class name "banner" has a padding of 25 pixels and is centred

What other points of interest are there?

  • With CSS you try to avoid repetition. For example, are all headings pink? Then you fill that in once for h1, h2, h3 etc. and you don't create all separate texts for that. Less is more! It is also easier to make changes this way
  • The possibilities are really endless. In the screenshot above, for example, you can see that headings are yellow, but you can also enter a HEX code or even a colour code with transparency (for example, for a plane that is then half translucent white).
  • Je moet alle stukjes ook echt afsluiten, dus alle ; en { en } zijn echt noodzakelijk! Anders klopt je hele code niet meer
  • You can also add comments again with /* and */.
  • You don't make up the variables yourself, there are rules for that. So you can't just type "text-align: centred" because it has been decided that if you want the text to be centred it should be "centred". Fortunately, coding apps have ways of giving these suggestions, so you don't have to learn everything by heart

Voila, that was it, the HTML & CSS crash course. Want to learn more? There is a lot to find online about HTML and CSS and a bit of Googling will get you there. But here are some useful links:

Please let us know if this has helped you!

Ninarosa
Ninarosa
Founder, marketer, copywriter // With specialisations in copywriting, entrepreneurship, design, front-end development, marketing and branding, Ninarosa knows how to lay the right foundation for companies and websites.

Share this

Leave a comment

rinske and ninarosa

Pleasant!

Are you a do-gooder and do you need copywriting, design, marketing and/or a website? Then you've come to the right place. We focus on for example sustainable companies, coaches or companies in the field of education.

Categories