Web Development

// default style

@media screen and (max-width: 300px) {
  // CSS styles when screen is only 300px
}

@media screen and (max-width: 500px) {
  // CSS styles when screen is 500px
}

@media screen and (min-width: 700) {
  // CSS styles when screen is minimum 500px and no matter how large
}

<style>
table {
  width: 100%
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
  text-align: left;
}
</style


<h2>Horizontal Headings:</h2>

<table>
  <tr>
    <th>Name</th>
    <th>Telephone</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

<h2>Vertical Headings:</h2>

<table>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 855</td>
  </tr>
</table

td:nth-of-type(1):before { content: "Status"; }
td:nth-of-type(2):before { content: "Paid"; }
td:nth-of-type(3):before { content: "Category"; }
td:nth-of-type(4):before { content: "From"; }
td:nth-of-type(5):before { content: "To"; }
td:nth-of-type(6):before { content: "Total Days"; }

Jassim Rahma wrote:

when I say not working I mean the h1 font size and color is not changing.

Jassim Rahma wrote:

font-size: small;

Jassim Rahma wrote:

color: #FF0000;

Jassim Rahma wrote:

font-size: small;

Jassim Rahma wrote:

color: #FF0000;