2.1.1 Kramdown complex styling of elements

Warning a bit more advanced

Markdown is great, but cannot do everything that we might want to do with styling the website. As a rule, we do not use inline styles anywhere in the code. We use classes and id for CSS to render the design of the page.

When you create a table for instance, we want it to have a nice appearance, so it has a class applied. So let's say you have this code:

Coffin piece	Coffin colour
Footboard	Black
Mortise	Red

And I want to add classes to it to make it look nice. Kramdown selector addition is done inside angle brackets, directly after the element you have added. This looks like:

{: .class }

Or

{: #id }

or you can combine multiples:

{: .table .table-fluid #boom }

So for instance:

|Coffin piece  | Coffin colour|
|------------- | -------------|
|Footboard     | Black        |
|Mortise       | Red          |
{:.table .table-fluid }

Which creates the table and the correct markdown. So for instance on the live site it generates the code such as:

Venue	Date	Number of attendees
Egypt Exploration Society, British Council	11/10/2018	40
Mansoura University	15/10/2018 (2 lectures - all day event)	170
Helwan University	16/10/2018	70
Egyptian Museum Cairo	17/10/2018	30

Which as you can see is nicely formatted. The element's opening attribute starts with:

<table class="table-fluid table">