<!DOCTYPE html>

<html>

<head>

<title>How to build a website</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div id=”navigation”>

<div id=”navigation-inside”>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”html.html” class=”active”>HTML</a></li>

<li><a href=”css.html”>CSS</a></li>

<li><a href=”javascript.html”>JavaScript</a></li>

</ul>

</div>

</div>

<div id=”header”>

<img src=”img/header-image.jpg” alt=“Header Image”>

<div id=”profile”>

<div id=”profile-image”>

<img src=”img/profile-icon.png” alt=”Profile icon”>

</div>

byKenny Wood

</div>

</div>

<div id=”introduction”>

<h1>HTML</h1>

<p>Welcome to the dedicated HTML section. This page contains all of the HTML elements that I have understood and used so far on my journey into web design.</p>

</div>

<div id=”tables” class=”section”>

<h1>Tables</h1>

<p>Tables help us to structure data and display it in an easy to digest format.</p>

<div class=”example”>

<table>

<tr>

<th>First Column</th>

<th>Second Column</th>

<th>Third Column</th>

</tr>

<tr>

<td>Row 1 – Cell 1</td>

<td>Row 1 – Cell 2</td>

<td>Row 1 – Cell 3</td>

</tr>

<tr>

<td>Row 2 – Cell 1</td>

<td>Row 2 – Cell 2</td>

<td>Row 2 – Cell 3</td>

</tr>

</table>

</div>

<input class=”code-show-button” type=”button” value=“Show code” />

</div>

</body>

</html>

CSS

The goal here is to create a class with the same style as the introduction block, which will be reused on every section we create on our webpages. We will then add a style to highlight the example, before applying a general style to our button to bring it more in line with our webpage style.

The steps:

Write rules to achieve the following desired output per element:

  • .section
    1. –  copy and paste the style from the #introduction rule
  • .example
    1. –  give this a padding of 10px
    2. –  set the background colour to ‘#fcfcfc’
    3. –  round the corners off with a radius of 10px to match our containing div
  • table
    1. –  set the width to 100%
    2. –  collapse the borders
    3. –  centre all text
  • table, th, td
    1. –  set the border to a solid 1px width with the colour #ccc
  • . code-show-button
    1. –  change the inline element into a block
    2. –  give the top a margin of 20px, left and right automatic margins
    3. –  apply 10px padding to the top and bottom and 20px to the left and right
    4. –  give the element rounded corners with a radius of 3px
    5. –  remove the border that Chrome naturally gives buttons
    6. –  apply a background colour of ‘#1998E2’
    7. –  make the text white
    8. –  set the font size to 14px
  • .code-show-button:hover
    1. –  change the background to ‘#198acc’
    2. –  make the cursor show the ‘pointer’ finger

Expected result: now doesn’t that look better? What you should have now seen is a centred table, sitting inside an example pane of a slightly darker background, followed by a styled button, which says ‘show code’.

Expected code: