hi, this is dave's cheatsheet!


This page was created to help me develop future websites, storing this page as a dictionary of elements, rules, attributes, syntax and other useful terminology for future reference. When creating good-looking websites, you will need to learn HTML, CSS and JS. HTML is a markup language that defines the structure and content of a webpage, like headings, paragraphs, images and links. CSS is used to style that structure, which is used for controlling layout, colors, fonts, spacing and responsiveness to make the website look appealing. JS adds interactivity and dynamic behavior to your website, allowing the author of the website to create features like sliders, pop-ups, animations, games and real-time updates. These three languages form the foundation of modern web development.

element/tag list





css usage (cascading style sheets)




basics


CSS is used to control the appearance of HTML elements, like color, layout, spacing, fonts, animations and more. There are three ways to import CSS.

1. Inline CSS - is applied directly and is single-use. However, it is recommended to use IDs as they are more cleaner and easier to understand. 
<p style="color: red;">Hello</p>

2. Internal CSS - is placed inside a <style> tag in the <head> tag. Recommended for small projects or one-off styles. 
<style>
    p {
      color: red;
    }
</style>

3. External CSS - loads preexisting styles from a separate .css file. Recommended for larger or multiple-page sites. 
<link rel="stylesheet" href="styles.css">

selectors


Selectors are placed before the curly brackets. They are also placed in <style>.
This isn't a complete list. There are many basic selectors, combinators, attribute selectors, pseudo-classes (CSS2, 3, 4), pseudo-elements and functional selectors. According to Google, there are 60+ selectors.

Selector Type Example Definition
Element p Targets all <p> tags
Class .box Targets elements with class="box". Reuseable
ID #main Targets element with id="main". Should be used once. Better alternative to inline CSS
Universial * Targets all elements in the page
Descendant div p Targets <p> inside a <div>
Child div > p Direct child <p> of <div>, nothing else
Pseudo-class a:hover Styles <a> when hovered

(common) properties


These properties are placed inside the curly brackets to give the selectors those properties. By the way, this isn't a full list! There are tons to be discovered. According to Google, there are 200+, but don't be overwhelmed.

Property Example Definition
color color: red; Text color
background background-color: #fff; Background color
font-size font-size: 20%; Size of text
margin margin: 10px; Space outside the element
padding padding: 5px; Space inside the element
border border: 1px solid #000; Border around the element
display display: flex; Layout behavior
position position: absolute; Positioning in the page
text-align text-align: center; Aligns text inside the element

'cascading' definition and priority of elements


The order is how CSS decides which rule (selector) is applied to an element if there is a conflict. There is an order of priority. This is why the C in CSS stands for 'Cascading', its meaning being that when multiple styles apply, the most specific, latest, and most powerful rule wins.
The order of specificity is listed on the following table.

Type of Selector Example Priority
Inline Styles style="" in HTML Highest
ID #id High
Class / Attribute / Pseudo-class .class, a:hover Medium
Element p, div Low
Universal * Lowest

Some other factors come into play when deciding the order.

  1. Order - If two selectors have equal specificity, the one that appears later in the CSS wins priority.
  2. Location - Inline CSS > Internal CSS > External CSS
  3. !important - Overrides almost everything. This should we used as sparingly as possible. Here is an example of its use:

    CSS 
    p {
  color: blue !important;
}

p#special {
  color: red;
}
    HTML 
    <p id="special">This will be blue, not red!</p>

helpful tips using html + css



  1. When starting a new HTML file, use the box method. It is a core concept in CSS layout. Every HTML element is considered a rectangular box. The box model describes and calculates the spacing and dimension around that rectangular box.
    2. There are four elements in a box model:
    Content - area where you place text, images, ect
    Padding - space between content and border
    Border - line around the padding/content
    Margin - space outside the element

    Content


    Content with border


    Content with border + margin

    Content + padding + border + margin


    Same as last but centered

    <div class="box-model">
  <div class="margin">
    <div class="border">
      <div class="padding">
        <div class="content"> Content :) </div>
      </div>
    </div>
  </div>
</div>
    .box-model * {
  text-align: center;
  line-height: 50px;
  font-family: sans-serif;
}
.margin {
  background: #d4e8ff;
  padding: 20px;
  border-radius: 6px;
}
.border {
  border: 5px solid #a0bad8;
  padding: 20px;
}
.padding {
  background: #7088bd;
  padding: 20px;
}
.content {
  background: #3b4f74;
  height: 50px;
  border-radius: 6px;
}

  2. Use display: flex for easy layouts. Flex boxes help align items in rows or columns.
    3. .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }