Advanced CSS

HTML5 Elements

With HTML5, we have a lot of new elements to choose from.

Our goal is to mark up our content semantically.

Not semantic:

              <div>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<div>
  <div>
    <div>Some heading</div>
  </div>
  <div>
    <div>Some content</div>
  </div>
  <div>Some more content</div>
  <div>Some tangential content</div>
</div>
            

Semantic:

              <nav>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>
<article>
  <header>
    <h1>Some heading</h1>
  </header>
  <section>
    <p>Some content</p>
  </section>
  <footer>Some more content</footer>
  <aside>Some tangential content</aside>
</article>
            

Mini Project

Make a general, semantic HTML structure for daringfireball.net.

html5doctor.com/element-index/ has a nice reference of available tags.

The Box Model

The responsibility of a web browser's rendering engine is to determine the size, properties, and position of rectangular boxes (elements). [MDN article on the box model.]

The box model outlines how these rectangles are sized and positioned.

For a given element, like <p>My paragraph</p>:

Ocassionaly the box model can be tricky when you are trying to give a value to the width property.

Use the box-sizing property to get around that.

Mini Project

1. Create a parent element with a width of 200 pixels.
2. Give it some padding and a border.
3. Create a child element, also with some padding and a border.
4. Set the width of the child to 100% (if it isn't already), and use box-sizing: border-box; to make sure it fits right.

Pseudo-classes

Pseudo-classes give you more control over which elements your CSS selectors are targeting.

Use them in tandem with type and class selectors.

For example, to emphasize the first item in a list:

              <ol>
  <li>Trucks</li>
  <li>Cars</li>
  <li>Motorcycles</li>
</ol>
            

              li:first-child {
  font-weight: bold;
}
            

Mini Project

Fun selector game at flukeout.github.io!

Pseudo-elements

Pseudo-elements allow you to adjust your markup from your stylesheet.

For example, you can insert extra elements into the document:

These are the types of pseudo-elements:

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

Pseudo-elements should only be used for style/design, not for adding important content.

Mini Project

Given this HTML:

              <h3>Table of Contents</h3>
            

Reproduce this screenshot:

Here's one way to do it:

              h3::before, h3::after {
  content: "//";
  padding: 0 1ex;
  color: hsla(0, 0%, 0%, 0.5);
}
            

Media Queries

Media queries let us define CSS rules that will only apply when certain conditions are met.

A common use case is detecting screen width, changing layout as appropriate.

See this simple media query example.

There are other useful media queries:

              @media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Detecting screen resolution to provide high-DPI
   * images for retina screens or high-quality prints.
   */
}
            

              @media print {
  /* Print-specific CSS for doing things like removing
   * background colors, making content full-width, etc.
   */
}

            

Mini Project

Create an element that has a blue background color when the window is larger than 500 pixels wide, and a red background color otherwise.

Intro to Layout (Floats)

There are lots of options for creating layouts in CSS.

Today we'll go over a specific approach to creating simple website layouts: arranging columns with the float property.

In a nutshell, float removes an element from the normal flow and "floats" it to the side.

Let's try a live demo.

(Finished example.)

Mini Project

Practice creating a simple two-column layout (like the one we just built together) using float.

In the future...

If you're needing more complex layouts, consider looking into Flexbox or Grid. These new CSS modules are extremely flexible and powerful, but don't yet enjoy the same browser support as legacy techniques.

Thank you!

I'd love to connect with you:

• Twitter: @mjswensen
• LinkedIn: /in/mjswensen
• Online: mjswensen.com