• We'll continue using the the work you've done in jsfiddle until now.
• Since you've probably lost the work while doing the exercise, here it is again.

<h1>Job Application</h1>
<p>Medellin, Date</p>
<p>Name</p>
<p>Estimados Senor,</p>
<p style="text-indent:50px; color:blue;">Soy estudiante del penúltimo año de Hotelería en la <strong>Universidad Nacional de <em>Hospitalidad</em></strong>, y quiero mostrarles mi interés en formar parte de su compañía a través de un contrato de prácticas.</p>
<p>Como saben, la escuela pide 400 horas de práctica profesional en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p>
<p style="text-indent:50px;">Podrán ver que una de mis mayores fortalezas está en el área de alimentos y bebidas, ya que he participado en diferentes entrenamientos y estudios paralelos, que me han llevado a innovar nuevas formas de ofrecer el servicio y experiencia del cliente, y estoy segura que el Hotel CortezTM sabrá sacar el máximo provecho, cuando vea el aumento de experiencias positivas que sus clientes experimentarán.</p>
<p>Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.</p>
<p>Atentamente,</p>
<p>Murray</p>

• To start with, remove all the styles inside tags, so for example, <p style="text-indent:50px"> becomes simply <p>.

• Each of the design elements we've used are called 'styles'.
• They can be separated from HTML by using CSS.
• In jsfiddle, you can put the style rules in the section at the top right.
• Let's make paragraph text blue.

p {
  color: blue;
}

• The tag before the brackets ({}) shows the target - what the rules will be applied to.
• The rules inside the brackets are applied to all elements that match the target element. In this case, all paragraphs. The heading remains unchanged.
• This makes CSS very useful for creating a consistent look throughout your website.
• Simply associate the same CSS rules with every page and they'll look the same.
• 'Cascading' refers to the way the rules are applied to child elements as well, unless it's overridden by rules for a more specific target. We'll talk about what 'specific' means later.

• Let's try some other rules that you are familiar with.
• Below color: blue;, add text-indent: 50px; so your CSS looks like this.

p {
  color: blue;
  text-indent: 50px;
}

• There are four types of text alignment. You've used right, and the default is left. You can also use center, but today, let's try justify. This aligns both the left and the right ends of the text as you see in books.

text-align: justify;

• Did you add this line inside the brackets on its own line? Did it work as expected? If it didn't, try to work out what you did wrong (eg spelling, missing ;) or ask for help.

• Now make the span italic using the following code.

span {
  font-style: italic;
}

• If you had more than one <span> tag, they would all be italicised.
• Try adding another <span> tag somewhere in the text. Did it automatically become italicised? That's handy, isn't it?

• Let's modify the heading.
• We can change the font family by adding the same code as the attribute.

h1 {
  font-family: Arial, sans-serif;
}

• Let's make the heading really big.

font-size: 3em;

• Any attribute that works in HTML can be used in CSS. Let's complete the heading using the same attributes as before.

h1 {
  font-family: Arial, sans-serif;
  font-size: 3em;
  text-decoration: underline;
  font-variant: small-caps;
  line-height: 3em;
  text-shadow:2px 2px #ff0000;
}

• Notice that by placing each style definition on a separate line and indenting them makes it very clear which element is targeted and what styles they will use. If you haven't been indenting your code, please try from now on.

Next: Tables