This week's standard lab includes the creation of a basic HTML webpage and a basic CSS external style sheet which demonstrate CSS padding, borders, and margins, using a navigation system as a focus. You'll show your knowledge of how to use these three components of CSS layout. Below are an example and instructions for the standard version of Lab 08.

Validate Alternative Accessible Mobilize

Wayfarers artisan meh Pinterest. Vice food truck Shoreditch, blog ennui mustache selfies master cleanse gluten-free direct trade. Actually chillwave direct trade tilde mumblecore aesthetic. Bushwick Banksy yr twee blog aesthetic lo-fi irony chillwave, Echo Park sustainable. Farm-to-table meh before they sold out, seitan direct trade umami fap actually American Apparel organic kogi irony. Irony scenester fap, mixtape church-key semiotics cliche retro small batch pour-over gastropub. Truffaut salvia gluten-free, freegan fashion axe seitan letterpress fap.

Standard Lab

Checklist
  • Padding
  • Border
  • Margins
  • CSS & HTML Valid (2 marks)
  • Polish applied to basic lab (2 marks)
  • ADV Rollover Styles (3 marks)

Part 1 - Create the HTML

  1. Create a new lab08.html page. Put it in your labs folder and connect it to the CSS file you create in the next section. (Don't forget to put a link from your index.html page to your lab08.html page!)
  2. Add a div element with four a elements inside it; it doesn't matter where the links go.
  3. Put a little filler content underneath the navigation to help make sense of the layout

Part 2 - Create Your CSS Sheet and Add Required Properties

  1. Create a new CSS page named lab08.css, place it in your CSS folder
  2. Use a combination of CSS padding, border, and margin properties (find the full list here) to give a unique style to your menu system
  3. You may wish to use the following CSS for your a elements; remember that padding and margins display differently on inline elements, and a elements are inline by default:
    a { display: inline-block; }
  4. Add backgrounds and other styling when necessary to draw attention to your use of borders and padding
  5. Once everything is working on your local copy of the website, upload the two files to your site
  6. Don't forget to validate your HTML and CSS files - I'll be checking both.

Advanced Lab

Use the CSS :hover pseudo-class on the anchor elements to create rollover effects for the navigation system, similar to the example above. Be careful that your styling doesn't make any of the elements move on the page.