Web Designing 101 Class


#141

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 ?


#142

Your supposed to Save As .css

The filename should be mycss


#143

Note:

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


#144

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

@Anelaw


#145

I am on track now @Funsho.


#146

Good.

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


#147

Done!


#148

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

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

Then paste the result.


#149

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.


#150

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


#151

The path your css file should be written like this

/css/mycss.css

css is the folder where mycss.css is.


#152

Any luck ?


#153

There is something wrong wit my codes.


#154

@Stella_Aanu Hi, are you joining the class today ?


#155

Hi @Anelaw,

Kindly share the result of yesterday’s assignment.


#156

knock knock knock


#157


So sorry I am late.


#158

Welcome.

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


#159

@Anelaw,

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.

<table>
  <tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
  </tr>
  <tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
  </tr>
  <tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
  </tr>
  <tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
  </tr>
  <tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
  </tr>
  <tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
  </tr>
  <tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
  </tr>
</table>

#160

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.