HTML & CSS
Reference Sheet

Getting Started

It's important to set up a comfortable development environment. While online code editors like Codepen and Code Sandbox give you the essentials, the reliance on Internet connectivity can lead to poor performance which hinders experimentation. Moving to a setup where you can have code in full screen and a browser in a separate screen, with the ability to look into the code using Chrome Dev Tools will make a big difference in your productivity.

HTML5 Semantic Elements

Semantic elements add meaning and clarity to the structure of HTML. There are various semantic elements supported in HTML5 that can be used in place of generic <div> tags. Use of semantic tags also improves the accessibility of a site.

Some semantic elements

Element

Usage
<nav> Site navigation including menus, table of contents, and indexes.
<header> Site header
<main> The main content of the document. Typically between the header and the footer.
<section> Used for distinct sections of a document.
<article> Used to group a block of text in a document. Articles can be nested in sections and sections can be nested in articles.
<aside> Useful for text related to an article but not an essential part of the article.
<figure> Can be used to contain an image, especially when the image will be accompanied by text.
<figcaption> For text that accompanies an image inside a figure element.
<footer> For footer elements.

CSS Selectors

CSS needs to be able to select elements in order to style them correctly. Improper selection can easily lead to unintended visuals. Keeping some key tips in mind should clear up most issues.

  • Element Selection

    Native HTML elements are selected using the element name without any tags, with styling contained inside curly braces.

    h2 {
      font-size: 2rem;
    }

  • Class Selection

    Classes are selected with a period pre-pending the class name.

    .bold {
      font-weight: 700;
    }

  • ID Selection

    Elements named with ids are selected using a hashtag and the element name.

    #course-offerings {
      background-color: blue;
    }

  • Descendant Selection

    Descendants of an element are selected with a space between the name of the ancestor and that of the descendant. All descendants are selected, regardless of how many levels deep they are within the element.

    ul li {
      margin: 0 auto;
    }

  • Child Selection

    Direct children of an element are selected using the > combinator. Only elements directly beneath the ancestor will be selected.

    ul > li {
      margin: 0 auto;
    }

  • Combined Selection

    An element can be targeted based on its membership in multiple classes. This is done similar to a descendant selection but the whitespace is omitted. The below code targets unordered lists of the class "blue" but not any descendant elements that may have that class.

    ul.blue {
      background-color: blue;
    }

  • Nth Child Selection

    The :nth-child() pseudo-class can be used to select elements based on their position within a group of siblings. This can be handy for selecting first, last, or middle elements or for selecting every nth element (for example only even elements). A simple example is changing the background color of even rows within a table.

    tr:nth-child(2n) {
      background-color: #eee;
    }

CSS Box Model

By default CSS uses an inexplicable box model whereby the size of the content box is specified and the padding and border are added to that. This can be remedied by specifying the border-box box model in the CSS.

html {
  box-sizing: border-box;
}

Flexbox

With the flexbox module, one-dimensional elements can be created in CSS that flow either horizontally or vertically and resize based on screen size without using media queries. With flexbox, the spacing of items within a flexible box can be controlled. Note that there is no explicit control for the gap between items but setting the margin property on individual items can be used to achieve this effect.