Web Designing 101 Class


The line is what the web page will use to import your css to your html.

So instead of styling our website in the html, we do everything is mycss.css then import it to our html pages.

Get it ?


Your supposed to Save As .css

The filename should be mycss



CSS files are in .css eg: funsho.css

Javascript files are in .js eg: funsho.js

HTML files are in .htm (or html) eg: funsho.html


<link rel="stylesheet" href="mycss.css">



I am on track now @NaijaLander.



Now open your htm in the browser. The one you created just now, the one with the link statement.




Now, in the htm, add some content to your page.

put some content in the <body> , <h1> and <p> tags

Then paste the result.


What we are doing is, we want to ensure that the elements we are styling in our css file exist in the htm file importing the css file. Hope I’m not confusing you.


Yes, I think I am missing a/some steps.


The path your css file should be written like this


css is the folder where mycss.css is.


Any luck ?


There is something wrong wit my codes.


@Stella_Aanu Hi, are you joining the class today ?


Hi @Angie,

Kindly share the result of yesterday’s assignment.


knock knock knock


So sorry I am late.



Now that we understand how CSS works, let’s talk about tables.



Open your mycss.css file, and paste this code in there.

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;

tr:nth-child(even) {
    background-color: #dddddd;

After that, add this code to your htm file.

<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>


Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.