Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
Now the first CSS file we're going to work in is going to be screen_styles.css. So from your text editor, choose File > Open. From the myWebsite folder, let's go into the css folder and open up screen_styles.css. Now, the first rule we're going to target in here is going to be the body tag. So we'll type body, beginning and ending bracket. Split those open. First property, we're going to set color. This is going to be the color of the type.
We're going to set that to #575c7A;. Next line, we're going to set the line-height to 1.5 ems. Next line, we're going to set font-family: set that to Arial; Next line, we're going to set font-size to 14 pixels. Next line, we're going to set the background property.
Now, we're going to use shorthand style here, which is first going to define the background color, then a graphic, then the repeating settings, and then the position settings for the graphic. So we're going to start with background color, which is going to be our sort of blue color. So #515673, then a space. Then we're gonna type url (). We're going to use a background graphic. Now inside of the parenthesis for url, we're going to target the images directory. Now, we're inside of the css directory, so we need ../ to come out to root, then images/background_gradient.jpg.
Outside of the parentheses, we're going to set the repeat settings. We're going to set the repeat-x so it only repeats on the horizontal. Zero pixels for the X position and 0 pixels for the Y position, then a semicolon. Next CSS rule. .page, we're going to target the overall page container. Beginning and ending bracket, split those open. First, we're going to set a maximum-width of 980 pixels.
That way when our browser gets wider than 980, the size will lock down and then we can center the page. Next line, we're going to set margin. We're also going to use shorthand style here. So the first property is top, then right, then bottom, then left. So for the top margin, we're going to set 0 pixels, hit a space. Next, we'll type auto. That's for the right. Zero pixels for the bottom and then auto for the left. Last property, we're going to set position to relative.
That way anything that we position inside of the page area will position itself relative to this object. This is going to give us the ability to position that nav bar. Let's hit a return. And then finally, we're going to set our background color to white, so #fff. Then we'll hit Save. To see what our work looks like so far, let's come back out to the operating system. Let's open this up in a browser. Once you hit Reload, we'll see the page area here defined in white. We'll see the background gradient graphic.
We'll see the background color down here at the bottom. And if we open and close our browser, we'll see that the design locks at 980 and just centers. Now that we have our background and page container styled, next we'll work on styling the headings.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.