HTML & CSS Basics

HTML & CSS Basics


Warmup

  • What is the purpose of HTML?
  • What is the purpose of CSS?
  • What are some HTML tags you learned over break? Anything interesting?
  • What is the purpose of a class in HTML/CSS? an id?
  • Any other interesting ways to select things using CSS?

Learning Goals

  • Understand the standard structure of an HTML page.
  • Understand the information that belongs in each part of the HTML page.
  • Define a semantic tag.
  • Select HTML by a specific tag, class or id and apply CSS to those elements.
  • Describe the difference between a block and inline tag.
  • Understand how to chain HTML selectors in HTML and CSS code.

HTML


HTML Skeleton

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

<head></head>

<head>
  <title>Some Title</title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body></body>

<body>
  <h1></h1>
  <p></p>
  <img src="img/image1.png">
  <a href="http://www.google.com">Google</a>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</body>

Semantic Tags

<header>
<nav>
<main>
<footer>
<article>
<aside>
<section>

[Less]-Semantic Tags

<div>
<span>

CSS


Selectors

p {
  background-color: blue;
  color: #FFFFFF;
}

Class Selectors

.some-class {
  background-color: orange;
}

ID Selectors

#some-id {
  background-color: purple;
}

Box Model

inline


Display Property

  • Block will take up as much horizontal space as possible.
  • Inline will allow text to wrap around an element.
    • Accepts margin and padding.
    • Will ignore width and height.
  • Inline-Block like inline, but will respect width and height.
  • None will remove an element from the DOM (Document Object Model).

Floats

h1 {
  display: inline-block;
  padding: 20px;
  float: left;
}

.buttons {
  float: right;
}

Wireframing

Wireframes, from a developer’s vantage point, should be minimal. Looking at a wireframe, one should be able to gather the basic structure of the site. Specific fonts, images, or copy (text), shouldn’t be a concern.

Exercise: Wireframe: With a Partner

Part 1:

  • Think of a type of site (store, personal, news, review, blog).
  • Brainstorm content that would be displayed on the front page.
  • Create a wireframe for that site.

Part 2:

  • See if you can create the basic layout for the site you wireframed with HTML/CSS

Other CSS Wizardry


Pseudo-Classes

  • :hover
  • :nth-child(2)
h1:hover {
  opacity: .5;
}

Advanced CSS Selectors

<body>
  <p class="red dog"></p>
  <p class="red cat"></p>
  <div class="red">
    <p class="inner">
      <a href="#" class="more inner"></a>
    </p>
  </div>
</body>
  • Chained classes: Apply to elements that have all classes.
.red.dog {
  /*would only apply to <p> with both red and dog classes*/
}
  • Comma: Apply to elements that have either selector.
.cat, .dog {
  /* would apply to anything with class of cat or dog */
}
  • Space: Child elements (direct or indirect).
.red .inner {
  /* would apply to <p>, <a> children of <div class="red"> */
}
  • >: Direct children.
.red > .inner {
  /* would only apply to <p class="inner"> child of <div> */
}

Additional Wireframes

With the time remaining:

  • See if you can implement two more high level wireframes.
  • If you have time remaining, play with pseudo-classes and relative selectors.

Lesson Search Results

Showing top 10 results