Refresher Time: CSS & HTML

crash course on the building blocks of the web

3 min readMar 11, 2021

HTML: HyperText Markup Language

HTML is the content of our websites. It’s not a programming language but a markup language: a description of how a document is structured whereas a programming language like Javascript describes what something does. (I will not be covering JS since the scope is too wide for one blog!) HTML simply says “this element here is a heading, paragraph etc.”

Basic Syntax: Tags/Element

<body> this is the opening tag<img src="sushi.jpg" alt="a salmon roll"></body> this is the closing tag

An <opening tag> and </closing tag> form an element. Not all HTML tags have a closing tag. For example: <image> & <br>. Elements can have attributes. Attributes give the browser additional info on the element such as the location of an image file or where a link should go.

Basic Syntax: Attributes

<a href="https://instagram.com"> Instagram Link! </a><a href="index.html"> This is the Index. </a>

Basic HTML File Structure

<!DOCTYPE html>
<html> 
   <head> 
     <title> page title </title>
   </head> 
   <body> 
   body content goes between the body tags 
   </body>
</html>

Basic HTML Text Fundamentals

CSS: Cascading Style Sheets

CSS is what makes websites look visually interesting by manipulating fonts, colors, backgrounds, layouts & more. A website function without CSS but where’s the fun in a plain boring website?

Basic CSS Syntax

property: value;

Properties are what we want to change: color, background color, font size

Values are what we want to set that property to: actual size #, actual color

font-size: 50px;
background-color: #000000;
text-align: center;

You can also add CSS using the style attribute.

<p style="font-size: 50px; color: #000000;"> Hello World! </p>

CSS Box Model

You need to consider the CSS Box Model when considering the design and layout on the page. It’s a set of rules that defines how every page on the webpage is rendered. The HTML elements that make up the Box Model are margins, borders, padding, and the content.

I like to use a house as an analogy to better understand the Box Model in plain english. The content is the house on this lot. The content can be texts, images or media content and the dimensions are referred to as content height & content width. The padding & border act as the fence and yard around your house/content, with the border acting like the fence around the yard. The margin is the surrounding trees/bushes that is part of your lot as well but what gives more privacy from other surrounding neighbors on top of your padding & border. Pretty straight forward ay?

Source: https://www.w3schools.com/css/css_boxmodel.asp

There are some common confusions especially with margin & padding. I like to think that margin is space outside, padding is space inside. Not much happens in margins other than spacing things out from other elements. Padding on the other hand can have a background color and/or if you want more land on a certain side around the house, padding is what will be used. Also, research on margin collapsing here.

Responsive Web Design

It’s called responsive web design when you use CSS & HTML to resize, hide, shrink, enlarge, or move the content to make it look good on different devices like a tablet, phone and/or desktop. Some examples would be images changing sizes to fit on a device or when you click on a screen to minimize & maximize and the texts adjusting according to the device size.