Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Web Development Lesson 3 - Tablas ======
===== Selectors =====
==== Objective ====
In this activity, we'll look at selectors, which allow you more control over what CSS rules are applied to.

==== Setup ====
  * As usual, we'll build on previous work in this activity using [[https://jsfiddle.net|jsfiddle]]. Here's the code again.
**HTML**
<code><table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th>Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Ospina Ramírez</td>
      <td>Colombia</td>
      <td>33</td>
      <td>Portero</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>Eccehomo Cuesta Figueroa</td>
      <td>Colombia</td>
      <td>22</td>
      <td>Defensa</td>
    </tr>
    <tr>
      <td>Juan Guillermo</td>
      <td>Cuadrado Bello</td>
      <td>Colombia</td>
      <td>33</td>
      <td>Centrocampista</td>
    </tr>
    <tr>
      <td>Radamel Falcao</td>
      <td>García Zárate</td>
      <td>Colombia</td>
      <td>35</td>
      <td>Delantero</td>
    </tr>
  </tbody>
</table></code>

**CSS**
<code>td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

table {
  border-collapse: collapse;
}</code>

==== ID ====
  * You may have noticed that using styles in HTML lets you change a single element, while using CSS lets you change all associated elements, but what if you want to change just certain elements?
  * To do this we use selectors, which identify the specific elements you want to treat differently.
  * The first of these is <html><id></html> which identifies one single element in the page. It must be unique.
  * Let's highlight the data for Carlos in yellow.
  * First, we need to specify the row, but giving it an <html>id</html>. Let's call it 'carlos'.
<code>    <tr id="carlos">
      <td>Carlos</td></code>
  * Now we can apply a rule to this row with CSS using <html>#</html>.
<code>#carlos {
  font-style: italic;
}</code>
  * Now the <html><tr></html> and all elements inside it are italicised.

==== Class ====
  * Say we want to highlight the age of every player, We can't use <html>id</html> because that must be unique.
  * Instead, we apply a <html>class</html> to every element we want to change. Let's call it 'age'.
<code><table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th class="age">Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Ospina Ramírez</td>
      <td>Colombia</td>
      <td class="age">33</td>
      <td>Portero</td>
    </tr>
    <tr id="carlos">
      <td>Carlos</td>
      <td>Eccehomo Cuesta Figueroa</td>
      <td>Colombia</td>
      <td class="age">22</td>
      <td>Defensa</td>
    </tr>
    <tr>
      <td>Juan Guillermo</td>
      <td>Cuadrado Bello</td>
      <td>Colombia</td>
      <td class="age">33</td>
      <td>Centrocampista</td>
    </tr>
    <tr>
      <td>Radamel Falcao</td>
      <td>García Zárate</td>
      <td>Colombia</td>
      <td class="age">35</td>
      <td>Delantero</td>
    </tr>
  </tbody>
</table></code>
  * In this example, I've included the header cell because it would look strange without it.
  * Now, let's give this a yellow background to make it stand out a bit.
<code>.age {
  background-color: yellow;
}</code>
  * Notice the new style <html>background-color</html> which sets the background color. This can be applied to any element, including <html><body></html> which will change the page's background.

==== Combining Selectors ====
  * Say we want to give the intersecting cell even more impact. We can do so by combining the row and column selectors.
<code>#carlos .age {
  font-weight: 900;
}
  * We can also limit in other ways, One is to use a combination of elements and classes.
  * The following code will only change the non-heading (data) cells with the age class.
<code>td.age {
  font-size: 150%;
}</code>
  * When you run this, you should see the numbers in the age column grow bigger by 50%, but the heading will remain the same because it's not a <html>td</html>.
  * Notice the difference between the last two examples. The first <html>#carlos .age</html> with a space between the options says to select the elements with class age inside the element with id carlos. The second <html>td.age</html> has no space, which says to select elements that are both data cells and class age.
  * There are many other ways of specifying and combining selectors, but these are the main ones you'll use often. For more, follow the link on the Summary page.

[[web_design:horario:arrays|Javascript Arrays and Loops]]
Tech School

User Tools

Site Tools

Page Tools
