From the course: Design the Web: Graphics and CSS Pseudo-Elements

About the exercise files

The exercise files for this course are available to all subscribers of Lynda.com Online Training Library. Inside of the exercise files there's an HTML file called webpage. There is also an Images directory. Inside there are two web graphics, one named full.gif. This is a simple triangle that we're going to reassign into an H one tag to give us that sort of Fold or flag effect on the H one. The second one is called arrow.PNG, we're going to use this to reassign the bullets in an unordered list, using pseudo elements. Now the Html file that I'm adding here, is a simple Html five document, inside of the heading area, I've included all of the CSS dials. And in the body area, we have three main elements. An H one tag, a paragraph tag and an unordered list and all of these are inside of a div with a class of page. So, I am going to come up here and turn on my preview for a minute. If you look at this in a browser or preview of your web editor. You will see that this is a very simple page. This background container here of white is being defined by this class of page. And then we have our three individual elements here. Through out the course we are going to be doing is referencing those images in the images directory and creating phantom or pseudo elements using CSS. In other words, familiar with the exercise files now we start creating some pseudo elements.

Contents