Assignment 1_2: Borders 2
We'll start the second assignment by opening the grid setup HTML page you created first. After you opened the file in Dreamweaver save it under a different name into the "assignment-1-2" folder (see top of the setup-page how the files and folder should be setup).
The task is similar as it was in the first assignment. But this time the border widths can be different for each side of a grid-box. This opens up new design possibilities. Still, all arrangements/compositions should progress from light to dark. Create 5 compositions (5 separate HTML documents).
Create CSS rules and apply classes to the HTML markup
As you can see below we first need to create additional rules in the CSS file. Ad these new rules to your existing CSS (don't create a new file).
In CSS borders can be defined with a "border" declaration. A "border" declaration will apply the same line-width to all for sides of an HTML element. If we want to vary the line-width, we need to define border-top, border-right, border-bottom and border-left declarations separately. If you follow the example below you can play with possibilities by applying the CSS classes to the div elements in different ways.
The div-element's height and width is consistent, the border class changes. You can apply more than one border class per element, just separate them with a blank space (for example a top and a right border applied to one and the same div element.
Example CSS code:
/* top borders: */ <br />
.border-t-01 { border-top: 1px solid #000; } <br />
.border-t-05 { border-top: 5px solid #000; } <br />
.border-t-10 { border-top: 10px solid #000; } <br />
.border-t-15 { border-top: 15px solid #000; } <br />
.border-t-20 { border-top: 20px solid #000; } <br />
<br />
/* right borders: */ <br />
.border-r-01 { border-right: 1px solid #000; } <br />
.border-r-05 { border-right: 5px solid #000; } <br />
.border-r-10 { border-right: 10px solid #000; } <br />
.border-r-15 { border-right: 15px solid #000; } <br />
.border-r-20 { border-right: 20px solid #000; } <br />
<br />
/* bottom borders: */ <br />
.border-b-01 { border-bottom: 1px solid #000; } <br />
.border-b-05 { border-bottom: 5px solid #000; } <br />
.border-b-10 { border-bottom: 10px solid #000; } <br />
.border-b-15 { border-bottom: 15px solid #000; } <br />
.border-b-20 { border-bottom: 20px solid #000; } <br />
<br />
/* left borders: */ <br />
.border-l-01 { border-left: 1px solid #000; } <br />
.border-l-05 { border-left: 5px solid #000; } <br />
.border-l-10 { border-left: 10px solid #000; } <br />
.border-l-15 { border-left: 15px solid #000; } <br />
.border-l-20 { border-left: 20px solid #000; } <br />
<div class="column-20 height-20 border-r-01"></div><br />
<div class="column-20 height-20 border-b-01"></div><br />
<div class="column-20 height-20 border-l-20 border-b20"></div><br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20"></div><br />
<br />
<div class="column-20 height-20 border-t-10"></div><br />
<div class="column-20 height-20 border-r-20"></div><br />
<div class="column-20 height-20 border-b-20"></div><br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20 border-b-01"></div><br />
<br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20 border-t-20"></div><br />
<div class="column-20 height-20 border-l-20 border-b-20"></div><br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20"></div><br />
<br />
<div class="column-20 height-20 border-r-01"></div><br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20 border-t-01"></div><br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20 border-b-10"></div><br />
<br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20"></div><br />
<div class="column-20 height-20 border-t-10"></div><br />
<div class="column-20 height-20 border-l-10"></div>
