Advanced CSS

DevMountain • 9 July 2015

Agenda

  • HTML5 elements
  • The box model
  • Pseudo-classes
  • Pseudo-elements
  • Media queries
  • Intro to layout (floats)

We'll also talk about some tools available to us for developing and debugging 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>:

My paragraph

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.

See the Pen CSS Power-ups - Examples - box-sizing by Matt Swensen (@mjswensen) on CodePen.

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;
}
            
CSS English
:first-child Elements that are the first child of their parent
:last-child Elements that are the last child of their parent
:nth-child(3) Elements that are the third child of their parent
:hover Elements that are currently under the mouse cursor
:active Elements that are currently being clicked
:empty Elements that have no children or text
:not(.summary) Elements that do not have the summary class

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:

See the Pen Pseudo-elements example by Matt Swensen (@mjswensen) on CodePen.

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.

With great power comes great responsibility.

Mini Project

Given this HTML:


              <h3>Table of Contents</h3>
            

Reproduce this screenshot:

Website title with styled pseudo-elements.

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: