Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57998 Viewers
119 Video lessons · 67405 Viewers
84 Video lessons · 16757 Viewers
125 Video lessons · 29632 Viewers
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.