User Tools

Site Tools


web_design:horario:css

This is an old revision of the document!


Web Development Lesson 3 - Horario

Cascading Style Sheets (CSS)

Setup

  • 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>.

CSS

  • 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.

Indent

  • 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;
}
web_design/horario/css.1633919960.txt.gz · Last modified: 2023/08/16 09:33 (external edit)