HTML & CSS

Internet

Gateway to the world

What we'll be making today

HTML

Hyper Text Markup Language

Easy way to describe how text should be displayed

When you type: google.com

you: hi google's server
server: here's the html
you: oh I need the css file too
server: here's the css

HTML	Output
`<h1>h1</h1>`	h1
`<h2>h2</h2>`	h2
`<h3>h3</h3>`	h3
`<h4>h4</h4>`	h4
`<h5>h5</h5>`	h5
`<h6>h6</h6>`	h6

HTML	Output
`<div>content division</div>`	content division
`<p>paragraph</p>`	paragraph
`<!--I am not shown-->`

Attributes

give tags meaning

Used in the opening tag

<element attr="thing">content </element>

HTML	Output
`<img alt="erondu's collection" src="https://source.unsplash.com/user/erondu/160x90">`
`Photos by <a href="https://unsplash.com/@erondu">erondu</a> on <a href="https://unsplash.com/">Unsplash</a>`	Photos by erondu on Unsplash

HTML	Output
`<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>`	Item 1 Item 2 Item 3
`<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>`	Item 1 Item 2 Item 3

HTML Output

<table>
<thead>
  <tr>
  <th>Header content 1</th>
  <th>Header content 2</th>
  </tr>
</thead>
<tbody>
  <tr>
  <td>Body content 1</td>
  <td>Body content 2</td>
  </tr>
</tbody>
<tfoot>
  <tr>
  <td>Footer content 1</td>
  <td>Footer content 2</td>
  </tr>
</tfoot>
</table>

Header content 1	Header content 2
Body content 1	Body content 2
Footer content 1	Footer content 2

And many more!

Such as video, article, button, form...

MDN Resource

CSS

Cascading Style Sheets

Easy way to describe how HTML elements should be displayed

Ways to use css

inline-style

<div style="background: yellow;">Hello</div>

Hello

Ways to use css

id

<style>
#hello {
  background: yellow;
}
</style>
<div id="hello">Hello</div>

Hello

Ways to use css

class

<style>
.hello {
  background: yellow;
}
</style>
<div class="hello">Hello</div>

Hello

Ways to use css

inline-style
id
class

Use class. They're reusable, easy to read and maintain.

Stylistic css properties

Let's try them out

background
color
font-family
font-weight

CSS size units

px: pixels
em: relative to parent's font-size; originally a reference to the width of the capital M
rem: relative to <html>'s font-size
%: percentage with respect to width
fr: fraction with respect to siblings

Sizing css properties

width & height
padding
border
margin

CSS Box-model

Important

margin

border

padding

content (width & height)

CSS Box-model

Size of a box (width & height) is accounting for content only.

Modern css uses

box-sizing: border-box;

as it's easier to calculate

CSS Selectors

Specifying the css elements you want to target

Targetting all th within the class table

.table th {
  padding: 1rem;
}

Targetting the direct tbody within the class table

.table > tbody {
  background: red;
}

CSS Specificity

Think of it as priority of css for elements.

The more specific your selectors, the higher precedence of css

This is less specific than

.table th {
  padding: 1rem;
}

this

.table > tbody {
  background: red;
}

Flexbox

Used for aligning subcontent along a single axis.

display: flex;

Flexbox

1
2
3

display: flex;
/* by default */
flex-direction: row;
/* x-axis in row, y-axis in col */
align-items: center;
/* y-axis in row, x-axis in col */
justify-content: space-around;

Grid

Used for two-dimensional layout. Great for page structures.

display: grid;

Grid

Main area

.page {
  display: grid;
  grid-template-areas: "head head"
		       "nav  main"
		       "nav  foot";
  grid-template-rows: repeat(1fr, 3);
  grid-template-columns: 150px 1fr;
}

.header {
  grid-area: head;
  background-color: #8ca0ff;
}

.nav {
  grid-area: nav;
  background-color: #ffa08c;
}

.main {
  grid-area: main;
  background-color: #ffff64;
}

.footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Bonus trick

right click browser > inspect element
backspace/delete to remove html element

Useful for hiding ads/modals.

Sharing your work

Upload all your files to sites like

then buy a domain from a registrar like

NUSHackers

Feedback