From the course: Creating a Responsive Web Design
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Setting up the header - CSS Tutorial
From the course: Creating a Responsive Web Design
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
(Locked)
Strategy for printing3m 58s
-
(Locked)
Linking a CSS file for print2m 33s
-
(Locked)
Setting up the base styles4m 36s
-
(Locked)
Setting up the header4m 34s
-
(Locked)
Displaying URLS when printing6m 5s
-
(Locked)
Main section4m 41s
-
(Locked)
Atmosphere section2m 34s
-
(Locked)
Switching our img tags with CSS5m 5s
-
(Locked)
Styling the footer4m 24s
-
(Locked)
Setting page breaks with CSS2m 30s
-
(Locked)
-