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>

Conflicts

Conflicts

Resolving conflicts: importance and origin

Resolving conflicts: importance

Resolving conflicts: origin

Resolving conflicts: specificity

Resolving conflicts: specificity

Class exercise: Which is the more specific in each of these pairs of rules

i {
    color: blue;
}

.cocktail 
{
    color: green;
}
nav li {
    color: yellow;
}

li {
    color: gray;
}
#instructions b {
    color: teal;
}

ol li b {
    color: purple;
}

Resolving conflicts: ordering

Resolving conflicts: the cascade

Class exercise

In the Instructions section of the Mojitos web page, what colour will the word "crush" be and what colour will the rest of that list item be?

<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>
#instructions {
    color: green;
}

li > b {
    color: red;
}

section b {
    color: blue;
}

section {
    color: yellow;
}

Conflicts are not irrelevant, just because they're difficult!