CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

Running example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Party Party Party - Cocktails - Mojitos</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        
        <header>
            <h1>Party-Party-Party</h1>
            <p>The site for all your party needs</p>
        </header>
        
        <nav>
            <ul>
                <li>Cocktails
                    <ul>
                        <li><a href="cubalibre.html" lang="es">Cuba Libre</a></li>
                        <li><a href="" lang="es">Mojitos</a></li>
                        <li><a href="screwdriver.html">Screwdriver</a></li>
                        <li><a href="zombie.html">Zombie</a></li>
                    </ul>
                </li>
                <li>Finger Food
                    <ul>
                        <li><a href="guacamole.html" lang="es">Guacamole</a></li>
                        <li><a href="pizzafritata.html" lang="it">Pizza Fritata</a></li>
                        <li><a href="samosas.html" lang="pa">Samosas</a></li>
                    </ul>
                </li>
                <li>Party Games
                    <ul>
                        <li><a href="spinthebottle.html">Spin-the-Bottle</a></li>
                        <li><a href="twister.html">Twister</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <main>
        
            <h1>Mojitos</h1>
        
            <p>
                 To bring the spirit of the Caribbean to your party, why not serve 
                 <i class="cocktail" lang="es">Mojitos</i>? Sweet but cool, they're 
                 sure to get you in touch with your Latin side. 
            </p>

            <figure>
                <img src="mojito.jpg" title="A mojito"
                     alt="A mojito is packed with mint leaves and served in a long glass." />
                <figcaption>
                    <a href="https://www.flickr.com/photos/preppybyday/5084101811/">Mojito</a>
                    <span class="attribution">
                        by <a href="https://www.flickr.com/photos/preppybyday/">The Culinary Geek</a>
                        (licenced under <a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)
                    </span>
                </figcaption>
            </figure>

            <section id="ingredients">
        
                <h1>Ingredients</h1>
            
                <ul>
                    <li>2 oz. <em>white</em> rum</li>
                    <li>8 <em>fresh</em> mint leaves</li>
                    <li>4 tsp. sugar</li>
                    <li>ice</li>
                    <li>&frac12; lime</li>
                    <li>7 oz. club soda</li>
                </ul>
            
            </section>

            <section id="instructions">
        
                <h1>Instructions</h1>
            
                <p>
                    For the best <i class="cocktail" lang="es">Mojitos</i> this side 
                    of Waterford,
                </p>
                <ol>
                    <li>Gently <b>crush</b> the mint leaves in a cool tall glass;</li>
                    <li><b>squeeze</b> the lime over the leaves;</li>
                    <li><b>sprinkle</b> the sugar into the mix;</li>
                    <li><b>fill</b> with ice;</li>
                    <li><b>toss in</b> the rum;</li>
                    <li><b>trickle in</b> in the club soda; and finally</li>
                    <li><b>stir</b> lightly.</li>
                </ol>
            
            </section>
        
            <p id="warning">
                <strong>Enjoy alcohol sensibly.</strong>
            </p>
                    
        </main>

        <aside>
        
            <h1>Did you know&hellip;?</h1>

            <p>
                <i class="cocktail" lang="es">Mojito</i> is pronounced 
                <i>Moh-HEE-toh</i>.
            </p>

            <p>
                <i class="cocktail" lang="es">Mojitos</i> should be served in a 
                Collins glass.
            </p>

            <p>
                <i class="cocktail" lang="es">Mojitos</i> were a favourite with author
                <a href="http://en.wikipedia.org/wiki/Ernest_Hemingway">Ernest Hemingway</a>. 
                It is said that he enjoyed them at their birthplace, 
                <i lang="es">La Bodeguita del Medio</i> in Havana, Cuba.
            </p>
            
        </aside>
        
        <footer>
            <p>
                <small>
                    &copy; Derek Bridge. All rights reserved.
                </small>
            </p>
        </footer>

    </body>
</html>

CSS selectors

CSS: selectors that find elements

*Matches all elements
EMatches all elements with tag name E
#IMatches the element with id of I
.CMatches all elements with class of C
E > FMatches all F elements that are children of E elements
E FMatches all F elements that are descendants of E elements
E + FMatches all F elements that are immediately preceded by sibling
E ~ FMatches all F elements preceded by sibling E

The universal selector

Type selectors

The id attribute

Id selectors

Advanced id selectors

The class attribute in HTML

Class selectors

Advanced class selectors

The hierarchical structure of HTML documents

<!DOCTYPE html>
<html>
    <head>
        <title>A simple document</title>
    </head>
    <body>
        <p>
            Some words.
        </p>
        <p>
            More words 
            <em>and emphasised words</em>
            and final words.
        </p>
    </body>
</html>
The HTML node has head and body nodes as its children. The head node has a title node as its child. The title node has a text node as its child. The body node here has two p nodes as children. The first p node has a text node as its child. The second p has three children: a text node, an em node and another text node. The em node has a text node as its child.

Child and descendant selectors

Class exercise

Observation

Sibling selectors

Class exercise: what do these select?

<ul>
    <li id="pastry">For the pastry:
        <ul>
            <li class="ingredient">flour</li>
            <li class="ingredient">butter</li>    
        </ul>
    </li>
    <li id="filling">For the filling:
        <ul>
            <li class="ingredient">stewing beef</li>
            <li class="ingredient">an onion</li>
            <li class="ingredient">Guiness</li>
        </ul>
    </li>
</ul>
  1. li
  2. .ingredient
  3. #filling li
  4. li li
  5. .ingredient + .ingredient

Class exercise: what do these select?

  1. li
  2. .ingredient
  3. #filling li
  4. li li
  5. .ingredient + .ingredient

Class exercise: what do these select?

  1. li
  2. .ingredient
  3. #filling li
  4. li li
  5. .ingredient + .ingredient

Class exercise: what do these select?

  1. li
  2. .ingredient
  3. #filling li
  4. li li
  5. .ingredient + .ingredient

Class exercise: what do these select?

  1. li
  2. .ingredient
  3. #filling li
  4. li li
  5. .ingredient + .ingredient

Class exercise: what do these select?

  1. li
  2. .ingredient
  3. #filling li
  4. li li
  5. .ingredient + .ingredient

CSS: selectors that filter

Class exercise: what do these select?

<ul>
    <li id="pastry">For the pastry:
        <ul>
            <li class="ingredient">flour</li>
            <li class="ingredient">butter</li>    
        </ul>
    </li>
    <li id="filling">For the filling:
        <ul>
            <li class="ingredient">stewing beef</li>
            <li class="ingredient">an onion</li>
            <li class="ingredient">Guiness</li>
        </ul>
    </li>
</ul>
  1. .ingredient:first-child
  2. .ingredient:first-child + .ingredient

Class exercise: what do these select?

  1. .ingredient:first-child
  2. .ingredient:first-child + .ingredient

Class exercise: what do these select?

  1. .ingredient:first-child
  2. .ingredient:first-child + .ingredient