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> {content} </div>

<span> {content} </span>

<img />

<ul>

</ul>

<li> </li>

<li> </li>

<ol>

</ol>

Common Elements Continued

<h1> {heading} </h1>

<nav></nav>

<section></section>

<footer></footer>

Semantic Element

<p> {paragraph} </p>

<a> {link} </a>

Heading Elements

<h1> 24px </h1>

<h2> 22px </h2>

<h3> 18px </h3>

<h4> 16px </h4>

<h5> 12px </h5>

<h6> 10px </h6>

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