CSS Basics

by Aqilah Misuary

HTML

</head>
<body>

<table class="center">
  <tr>
    <th>What?</th>
    <th>What is this?</th>
  </tr>
  <tr>
    <td>DOM</td>
    <td>Document Object Model</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Cascading Style Sheets</td>
  </tr>
</table>

    
<div class="center">THIS IS A BOX</div>
    
<h3 class="left">Image Gallery</h3>
<p>This is a picture of me playing my bass</p>
<img class="thumbnail" src="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg" width="200" height="200">
    
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

<!--PICTURES FROM HERE-->
    
<div class="img">
  <a target="_blank" href="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg">
    <img src="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">ONE</div>
</div>
<div class="img">
  <a target="_blank" href="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg">
    <img src="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">TWO</div>
</div>
<div class="img">
  <a target="_blank" href="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg">
    <img src="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">THREE</div>
</div>
<div class="img">
  <a target="_blank" href="https://dl.dropboxusercontent.com/u/30075450/ezDuqFSizQkXDHauYqSINuo6J3RkCj651xRRu4pBBfg.jpg">
    <img...

CSS

table, th, td {
    border: 1px solid black;
}
td {
    padding: 15px; /*control the space between the border and content in a table*/
}
th {
    background-color: pink;
    color: black;
}

div {
    background-color: pink;
    width: 200px;
    padding: 25px;
    border: 5px solid black;
    margin: 25px;
    border-style: double;
}

.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50%;

}

div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border:1px solid #0000ff;
}

div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 5px;
}

@media screen {
    p {
        font-family: Times New Roman, sans-serif;
        font-size: 17px;
    }
}


/* th - header
   td - data   */