Table of contents

HTML and CSS: the basics

Your website is made with HTML and CSS. Usually you don't notice: the editor makes the HTML for you. Still, it helps to know the basics, for example when you look at the code of a text with Source....

HTML: the structure of a text

HTML says what each piece of text is: a heading, a paragraph, a list, a link. You do this with tags between < and >. Usually there is a start tag and an end tag with a /:

<b>This text is bold</b>

A tag can have extra information, an attribute. For a link, the href attribute holds the address:

<a href="/contact">Contact us</a>

Common tags

You see HTML In the editor
Heading <h2>Heading</h2> drop-down list: Heading 2
Paragraph <p>Text</p> Enter
bold, italic <strong>bold</strong>, <em>italic</em> B, I
Link <a href="/contact">Contact</a> chain (Link)
Email link <a href="mailto:info@example.com">info@example.com</a> chain, address with mailto: in front
Image <img src="/files/logo.png" alt="Logo"> Image
Bulleted list <ul><li>item</li></ul> Bullet list
Numbered list <ol><li>item</li></ol> Numbered list
Line <hr> Horizontal rule

You just type characters such as €, é or ö in the editor. In HTML you can also write them as a code, such as &euro; or &eacute;.

Viewing the source code

Below the editor, click Source... to see and change the HTML of the text. With Editor... you go back to the editor.

The editor does not know all HTML. Code it does not know, such as an embedded video (iframe) or a form, disappears when you open the text in the editor and save it. Does a text contain such code? Then choose Treat as HTML in the drop-down list below the text field, change the text only via Source... and don't open the editor.

Pasted text from Word with lots of unnecessary code? Below the text field, choose Convert > Clean.

CSS: the design

The stylesheet (CSS) decides how your website looks: font, colors, margins, how headings and buttons look. The stylesheet applies to all pages at once. So changing a color in the stylesheet changes every page. A rule looks like this:

h2 { color: #003366; }

The stylesheet of your website is managed by Telartis. If you want to change something in the design, contact us.

  • Don't give text in the editor its own font, size or color. Use headings; the stylesheet takes care of the rest.
  • In the source code, a piece of text can get a class, such as <p class="...">. A class is a name from the stylesheet with fixed formatting. Which classes your website has differs per website; ask us if you want to use one.

Responsive: every screen

Your website adapts to the screen: computer, tablet or phone. This is called responsive web design (RWD). On a narrow screen, columns go below each other and images get smaller. Visitors don't have to zoom in or scroll sideways.

You can help with this yourself:

  • Don't give images a fixed width. An image you insert with the editor adapts by itself.
  • Use a table only for data, not to put text side by side. That is what the Layout is for.
  • In a layout, put the most important text in the first column: on a phone it comes at the top.
  • Also look at a new page on your phone, or make your browser window narrow.

See also

  • Formatting text in the editor
  • Creating a layout with columns
  • Writing good web texts and link texts

Checked: November 2026