Week 2 Day 1

Pseudo Selectors

Pseudo selectors allow web authors to select specific states of HTML elements instead of just the element (some pseudo selectors allow for other things too, but we talked mostly about hover states). The syntax is simple and consistent and makes sense once you wrap your head around the concept of states.

For example:

a{
    color: green;
}

The above code with make the link’s text green in color.

a:hover{
    color: blue;
}

This example is s pseudo selector that targets a links that have the mouse hovered over them. The way we talk about it is that the a’s hover state is blue. It has a default state of green and a hover state of blue.

To find a full list of pseudo elements and their meaning, visit w3schools pseudo elements page

Intro to Responsive Design

We discussed the syntax and purpose of responsive design today. We are already using fluid layouts and are now focused on mastering media queries.

For a deeper discussion of responsive design, please consult the responsive design page.

Published by

giodif

I am the UI Design Instructor at The Iron Yard Academy in Columbia. I am also the Creative Director for UnmatchedStyle.com, ConvergeSE, BD Conf, and SOCO.