Groupings and Selectors

Size: px

Start display at page:

Download "Groupings and Selectors"

Scarlett Chase
5 years ago
Views:

1 Groupings and Selectors Steps to Success Using the headings.html web page you created in steps, we'll discuss the type selector and grouping. We'll look at how we can utilize grouping efficiently within our CSS file. 1. Open the headings.html file in steps folder. 2. Now, create a new CSS file in Dreamweaver and add the following code. /* CSS Document */ This is a CSS comment. It will help you know which file is the css and which file is the html. 3. Save the file as headings.css inside the stepstyles folder 4. Add the following code to the <head> of headings.html <link href="stepstyles/headings.css" rel="stylesheet" type="text/css" /> Type Selectors The type selector matches the tag name of any element type within our documents. 1. Add the following h1 rule to headings.css: h1{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; background-color: transparent; Illustration 1: A simple type selector

The results are in Image 1. Image 1: Our h1 rule The rule in Illustration 1 would make all instances of the h1 element assume the properties and values we have declared within the rule.

2 The results are in Image 1. Image 1: Our h1 rule The rule in Illustration 1 would make all instances of the h1 element assume the properties and values we have declared within the rule. We have simply declared that all instances of our h1element will comprise of a set of fonts. They will be dark gray in color and the background will be transparent. Group Type Selectors 1. Add the following (in red) to headings.css: h1, h2{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; background-color: transparent; Illustration 2: Grouping our selectors In Illustration 2, I have added a comma immediately after the h1 selector and then I added an h2selector. The results are in Image 2.

3 Image 2: Our h1, h2 rule We can see from the image above that our h1, h2 rule has completed the styling we set for both our h1 and h2 elements; this is pretty cool. What we have done is separate our type selectors with a comma. What this means is that each selector in the rule will be styled exactly the same, just as if they had been written individually. This means we can use this technique to declare the common properties that exist within each of our elements. 2. Add the following (in red) to headings.css: h1, h2, h3, h4, h5, h6{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; background-color: transparent; Illustration 3: go crazy! If we are using all those h elements, and they fit into our generic rule, then this is the best thing to do. No sense in re-writing the rule multiple times when just the once will do. Preview in the browser:

4 Image 3: Our h1 to h6 generic styling We see the styling has been applied to all our h elements, from h1, right through to h6. Setting The Specifics Now that we have seen how we can group our type selectors, and therefore reduce the amount of code we need to type - not to mention that we can now maintain our CSS easier - we can look at setting the specifics for our h elements. 1. Add the following (in red) to headings.css h1, h2, h3, h4, h5, h6{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; background-color: transparent; h1{font-size: 1.2em; h2{font-size: 1em; h3{font-size: 0.9em; h4{font-size: 0.8em; h5{font-size: 0.7em; h6{font-size: 0.6em; Illustration 4: Sizing our h elements Let's take a look at how our CSS in Illustration 4 is rendered by the browser:

5 Image 3: Our h elements are now sized In Illustration 4, I have set a size for each of the h elements we have been working with: h1 to h6. What if we decided that all our h elements now require a margin of 25px to the left, to conform to the layout we have in mind for our page? Well we can easily accomplish this now by revisiting the generic rule. We need only add the margin property we require in a single location to affect all our h elements. By writing our CSS in this manner we are giving ourselves options. We have the ability to add properties into the individual rule we have created for our h elements - if the rule is only required by that specific element. We also have the ability to go back to our generic rule to add any properties that are required by our h elements on a global basis. Specificity The lower the rule in our style sheet the greater the importance of the rule - that is, the closer it is to the actual content that is to be styled - this provides us with further options. Should our client request one day that all the h3 elements be red in color, we can simply add that value to the rule for that specific element, as shown in Illustration Add the following (in red) to headings.css h3{ font-size: 0.9em; color: red; Illustration 5: Making the h3 elements red in color Make that change in your test page and preview it in your browser. You will notice the color of your h3 is now red, while all the other h elements are unaffected, as we would expect.

6 Image 4: Our h3 element is now red As you can see from these simple examples, it is easy to build on each of the individual rule. The generic rule should be at the top of your style sheet to prevent it overriding your individual rule settings. Try moving the generic rule to the bottom of your style sheet and see how the gray color in that rule overrides the red color in the h3 rule. Conclusion In this tutorial, we have learned that a type selector will style all instances of its type on every page the CSS is linked to. We have also seen how we can group our selectors. Grouping makes the maintenance of our style sheets much easier. Grouping condenses our rule, makes everything more manageable and easier to read. This grouping is not limited to type selectors. Try experimenting with what we have covered here and see how far you can go. We briefly looked at the cascade and saw how a greater importance is placed on a rule when it is lower in the style sheet. It will always win out against a rule that is higher in the style sheet with the same selector.

7 Classes Steps to Success 1. In Dreamweaver, open a new HTML file. 2. Add the following code: <html> <head> <title>advanced styles</title> <link href="stepstyles/classes.css" rel="stylesheet" type="text/css" /> </head> <body> <table border="0" cellspacing="0" cellpadding="1"> <tr> <td>advanced stylesheet example!</td> </tr> </table> <br/> <table border="0" cellspacing="0" cellpadding="1" class="alttable"> <tr> <td>advanced stylesheet example!</td> </tr> </table> </body> </html> 3. Save as classes.html in the steps folder 4. In Dreamweaver, open a new CSS file and copy the following style rules into it: /* CSS Document */ body { font-size: 1em;

8 background: #FFFFFF; color: #000000; font-family: verdana, arial, ms sans serif; table { border-right: # px solid; padding-right: 1px; border-top: # px solid; padding-left: 1px; margin: 0px; border-left: # px solid; color: #000000; border-bottom: # px solid; background-color: #c0c0c0;.alttable { border-right: #FF0000 2px dashed; border-top: #FF0000 2px dashed; padding-left: 3px; FONT-SIZE: 8pt; border-left: #FF0000 2px dashed; color: #FFFF00; border-bottom: #FF0000 2px dashed; background-color: #000000; 5. Save as classes.css in the stepstyles folder 6. Preview in a browser. This example brings "classes" into the equation. If you create a set of rules for the <table> tag - what happens if you want to create two tables with different appearance? The answer is to use a class. Classes are prefixed with a full period (.) and the name of the class can be whatever you decide..alttable is the class used in the above example. When the browser reads the "class=classname" part of the table tag, it will break away from the standard table style declarations. It will jump to the.alttable rules and use those. Classes mean that elements can be individualized, yet still use the formatting from an external css file. Thus, they are very useful and important.

The Box Model To understand using CSS for layout you must understand the box model. Margins, padding and borders are all part of what's known as the Box Model.

9 The Box Model To understand using CSS for layout you must understand the box model. Margins, padding and borders are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area, surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this: You don't have to use all of these, but it can be helpful to remember that the box model can be applied to every HTML element on the page, and that's a powerful thing! This information on this page is only here to provide you with the visual example above. You DO NOT have to create any content as a result of reading through this page. If you have a good understanding of this model, simply move onto the next step.

10 divs & ids Using the div element and the id attribute for page layout All the work we have done so far has left us with a vertical layout of our web pages. How do the experts do it? How are they able to have content sit beside each other in a wonderful, colourful layout? The pros use a combination of the div element and the id selector in both the HTML and the CSS. The Mighty div Element The div element gives structure and context to any block-level content in the document. Each divelement becomes a generic block-level container for all content within the required start and end tags. As we will see, the div tag is a powerful generic element well suited for being used as a container within our Web page. This turns it into a good candidate for creating sections or divisions (hence "div") of Web documents. The id Selector The id selector is similar to the class selector. The id selector provides us with the opportunity to uniquely target these containers and apply rules to them. The difference between ids and classes ids must be unique. Only one unique id per HTML file. If there was an id called footer. It can only be used once as an attribute of the div element. Classes can be reused on a single page. If there was a class called box, it could be used within several HTML elements within one HTML file In the following steps, we use divs and ids to create containers/divisions/boxes for our content. The containers will be: header, sidebar, content, and footer We will add background colors, padding, margins and a few other properties to each of these areas We will use an external style sheet for your CSS.

11 Building containers using divs, ids and CSS Steps to Success - creating containers 1. Create a new HTML file in dreamweaver 2. Add the following markup: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>the might div element</title> </head> <body> <div id="banner">this is the banner area</div> <div id="sidenav">this is the sidenav area</div> <div id="content">this is the content area</div> <div id="footer">this is the footer area</div> </body> </html> 3. Save as containers.html (in steps of course!) The Division Element We have put the content into containers using the division element (div). Divisions, like paragraphs are also block elements; they can contain content. Therefore divisions must have an opening and closing tag. The attribute id defines the selector. 4. Create a CSS file in Dreamweaver and add the following code: /* CSS Document */ body{ margin:0; padding:0;

#banner{ background-color:#000099; color:#ffffff; #sidenav{ background-color:#000066; color:#cccccc; #content{ background-color: #FFFF99 #footer{ background-color:#990000; color: #999999; Notice: o o

12 #banner{ background-color:#000099; color:#ffffff; #sidenav{ background-color:#000066; color:#cccccc; #content{ background-color: #FFFF99 #footer{ background-color:#990000; color: #999999; Notice: o o id selector is defined by the # symbol within our style sheet, and by the use of the idattribute within our HTML document - for example id="sidenav". body selector is set to 0 for the padding and the margin. Usually the margin and padding are set to the browser default if not specifically set to Save this file as layout.css in the stepstyles folder. 6. Link to the external style sheet, layout.css in the <head> element of containers.html using the following markup: <link href="stepstyles/layout.css" rel="stylesheet" type="text/css" /> 7. Save both files and preview in a browser Notice the page is split into colored divisions or containers.

13 Now we can start playing with the layout. The banner we will leave as it is, which is at the top. We want the sidenav on the left with the content flowing beside it on the right the footer will be at the bottom of the page. It should look like this: To get the sidenav to stay on the left we will use the property float and we will give it a width of180 pixels. Note: The width of the average monitor is now 1024 pixels. There are still some monitors that only have a width of 800 pixels. Most web designers design for a width of 800px. 10. Add the following code (in red) to layout.css: /* CSS Document */ body{ margin:0; padding:0; #banner{ background-color:#000099; color:#ffffff; #sidenav{ background-color:#000066; color:#cccccc; float: left;

14 width: 180px; #content{ background-color: #FFFF99 #footer{ background-color:#990000; color: #999999; 11. Save both files and preview in a browser. It should look like this: Let's add more content in the content area. We know eventually that area is going to have more than one line of text. 12. Add a heading and a couple of more paragraphs to containers.html.

13. Save both files and preview in a browser. It should look like this: Yikes!! That's not quite what we want. The content is flowing underneath the sidenav and we don't want that to happen.

15 13. Save both files and preview in a browser. It should look like this: Yikes!! That's not quite what we want. The content is flowing underneath the sidenav and we don't want that to happen. We can give the content a left margin of 200 pixels. 13. Add the following code (in red) to layout.css: /* CSS Document */ body{ margin:0; padding:0; #banner{ background-color:#000099; color:#ffffff; #sidenav{ background-color:#000066; color:#cccccc; float: left; width: 180px; #content{ background-color: #FFFF99;

margin-left:200px; #footer{ background-color:#990000; color: #999999; 14. Save both files and preview in a browser. It should look like this: Here we go, now we are getting closer.

16 margin-left:200px; #footer{ background-color:#990000; color: #999999; 14. Save both files and preview in a browser. It should look like this: Here we go, now we are getting closer. But it still looks a little messy with too much white space where we don't want it. So let's do a little trick. We are going to put all the containers into one big container and call it wrap. We need a new <div> in the html and a new rule in the css. 15. Add the following code (in red) to layout.css: /* CSS Document */ body{ margin:0; padding:0; #wrap{ background-color:#000066;

17 #banner{ background-color:#000099; color:#ffffff; #sidenav{ background-color:#000066; color:#cccccc; float: left; width: 180px; #content{ background-color: #FFFF99; margin-left:200px; #footer{ background-color:#990000; color: #999999; 16. THIS IS VERY IMPORTANT...You are going to add this code into the html file where you want this CSS to be applied. With this code, even if you link the CSS file to the html file, you have still not indicated that you want to apply a 'div'. Divs are almost always defined in an external CSS sheet but will not work unless you put the div tag into the html. Add the following markup (in red) to containers.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>the might div element</title> <link href="stepstyles/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div id="banner">this is the banner area</div> <div id="sidenav">this is the sidenav area</div> <div id="content">

<h2>heading</h2> <p>this is the content area</p> <p>this is a paragraph </p> </div> <div id="footer">this is the footer area</div> </div> </body> </html> 17. Save both files and preview in a browser.

18 <h2>heading</h2> <p>this is the content area</p> <p>this is a paragraph </p> </div> <div id="footer">this is the footer area</div> </div> </body> </html> 17. Save both files and preview in a browser. It should look like this: Finishing touches. The text is too tight to the sides of the containers. We'll add some padding to the banner, the sidenav and the footer. Add padding:6px to all three containers in layout.css 18. Add the following code (in red) to layout.css: /* CSS Document */ body{ margin:0; padding:0;

19 #wrap{ background-color:#000066; #banner{ background-color:#000099; color:#ffffff; padding:6px; #sidenav{ background-color:#000066; color:#cccccc; float: left; width: 180px; padding:6px; #content{ background-color: #FFFF99; margin-left:200px; #footer{ background-color:#990000; color: #999999; padding:6px;

20 19. Save both files and preview in a browser. It should look like this: 20. Set the width of the wrap to 800px /* CSS Document */ body{ margin:0; padding:0; #wrap{ background-color:#000066; width:800px; #banner{ background-color:#000099; color:#ffffff; padding:6px; #sidenav{ background-color:#000066; color:#cccccc; float: left; width: 180px; padding:6px;

21 #content{ background-color: #FFFF99; margin-left:200px; #footer{ background-color:#990000; color: #999999; padding:6px; 21. Save both files and preview in a browser. At this point, a lot of you may find that your containers page does not look as it should per the example above. To save yourself the trouble of having to go back through every line of code and figure out where you went wrong, please replace all of the code you have in layout.css with the following code...this code has some additional content in it that will be used a few steps later, so make sure you replace all of your layout.css code with the code below regardless of whether or not your page looks correct. /* CSS Document */ body{ margin:0; padding:0; #wrap{ background-color:#000066; width:800px; background-image:url(../images/bg_wrap.gif); background-repeat: repeat-y; margin: 0 auto; #banner{ background-color:#000099; color:#ffffff; padding:6px; #sidenav{ background-color:#000066; color:#cccccc; float: left; width: 160px; padding:6px;

22 #content{ background-color: #FFFF99; margin-left:200px; padding:6px; #footer{ background-color:#990000; color: #999999; padding:18px; background-image: url(../images/xhtml_h1_bg.gif); background-repeat: repeat-x; background-position: bottom;

23 Adding background images Let's do as the pros do and add a background image but first we must learn how we can position background images within a HTML element, using CSS. Steps to Success Save an image 1. Right mouse on the image below 2. Save image as bg.gif in the images folder inside the steps folder Create a new css (this image is located on my website) 3. Open a new file in Dreamweaver and add the following code /* CSS document */ This is a CSS comment. It will help you know which file is the css and which file is the html. 4. Save the file as background.css in the stepstyles folder Create a new web page 5. Open a new file in Dreamweaver 6. Add the following markup: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>using Background Images</title> </head> <body> <h1>heading Background </h1> <p>this is a web page that uses a background image in the body and h1 <p>this is a 2nd paragraph</p> </body> </html> selectors </p> 7. Save as background.html

24 8. Link to external style sheet, background.css in the <head> element using the following markup. <link href="stepstyles/background.css" rel="stylesheet" type="text/css" /> Background Images and the Body Tag We'll begin by looking at the syntax and then move onto the different options that are available to us. Let's begin with a simple rule for the body element that is shown in Illustration Add the following background image rule to the external style sheet background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); Illustration 1: Adding a background image to our body Image 1: The default setting IMPORTANT REGARDING THE../ included in the image path Some of you probably noticed the '../' placed before the path to the images folder. This code is required

25 when you are inside of a folder that you need to exit before going into another folder. We refer to it in this class as a 'bounce out' code. Because the images folder is not inside of the stepstyles folder, you need to first bounce out of the stepstyles folder and back into the main steps folder before accessing the images folder. The three characters../ allow this to happen. Our body rule in Illustration 1 produces what you see in the image above, and can generally be taken as the browser default settings. We have supplied no specific information from our style sheet other than the fact we want to use a background image. How that image is to be used we have left to the browser, at least to one degree or another. 10. Add the following background image rule to background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: repeat; Illustration 2: Background repeat If we take the rule from Illustration 2 and preview it in our browser we will see the result is identical to that shown in Image 1. In Illustration 2 we have told the browser how we want our background image handled, rather than relying on the browser to do it for us.

26 Image 2: Setting the image to repeat In each of the above cases, our background image is a dark blue 50px square. The CSS in Illustration 2 has tiled the image at our request, in Illustration 1 the browser simply tiled it because that is what it does by default. Tiling an Image in the "X" I'm sure you will have heard that expression before, but if you're new to CSS I'll explain what it means and how we can implement it. I would guess that the most common reason designers would implement this type of rule would be when they required a banner to run the width of the page. 11. Add the following (in red) to background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: repeat-x; Illustration 3: Tiling in the "X"

27 You will notice that our background-repeat rule has grown slightly in Illustration 3, we have added the following to the repeat section: -x. This tells the browser that we only want our image to repeat from left to right, this is the "X" plane. Preview in a browser will give the results as shown in Image 3. Image 3: Tiling in the "X" As we can see, our image is now tiled from left to right, and is only one row tall. Tiling in the "Y" This is similar to tiling in the "X", instead of creating a horizontal banner, tiling in the "Y" creates a vertical bar. 12. Add the following (in red) to background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: repeat-y; Illustration 4: Tiling in the "Y"

28 Preview in a browser will give the results as shown in Image 4. Image 4: Tiling in the "Y" Background Positioning. The default is to begin repeating the image on the left edge of the body, as we can see from our tiling in the "Y" example. We never declared a position in our CSS, and this placed the vertically repeated image in the default position, the left hand side. If you are still supporting Netscape 4 you should be aware that this browser does not support the positioning property. 13. Add the following (in red) to background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: repeat-y; background-position: right; Illustration 5: The background-position property As you can see, we have added our background-position property to our body rule.

29 Preview in a browser so we can see how this alters the display of our page. Image 5: Tiled in the "Y" and positioned Cool! We can see that by using the background-position property we have been able to move our column from the default position on the left of our page to the right of our page. In all the examples we have used to date, we have been repeating our background image. This is not necessary. What if we want display a single image within our page at a specified location? 14. Change the following (in red) in background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: no-repeat; background-position: right; Illustration 6: Using no-repeat Preview our revised body rule.

30 Image 6: Using the no-repeat property Maybe not entirely what you expected, as the image is right aligned but it's slap bang in the middle. Not to worry, that can easily be changed. Let's examine the following code listing. 15. Change the following (in red) in background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: no-repeat; background-position: top right; Illustration 6: Setting dual values in the position property You will notice our background-position property has changed. We are now using two options within the positional portion of our CSS, top and right. We can see the results of this in Image 7 below.

31 Image 7: Positioning our image to top and right Let's look at an alternative method of positioning our image; let's try % values. 16. Change the following (in red) in background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: no-repeat; background-position: 25% 75%; Illustration 7: Centering our background image With our background position set to 50% 50%, we are able to center our image in the browser window, regardless of viewport size. We can also vary this position by making adjustments to the % values. Try making some adjustments yourself and see what results you can achieve.

32 Image 8: Centering our image in the browser window While we have concentrated our efforts on the body tag, using background images is by no means only restricted to this tag. We can apply them anywhere. The use of background images can enhance your design and they are so very easy to implement with CSS. Adding a background image to an h1 tag. 17. Right mouse on the image below 18. Save image as xhtml_h1_bg.gif in the images folder inside the steps folder. 19. Add the following code (in red) to background.css /* CSS document */ body{ margin:0; padding:0; background-color: #FFFFFF; color: #ff0000; background-image: url(../images/bg.gif); background-repeat: no-repeat; background-position: 25% 75%;

$h1{ color: #FFFFFF; font: bold 2em Arial, Helvetica, sans-serif; padding-top: 14px; background-color: #990000; background-image: url(../images/xhtml_h1_bg.$

33 h1{ color: #FFFFFF; font: bold 2em Arial, Helvetica, sans-serif; padding-top: 14px; background-color: #990000; background-image: url(../images/xhtml_h1_bg.gif); background-repeat: repeat-x; background-position: bottom; padding-bottom: 30px; padding-left: 20px; Note: The h1 has a padding-bottom value that with the background-position bottom, moves the image at the bottom of container. The drop shadow appears below the content. Save and preview in a browser. In other browsers, it may also look like this with the white space across the top of the page...

34 And yet in more browsers, you may not even see the blue box graphic. This is why it always important to check your files in MULTIPLE BROWSERS! If your background page does not look the same as one of the the samples above, you may have missed some coding along the way. To save yourself some time fixing it, you could simply take the code from step 19 and replace all of the current contents in background.css with the entire code (not just the stuff in red) from step 19. Conclusion In this tutorial, we have seen how we can implement a background image into the body and h1tag of the web page. We have looked at the repeating options we have, and we looked at how we can prevent repeating our background images when necessary. CSS is a powerful tool. It gives us global control of our web site elements. Next we'll put that power to use and create an illusion using a background image and CSS

35 Adding background images part II Steps to Success We can use the background property of CSS to add interest to our containter.html page. Instead of using a solid background color for the wrap, let's use a background image 1. Right mouse on the image below and save image as bg_wrap.gif. Save this image into the images folder in steps folder 2. Save and preview in a browser. It should look like this:

3. Save and preview in a browser. It should look like this: Some of you may have noticed that some additional content started to appear in steps 3 and 5.

36 3. Save and preview in a browser. It should look like this: Some of you may have noticed that some additional content started to appear in steps 3 and 5. While we did not provide you with specific instructions for creating this content, given how far you've come with your steps site, we ask that you attempt to create this content on your own (without the provision of cut and past code) to earn the final few marks on your steps site. If you're up to it, go for it...you can do it! If not, you'll only lose a few marks by just moving on. Bottom line here, in the sidenav area, you see navigation links to each of your pages...you can make those easily! They may appear underlined in your browser...this is fine. On the other side (content div), you see the application of some standard html tags to some basic content and also some CSS. You do not actually have to make that phrase 'This is a link to the table page' with 'table page' in red a link. If you do, you will lose the red formatting. However, if you are savvy enough to link table.html to the text 'table page' and still keep it red (by adjusting the way your links look in CSS), you'll get two bonus marks.

37 My PP You have completed all of the tasks required for your steps site for this module. You will now start working on the mypp site. Make sure to close all of the files related to the steps and apply all of the following instructions on this page to the mypp site. MyPP 1. Open index.html from the mypp folder. You should also open up mypp.css from themyppstyles folder. 2. Add div tags to divide your HTML as we just did in Steps to Success. Remember how we got the divs to work in step 16 of the Containers page? You need to apply the code the same way in your mypp html pages for the divs to actually work! Just take the code from the red text to the red text (with red text included) from step 16 and place it into the end of your body tag in index.html. 3. Use mypp.css to control those divs and create a similar layout as we just did in Steps to Success for the containers page by simply adding the code from layout.css (all the code but EXCLUDING THE BODY TAG). You already have CSS for your body in mypp.css. As long as you add the rest of the CSS code from layout, once you have added the divs to your index.html page (step 16 in containers as noted above), they will appear the same way they did in containers.html but without the background images. I'm not concerned about your using background images on the mypp side so if you want to keep your CSS code nice and clean, you can remove those image properties from the code. Or, you can just leave it. If you want to earn the remaining final few points for your MyPP site, you can also add those same divs from the containers page to your employment.html and education.html simply by including the divs tags from step 16 into the end of your body content and then building the current content into those divs (just as you did on index.html). You don't have to do this on your contact page because you already have a table on that page. However, for anyone that goes to the trouble of formatting your table like the 'alttable' class example in the classes file, I might be willing to toss a couple extra points your way. 4. Now, your job in index.html (and education.html and employment.html if you have chosen to add the divs to all 3 pages) is take the already existing content and move it into the divs that are now in your body replacing the content from steps. So, take the content you have and use the divs to lay it out. Then, to make it look different than the layout we used on the steps site, go into the CSS and change the padding, margins, background colors, etc. to make things work a bit better. If it doesn't turn out perfectly, as long as you demonstrated that you attempted to edit the CSS all by yourself, you will get the majority of the credit for this module's MyPP. No one student's will look the same. Just get things laid out using those divs and customize to your liking. If you want to change the CSS in a way that we haven't really done yet, try using our class resources such as W3schools.com and see what you can learn!. If this goes well for you on the

38 index.html page, you may also apply the same divs and layout to employment and education to earn your final few available marks for the mypp site. You don't have to do it all from scratch. Copy and paste if that is easier for you. Don't be afraid to reuse and recycle code. Experiment and have fun. Once you have gotten your css to the point where you are happy, you are done with your webworkshop!!! Once you have completed these final mypp instructions, you are ready to zip your project and submit to my dropbox(if it decides to work). You should zip your entire webworkshop folder, name the zip file 'webworkshop' if it doesn't receive that name automatically, and submit to my dropbox before the deadline.

CSS means Cascading Style Sheets. It is used to style HTML documents.

CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style