Pre-lab

Pre-lab Reading

• http://en.wikipedia.org/wiki/CSS

Pre-lab Activity

1. Visit W3C CSS Tutorial
2. Follow along from the CSS Intro to the Chapter on Padding

Use this activity to answer the Pre-lab Questions. Be sure to complete the activity and answer the pre-lab questions in Blackboard before the start of the lab period.

In-lab

Note that these instructions are not always detailed. You must figure out some of the details by reading the textbook and investigating online sources. You can always ask your instructor for help. If your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.

Preparation

• Always make sure you save your lab file in the appropriate folder, i.e., lab2 for this week.
• For file names, only use lowercase letter and never use spaces.

Notepad++

For the first few labs, I will show you some of the features of Notepad++, which we will use for editing. At home you can use the editor or IDE of your choice. Again, Eclipse and NetBeans are popular ones and I recommend using multiple editors and IDE's to see which one you like the best.

Images & Gimp

For certain labs, I will show and explain some basics about image editing and Gimp, which we will use for editing images. Gimp is a free and powerful editor, but it is not user friendly. Feel free to experiment with GIMP as I show you how to do common image editing tasks.

In-lab Activity

You can work together with your partner during lab. But after the lab session is over, you must complete this activity independently. Be sure to email your partner relevant files before the end of the lab session. You should not collaborate with your partner outside of the designated two-hour lab session.

Part I: Player Page

• Right mouse click on the links below and use "save as" to save them in your lab2 folder:
  1. index.css - This will be the main style sheet for our NBA website
  2. anthony_carmelo.html - Completed lab 1 file with extra markup (article, sections, classes and ids)
  3. ny_knicks.html - Completed lab 1 file with extra markup (article, sections, classes and ids)
  4. anthony_carmelo.jpg
• Open the new anthony_carmelo.html in Notepad++.
• Examine the HTML markup and marvel at the structure, use of indenting, and rich semantic markup
• Open the new index.css in Notepad++.
• Notice that this file includes lots of comments that will help you answer questions.
• You will use these files to experiment with CSS and answer questions.
• Be sure to use an updated version of Chrome, Firefox or Safari. Do not use Internet Explorer (IE) because it is still unclear if IE fully and correctly supports all CSS3 properties.
• In Notepad++, create a new file called lab2.html
• Answer the following questions, in your lab2.html document. This document should be formatted as HTML5 and should appropriately use h1 for the page name, h2 for your name, and ol and li to format your answers.

Questions

1. What method (embedded, externally linked, inline) are we using to add style to anthony_carmelo.html?
2. Why are we using this method instead of the others?
3. To link a stylesheet what are the exact names of the three HTML attributes used to specify the format, relation, and location of the stylesheet?
4. Look at index.css line 9, what is the comma used for exactly?
5. Change the font color of the body to red, i.e., body { color: red; }. Save index.css. Open anthony_carmelo.html in a browser. Did all the text change to red? What text did not change to red? Change the font color back. Red is not a good color for the body text.
6. Change the article margin so it is just margin: 30px;. Save index.css. Reload anthony_carmelo.html in a browser and make it full screen. How did this change the layout of the article. Change it back. Centered pages are more common and generally regarded as more appealing.
7. On line 46, you will see the words section, stats, and info. Which one of these is an html element, which one is a class name, and which one is an id name?
8. What do dots (.) and pounds (#) indicate?
9. Specifying the style of two elements with one declaration, i.e., header, footer {color: #EEF;} helps you write less code, but there is another perhaps more important reason to style two or more elements with one declaration? Describe the reason.
10. On line 82, you will see a:hover and a:focus. What does a:hover really refer to? In other words, what exactly is being colored red and when does this happen?
11. Add the code to make the font-size increase for a:hover, i.e., a:hover {font-size: 5em;}. Save index.css. Reload anthony_carmelo.html in a browser. Now, move your mouse pointer over the hyperlink. Do you think this visual behavior is annoying? Why or why not?
12. On line 92, we changed the font size of the h1 tag to 3em. Read the CSS comment. What is 3em in pts (i.e., what is the pt value of a 3em font)? By the way, em's are considered more intuitive because it uses 1.0 as the default font. Thus, you know that 3em is three times the default font.
13. Using the em unit of measure, how would you make the h1 into a 6pt font?
14. On line 102, we define a style for header h2. What exactly are we styling?
15. On line 115, we define a style for header h3. Change this to just h3, i.e., remove "header" Save index.css. Reload anthony_carmelo.html in a browser. Notice that the "INFO" header changed. Based on these observations, why is it important to be able specify context?
16. For decorating text, some properties use the word "font", i.e., font-size, font-weight, etc. But, some use the word "text", i.e., text-transform, text-align, etc. What property is used to make text italic? Why do you think they chose to use the word "font" instead of "text?"
17. Rather than display the player position (h3) and player team (h4) on separate lines, I displayed them on the same line. What CSS property did I change to enable block elements (h3 and h4) to display on the same line?
18. Can CSS be used to actually add text to a page (see line 126)?
19. The image on the page is floated to the right and has margins on the bottom and left so that the surrounding text does not get too close to the image border. Change the image so that it floats left and switch the margin to the right. Show me the code for changing the margins. Specifically, you want to change the margins so you have zero margin on the top and left, and 15px of margin on the bottom and right. Make the change using only one margin declaration.
20. The image borders are drawn to make it look like there is a shadow on the bottom right. Both the thickness and color are changed to create this effect. Change the thickness and color of the borders so it looks like the shadow is on the top left. Show your CSS code in you answer.
21. The glossary contains dt and dd elements that float left which allows them to flow from left to right rather than top to bottom. Remove overflow: auto. Save index.css. Reload anthony_carmelo.html in a browser. How did this change the glossary and why did this happen?
22. I switched the unordered list to use square bullets instead of round bullets. To do this, I selected ul li. What problem would occur if I selected just li?
23. On lines 240 - 317, we use complex CSS to style the tables. Much of the code involves styling the border, specifically something called the border radius. How does increasing the border radius impact the appearance of the tables? Change the values and experiment before you answer?
24. On lines 325 - 352, we use very complex CSS. What are we styling and how exactly do we apply this style in the HTML document?
25. On lines 325 - 352, we use 27 lines of CSS code to style just one element. Doesn't this seem a little excessive? Why exactly is this code important? Hint: read the comments.

Part II: Team Page

1. Examine the code for ny_knicks.html and notice how there are sections for team record, leaders, next_game, etc.
2. Open index.css and add the following styles to improve the presentation of the team pages, i.e., ny_knicks.html.
3. Widen the width of the main article, but only if the article is for a team.
   Add the following code anywhere inside index.css

   article#team {
   	width: 1000px;
   }
   

   Note that article is a semantic tag that can be used to contain large amounts of content. In this case, the player page and team page are considered different types of articles. Note that we could have used a div tag instead of an article.
4. Add the CSS code so that the record, leaders, and ranking sections float to the right with a width of 300px

   section#record, section#leaders, section#ranking {
   	width: 300px;
   	float: right; /* Move it to the right */
   	clear: right; /* Move it below other items that float right */
   }
   

   The code above moves three of the five sections to the right in a fixed column (300px width). The next_game and roster sections can now flow up to the top of the page. Giving elements fixed width and then floating them right or left is the most common way to create multi-column layouts. Content is often put in sections or divisions (div) so semantic blocks of content can be moved as a group to create different layouts.
5. Add the CSS code to modify the h3 of only the record section

   section#record h3 {
   	font-size: 1.2em;
   	border-bottom:  1px solid #ccc;
   	margin-top: 24px;
   }
   

   The style sheet makes all the h3 tags very large (1.8em or 21.6pt) font size and they look too big when floated to the right in a narrow 300px column. Thus, we reduce the font size to 1.2em or 14.4pt. We also add a bottom border line and some top margin so the beginning and end of the sections are more obvious.
6. Change the CSS selector above, so that the leaders and ranking sections use the same exact styles as the record section
7. Add embedded CSS code directly to head of ny_knicks.html

   	<style>
   		header, footer {
   			background-color: #0053a0;
   			color: #f36f21;
   		}
   	</style>
   

   The code above decorates the header and footer with the Knicks official colors. Think about why we would not add this code to the main style sheet which is used by all the players and teams.
8. Add inline CSS code directly to the strong tag in the "next game" section of ny_knicks.html

     <strong style="color: #008800">@ Boston</strong>
   

   The code above decorates this specific strong tag's test is green (color of Boston Celtics). The strong tag is used throughout this specific page but we only want to change the color of this one instance.
9. In index.css change the margin of the table from margin: 20px; to margin:0px 20px 20px 20px;. This allows the header to move closer to the table. When margin has 4 parameters they define the top, right, bottom, and left margin (clockwise from top).
10. Change the current roster h3 header so that it is more consistent with the table

    section#roster h3 {
    	font-family: 'Libre Baskerville', sans-serif;
    	font-size: 1.1em;
    	font-weight: bold;
    	text-align: center;
    	margin: 10px 20px 0px;
    	padding: 10px 0px 5px;
    	background: #eef;
    	background: -webkit-gradient(linear, left top, left bottom, from(#ddf), to(#eef));
    	background: -moz-linear-gradient(top,  #ddf,  #eef);
    	border-top-left-radius:5px;
    	border-top-right-radius:5px;
    }
    

    The code above uses styles similar to the table. Alternatively, we could have used a table caption but I wanted to show you how to make an element (h)3 look like it is part of another element (table). Well-designed web pages, have very meaningful semantic HTML markup where the presentation is entirely controlled with CSS.
11. Add the following code to make the next_game section more compact and consistent with the table.

    section#next_game {
    	width: 580px;
    	margin: 20px;
    	padding: 10px 20px;
    	background: #88f;
    	background: -webkit-gradient(linear, left top, right top, from(#88f), to(#eef));
    	background: -moz-linear-gradient(left,  #88f,  #eef);
    	border-radius: 10px;
    	overflow: auto;
    }
    section#next_game h3 {
    	color: white;
    	margin: 0px;
    	font-size: 1.5em;
    	float: left;
    }
    section#next_game span.game {
    	font-size: 1.2em;
    	float: right;
    }
    

    The code above demonstrates many CSS properties worth studying. In particular: width, font-size, margin, padding, color, and float.

Deliverables

Submit in Blackboard a single zip files that contains your entire lab2 folder. Be sure the following files were created.

1. lab2/lab2.html - Your answers formatted as a validated HTML5 document
2. lab2/index.css - Your modified style sheet
3. lab2/ny_knicks.html - To show your inline and embedded styles.

Important: Make sure these files are in your lab2 folder, so you can zip/compress the entire lab2 folder. Then, submit the zip/archive file.