Lab - CSS

1. Copy the home page of the Shakespeare pages, plus its CSS, to your web space.

   cd /users/tutors/mhumphrysdculab/share/shakespeare
   cp home.html $HOME/public_html/shakespeare.html
   cp house.css $HOME/public_html/house.css
   

2. Remove all CSS code that styles links ("a" elements). Big job!

   
   

3. Copy my styling for "main-navigation" links.
4. Change one link to class "main-navigation" to see its style change.
5. Two paths:
   1. Find and replace in the HTML to make all links of class "main-navigation".

      or:

   2. Change CSS so that all links have this style, not just links of class "main-navigation".

   
   

6. Put a div around each section of the page like "The Comedies", "The Romances", etc.
7. This will look like:

   <div class='mydiv'>
   a lot of html
   </div>
   

8. Define the style of class "mydiv" so that these divs have a special background color and font.
9. Change the style so that hover on one of these divs changes its background color.

---

CSS attack: Inject CSS into other person's page

This is a chat program at Ancient Brain.
Click to run. You need other people to run it to see.

It deliberately has no protection against HTML or CSS injection.
That means you can type HTML or CSS in the chat and it appears in the other user's page.
You can inject chunks of HTML into their page.
You can also change the CSS, including changing their background colour, or changing their entire page to hidden.
Try it!

(You can also inject JS into their page!)

Click to run World: Websocket chat at Ancient Brain.

ancientbrain.com      w2mind.org      humphrysfamilytree.com

On the Internet since 1987.      New 250 G VPS server.

Note: Links on this site to user-generated content like Wikipedia are highlighted in red as possibly unreliable. My view is that such links are highly useful but flawed.