HTML & CSS

HTML

Hyper Text Markup Language

Think of HTML like the structure of a house. There is a foundation, walls, doors and windows.

HTML is broken out into specific elements. Each element should have a semantic meaning to the site.

This allows us to create a manageable separation to our site.

Common Elements

<div></div>

<span></span>

<img />

<nav></nav>

<section></section>

<footer></footer>

<ul></ul>

<li></li>

Semantic Element

Common Elements Continued

<p></p>

<h1></h1>

<a></a>

<li></li>

<ol></ol>

Know that this is just scratching the surface. There are dozens of additional elements available

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <nav>
    <span class="company-name">Company</span>
    <ul>
      <li>
        <a href="">Home</a>
        <a href="">About</a>
        <a href="">Contact</a>
      </li>
    </ul>
  </nav>
  <section>
    <div class="hero"></div>
  </section>
  <section class="image-container">
    <img src="link to image" alt="description of image">
    <img src="link to image" alt="description of image">
  </section>
  <footer></footer>
</body>
</html>

That's
Too
Much

Lets break it down

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

</html>

<!DOCTYPE html>

Lets the browser know what kind of document is being served.

<html></html>

The outer most element. Everything lives inside of it

<head></head>

Where the brains of our project live. Specific information about the site will be stored here

<body>
  <nav>
    <span class="company-name">Company</span>
    <ul>
      <li>
        <a href="">Home</a>
        <a href="">About</a>
        <a href="">Contact</a>
      </li>
    </ul>
  </nav>
  <section>
    <div class="hero"></div>
  </section>
  <section class="image-container">
    <img src="link to image" alt="description of image">
    <img src="link to image" alt="description of image">
  </section>
  <footer></footer>
</body>

<body></body>

Where the magic happens. This is the "foundation" and where we will put our "walls, doors and windows". The body element is a sibling to the <head> element, inside of the <html> element

CSS

Cascading Style Sheet

CSS is the color of our house, the size of the windows and position/color of the door.

Selectors

Classes -> .class-name

IDs -> #id-name

Elements -> elementName

.hero {
    /* Properties go here */
}

#btn {
    /* Properties go here */
}

button {
    /* Properties go here */
}

Some common ways to select your HTML

Specificity/Cascading

CSS follows two main rules. Cascading and Specificity.

Cascading: CSS flows from the top of the file down. If there is a conflicting selector lower in the file, it will apply that styling UNLESS...

Specificity: CSS follows a specificity, or weighting system. Some selectors carry more weight, meaning they will be applied over lesser selectors, even if they are below the heavier selector

Elements: 1

Classes: 10

IDs: 100

Inline / !important: Always win

The higher the weight, the more specific that selector is. The more specific style always wins regardless of order.

What
Are
Properties?

height

width

color

font-family

background-color

padding

margin

z-index

position

display

font-weight

border

Properties

There are literally hundreds of additional properties in CSS.

A few units of measurement

px : pixels

% : percentage

em : relative to the font-size of the element

CSS Box Model

Think of every element like a box. The box model is a structure to how we can manipulate that box

Content