From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Setting up the header

Setting up the header - CSS Tutorial

From the course: Creating a Responsive Web Design

Start my 1-month free trial Buy for my team

Setting up the header

“

- So now we're ready to start styling the heading area for print and we're going to start referencing some of our images as well. The first thing we need to do is go back to the exercise files and get all of the print graphics. Back in the exercise files let's find chapter 7 Ch07 then 07_01 inside of here there's a graphics directory and here are all of the print graphics. Let's copy and paste or option and drag these over to the images directory of our main project. Once you have the images copied let's go back to our print.css file let's scroll down and let's target our header element. Type header, put in our brackets we're going to set a position value of relative. Let's hit a few returns and now what we're going to do is make use of that banner graphic for print but instead of assigning it to the background image we're going to use the pseudo element so we can place it into the page with the same sort of effect that using an image tag might do if we were to modify the HTML. So…

Contents