Basic CSS (two weeks, two labs)
Table of Contents
1. OVERVIEW...... 2 2. LEARNING OBJECTIVES...... 2 3. BEFORE YOU START...... 2 4. REVIEW HTML, LEARN A BIT MORE...... 3 5. LEARN BASIC CSS PROPERTIES...... 4 6. LEARN ABOUT CSS SELECTORS...... 5 7. COPY/PASTE AND STUDY THE STARTER CODE (HTML AND CSS)...... 5 8. LEARN ABOUT SELECTING COLORS...... 7 9. LAB REQUIREMENTS FOR BASIC CSS LAB (WEEK ONE)...... 8 10. LAB REQUIREMENTS FOR BASIC CSS LAB (WEEK TWO)...... 9 11. DEBUGGING ADVICE...... 11 12. FOR MORE HELP...... 11 13. HOMEWORK SUBMISSION...... 11 14. SAMPLE GOAL CODE...... 12
Page 1 Sally Kyvernitis, Temple University 1. Overview
In this lab you will learn how to use basic CSS to style your HTML. You will be given a simple startup file and asked to convert it into a nice looking home page for the web application that you have chosen for your semester project.
Starter File Sample Goal Home Page
You may find it odd that the starter/sample has bold weird colored borders around each design element. Using recognizable borders can help you debug when your layout is not acting as you expect – it helps you understand what’s inside of what.
2. Learning Objectives
By the end of this lab, you should be able to: create an attractively laid out home page using CSS to control aspects such as: o font, font color, link color, background color, background image, alignment use NetBeans for its o HTML syntax checking editor and o source formatting. select colors using tools like colorzilla (a firefox addon) and/or w3School's HTML color mixer. http://www.w3schools.com/tags/ref_colormixer.asp debug HTML layout problems (using colored borders, backtracking and/or divide and conquer).
3. Before You Start
If you didn’t already complete the previous lab, you will have to do that first, before you can start with this lab.
Remember that lab 1 asked you to copy index.php to lab1.php. Do this backup before starting this lab (in which you will modify index.php).
Page 2 Sally Kyvernitis, Temple University 4. Review HTML, Learn a Bit More
These are the HTML tags you learned last lab. Review these, if necessary, by visiting W3Schools: http://www.w3schools.com/html/html_examples.asp
HTML Basic: Examples explained HTML Links: Examples explained A very simple HTML document How to create hyperlinks HTML headings Use an image as a link HTML paragraphs HTML links HTML Lists: Examples explained HTML images An unordered list (bullet items) An ordered list (numbered items) HTML Comments: Insert comments in the HTML source code HTML head Elements: Examples explained Specify a title for a document
Recall from last lab that you learned that an HTML element can be either a block element or an inline element: Block level elements are (by default) displayed in a browser with a newline before and after. Examples:
,
. Inline elements are (by default) displayed with no newline before or after. Examples: , .
Here are some new HTML tags we need to use so that we can create a nice looking layout using CSS. HTML div tag: http://www.w3schools.com/tags/tag_div.asp The HTML
paragraph or
heading), the default behavior of a is to have a new line before and after the box. HTML span tag: http://www.w3schools.com/tags/tag_span.asp The HTML element is a way to mark the beginning and end of something to which you want to apply a style (e.g. bold or italic) - without using a "box". Example: I just LOVE this class !FYI: Other HTML tags that we are not using this lab
HTML Style Tags: HTML Style tags and attributes, such as bold and , are being phased out, so we will never use these. Instead, use CSS to add style. We will be learning basic CSS in this lab. HTML Tables: In the past (before div was added to HTML), web designers had to use tables for layout. Now, we use divs for layout because they provide much more flexibility. You still may want to use a table (for example, inside your content) if you want (1) vertical centering and/or (2) to ensure that that things do not wrap in unexpected ways. We will use tables in a future lab when we display data from a database. HTML Forms: If you want user input, you must put all the user input elements inside a form. We will learn about HTML forms in a future lab.
Page 3 Sally Kyvernitis, Temple University 5. Learn Basic CSS Properties Learn about basic CSS properties by reviewing the list below and visiting: http://www.w3schools.com/css/css_examples.asp
background: background-image: url(images/night.jpg); /* find an image < about 500K so your page doesn’t load too slowly */ background-size:cover; /* stretches the image to cover the background of the window or div */ background-repeat: no-repeat; /* this is so that your bg image does not repeat when it's not big enough */
background-color: red; background-color: #4C5327; /* you can use RGB code to get a richer variety of colors in your palette */ opacity: 0.9; /* opacity means how solid/transparent - this means 90% solid */ font/text specifications: font-family: Georgia, "Times New Roman", Times, serif; /* font family means try to find/use the first font, but if */ font-family: Tahoma, Geneva, sans-serif; /* that font is not on the user’s pc, try then next, etc. */ font-size: 11px; font-weight: bold; letter-spacing: 2px; /* spaces out the letters a bit, provides stylized result */ line-height: 1.5em; /*space between lines of text. "em" means size of a capital M. */ color: #FEF4BC; /* specifies color of the font/text - make sure to contrast it with the BG */ text-shadow: 0px 0px 15px yellow; /* this can help letters stand out against an image background */ text-align: center; /* other options are left, right, etc */ Prevent links from being underlined. text-decoration: none; borders and shadows around boxes: border:1px solid gray; /* specifies width, style, & color of all 4 borders: top, bottom, left, & right */ border-bottom:1px solid gray; /* to specify just one border: top, bottom, left, or right */ border-bottom-style: none; /* e.g., if you want borders on three sides but not on the bottom (top, left or right) */ box-shadow: 0px 0px 15px yellow; /* gives a 3D effect to your divs */ rounded borders: border-radius: 8px; /* W3C standard, all 4 corners rounded with given radius. */ border-top-left-radius: 8px; /* you can also specify a particular corner using top/bottom, left/right. */ Margins (space outside the box) and padding (space inside the box): margin: 5px; /* creates 5 pixels of space all around outside of box */ margin:auto; /* makes the margin the same on left and right, centers the box */ margin-right: 1px; /* you can use top, bottom, left, or right to specify margin for a particular edge */ padding: 3px; /* creates 3 pixels of space all around the inside of box */ padding-bottom: 5px; /* you can use top, bottom, left, or right to specify a particular edge */
Width of
s (and specifying minimum width): width:200px; width:95%; min-width: 650px; /* This prevents the user from sizing their window so small that nav bar links wrap. */ /* If the user tries to size smaller, a horizontal scroll bar kicks in. */ Floating float:left; /* Or could float right... If you float an image, the text wraps around the image like in a magazine. */ /* Otherwise, the image acts like a very big letter that makes it's line very tall - usually looks bad. */ /* You can also float a div, which makes it act like an inline element. */ clear:both; /* float is an unusual property since it affects neighboring elements, not the element being floated. */ /* To stop the floating behavior, use clear:both; */ Page 4 Sally Kyvernitis, Temple University 6. Learn About CSS Selectors
In our internal style sheet (i.e., the code between ) there can be any number of CSS rules. To be clear with terminology, the picture below shows a CSS Rule which has a selector and multiple declarations (each declaration specifying a property and a value).
Different Types of Selectors: You can specify any html tag or tags and define their style like the example below which would make all headers h1, h2, and/or h3 have a Times New Roman font. h1, h2, h3 { font-family: Georgia, "Times New Roman", Times, serif; } body {background-color:black;}
You can make up a class name and apply it to as many html elements as you want to. In the example below, all html elements that have class=”tab” will have a 2px solid green border. .tab {border:2px solid green; }
You can make up an id name and apply it to just one html element (an id is supposed to be unique in the document). In this example, the one html element that has id=”footer” will have a purple background. #footer { background-color:purple; }
There are a few useful “pseudo-classes” in CSS. They are called “pseudo-classes” because the selectors depend on user actions like clicking and hovering. The “link” and “visited” pseudo-classes are applied to a link before and after the link is visited (respectively). The “hover” pseudo-class applies to an html element only when the mouse is hovering over it. a:link {color: white;} /* link text color before visiting */ a:visited {color: green;} /* link text color after visiting */ tab:hover {background-color: yellow;} /* kicks in only when user hovers over html element */
You can have a compound selector which applies to something which is in something else. In the example below the selector applies to links, but only those that are inside an HTML element with class=”tab”. .tab a:link {color: white;} /* link text color before visiting any link in a tab */
7. Copy/Paste and Study the Starter Code (HTML and CSS)
If you forgot to back up your index page from the previous lab, do that now (copy index.php to lab1.php). Next, copy and paste the code (on the next page) into your home file (index.php). Remember that you always use the project from the previous week -- do not start a new project each week.
Carefully study the HTML and the CSS in the sample code on the next page.
Page 5 Sally Kyvernitis, Temple University
** Your Web Site Title **
** Your Web Site Title ** Your content goes here!
Page 6 Sally Kyvernitis, Temple University 8. Learn About Selecting Colors
You do not want your site to look like it was created from a box of 8 crayons, but how do you select professional looking, realistic colors? Read on… A RGB hexadecimal color codes is a six digit number where each digit ranges from 0..F (0..9 then A..F). The first two digits say how much Red, the next two are for Green, then the last two are for Blue. Here are some color numbers so you can get used to it: #FF0000 - Red #0000FF - Blue #000000 - Black, the absence of color #FFFFFF - White (all colors maxed out) Wherever all 6 digits are the same (e.g. #333333, #AAAAAA), it is some shade of Gray.
You’ll need a little help to work with colors (unless you already know of some other way). ColorZilla icon 1. From within Firefox, google “ColorZilla Firefox AddOn”, then do the install (quick/easy/free). Note the ColorZilla icon that’s now embedded in your Firefox window (upper right of screen). 2. Visit this page to blend colors: http://www.w3schools.com/tags/ref_colormixer.asp
To find professional looking colors, start by selecting an image first, one that is relevant and has colors you like for your page design. Put this image in your page (even if you don’t intend to keep it there). When you render your page, click on the ColorZilla eyedropper icon and move your mouse around the image, ColorZilla shows you the RGB code where the mouse is. You can copy/paste this number right into your CSS code. I recommend that you select two colors (from the image) and use as your color scheme. This is a good start, but to get even more professional looking, learn how to blend colors (by visiting the color mixer page mentioned above). To make a color lighter, blend it with white. To make a color darker, blend it with black. You can blend between the two colors you selected for you color scheme. To make the color less saturated (more gray), decrease the difference between the R, the G, and the B values. To make it more saturated (stronger color), increase the differences between the R G and B. you two
Page 7 Sally Kyvernitis, Temple University 9. Lab Requirements for Basic CSS Lab (week one)
LAYOUT: 1. Your work in this lab will be mostly CSS coding. Keep the HTML pretty much as it was in the sample code, i.e., leave the divs as they are nested, leave the names of the classes and ids, as they were. CONTENT: 1. Your web site title shall appear in the title area of your page and also in the
tag in the <head> (this is what shows in the browser tab). 2. The nav links shall remain the same as in the starter file (Home, Products, Customers, Purchases, Contact, Labs), 3. The text in your content area shall entice users to patronize your web site. 4. Your content shall include at least one image. 5. Your content shall include at least one external link, e.g., <a href="http://www.temple.com">Temple U</a>, but to something that is relevant to your web site. 6. Your footer shall include your name. NAV BAR: 7. Your nav bar links shall be a focal point within your page (no timid font weight or size please). FONTS and COLORS: 8. All text shall be readable against its background - this includes link colors before and after clicking. There shall be no dark text on dark background, no light on light either. 9. Small fonts shall use a san-serif font (no tails, e.g., Arial) - for readability. Large text can use serif or san-serif. (Serif is French for “tail”. Times New Roman is a serif font because there are “tails” at the edges of the letters.) 10. Effective use of “white space” means use blank space to enhance readability, but don’t waste space. 11. Your page shall use padding and/or margins so that no text is too close to an edge. 12. Your page shall use realistic/subtle colors that blend well, as discussed in section 8. FLUID DESIGN: 13. Your page shall employ fluid design which means that your page adapts well to all different browser widths without unwanted effects (like wrapping nav buttons or blank areas introduced by floating text). Use min-width (on your container) to prevent these unwanted effects. The min-width shall not be larger than 1000 pixels (smaller min-width is more fluid and thus more desirable). Test this by sizing your browser window smaller and smaller. The size of the min-width determines when the horizontal scroll bar will kick in, e.g., before the nav buttons start wrapping. SIZE OF IMAGE FILES: 14. Your web site shall have no image files larger than about 500K. If you do, use MSPaint (or other image editing program) to reduce the file size. This is so that your page does not render slowly for first time visitors.</p><p>Page 8 Sally Kyvernitis, Temple University CODING STYLE: 15. Your HTML/CSS code shall be properly indented (NetBeans: "Source - Format"). Your code shall use good naming practices, e.g., CSS selector names are representative (as was done in the starter code). Use one CSS comment /* your comment goes here */ 16. Your HTML/CSS code shall be syntactically correct (nothing red when we View Source from Firefox). 17. Copy index.php to basicCSS-week1.php </p><p>10. Lab Requirements for Basic CSS Lab (week two) You may start off with the page from last week or you may start over (your choice). Again, you will be working mostly in CSS. This week’s page shall meet all the requirements from last week, plus the new requirements below. Remember to copy index.php to basicCSS-week1.php before you begin. NAV BAR: 1. Your nav bar links shall not be underlined, but the links in your content shall be underlined. Section 6 shows you how to specify no underlining (text-decoration). Section 7 tells you how to use compound selectors to specify only the links inside of your nav bar – not all links. 2. The background color of a tab shall change when the user hovers their mouse over that tab (see pseudo-classes explained in section 7, the hover property). BACKGROUND: 3. Your body shall have a background image that works well with your layout, even when the browser is resized. 4. Select a background color (for your body) that compliments your bg image (color shows below the bg image). This bg color "kicks in" whenever the image is unable to cover the size of the browser window. If you will have text directly on this image, select an image that does not have too much contrast (or you won’t be able to read the text). SPECIAL EFFECTS: 5. Use rounded corners somewhere. 6. Use box shadow somewhere. 7. Use some opacity (transparency) somewhere. Keep everything readable. FONTS and COLORS: 8. Your page shall use at least one google font (and not just the one in the sample code). Visit this page to find one you like. https://www.google.com/fonts Remember that fonts can be unpredictable since (if you do NOT use google fonts) they rely upon whatever fonts the user may have installed on their PC. 9. Use text-shadow somewhere. Text-shadow can make text more readable when it is on a background image. GENERAL PROFESSIONALISM 10. Even if you have met all the requirements, you need to make your page look like it belongs to a "real web site". You were given two weeks to work on this so that you could experiment and create something special. MISC 11. Copy index.php to basicCSS-week2.php</p><p>Page 9 Sally Kyvernitis, Temple University Here is an example of a web page that meets all the requirements. You may like to look at its CSS code, which is at the end of this document.</p><p>Page 10 Sally Kyvernitis, Temple University 11. Debugging Advice</p><p>Each lab, I try to provide advice about how to debug . For this week, your debugging tools will be: Save then view your page after each little change. The more changes you make before viewing, the more likely you are to get into trouble. Every time you modify your code, use Netbeans "Source - Format" option to understand any HTML nesting errors. Make frequent backups, especially when you feel that you have made substantial progress. The Netbeans context sensitive editor provides error messages as you type (hover your mouse over the red mark at the left of the error line to see explanation of the error). This includes HTML syntax errors as well as CSS syntax errors. As a double check, right click from firefox and “View Source” to be sure there are no red errors in there either. Use colored borders (at least temporarily, even if they are ugly) to try to figure out which divs contain which elements - and where the padding or margins are. Finally, ask for help early if you are stuck. You can email me your question along with a zip file of your project folder. Be specific with your question, tell me what you are trying to accomplish, describe the error you are experiencing, and provide your phone number in case the best way to answer your question is verbally. Don’t try to save time by skipping the tutorials or not studying the sample code. If you do, you will waste a lot of time on “trial and error” (haste makes waste), you will have to eventually come to me to figure out how you got so far off the path, and you will not do well in the weekly quiz. So, please take the time to understand each example. The best way to understand an example is to observe its functionality, study its code, then change the code and see if you get the result you expected.</p><p>12. For More Help</p><p>For more help on HTML and CSS, check the slides posted in blackboard and/or go to W3Schools. link to HTML try it yourself examples: http://www.w3schools.com/html/html_examples.asp link to CSS try it yourself examples: http://www.w3schools.com/css/css_examples.asp Google what your problem is -- you'd be surprised how helpful other programmers have been.</p><p>13. Homework Submission</p><p>Homework submission is the same as last week: Must publish and submit zip file in order for the homework to be accepted/graded. You can submit up to one week late (20% penalty). Remember to use good you are not able to do both by the due date, you have one more week You </p><p>Page 11 Sally Kyvernitis, Temple University 14. Sample Goal Code</p><p><!DOCTYPE html> <html> <head> <title>Xenos Cyprus Travel
Xenos Cyprus Travel Escape to the sunny island of Cyprus! Your vacation can be relaxing... or exciting... Find your perfect vacation by selecting from our wide range of Cyprus packages, all designed to satisfy even the most demanding vacationer.
FYI: Other HTML tags that we are not using this lab
HTML Style Tags: HTML Style tags and attributes, such as bold and , are being phased out, so we will never use these. Instead, use CSS to add style. We will be learning basic CSS in this lab. HTML Tables: In the past (before div was added to HTML), web designers had to use tables for layout. Now, we use divs for layout because they provide much more flexibility. You still may want to use a table (for example, inside your content) if you want (1) vertical centering and/or (2) to ensure that that things do not wrap in unexpected ways. We will use tables in a future lab when we display data from a database. HTML Forms: If you want user input, you must put all the user input elements inside a form. We will learn about HTML forms in a future lab.
Page 3 Sally Kyvernitis, Temple University 5. Learn Basic CSS Properties Learn about basic CSS properties by reviewing the list below and visiting: http://www.w3schools.com/css/css_examples.asp
background: background-image: url(images/night.jpg); /* find an image < about 500K so your page doesn’t load too slowly */ background-size:cover; /* stretches the image to cover the background of the window or div */ background-repeat: no-repeat; /* this is so that your bg image does not repeat when it's not big enough */
background-color: red; background-color: #4C5327; /* you can use RGB code to get a richer variety of colors in your palette */ opacity: 0.9; /* opacity means how solid/transparent - this means 90% solid */ font/text specifications: font-family: Georgia, "Times New Roman", Times, serif; /* font family means try to find/use the first font, but if */ font-family: Tahoma, Geneva, sans-serif; /* that font is not on the user’s pc, try then next, etc. */ font-size: 11px; font-weight: bold; letter-spacing: 2px; /* spaces out the letters a bit, provides stylized result */ line-height: 1.5em; /*space between lines of text. "em" means size of a capital M. */ color: #FEF4BC; /* specifies color of the font/text - make sure to contrast it with the BG */ text-shadow: 0px 0px 15px yellow; /* this can help letters stand out against an image background */ text-align: center; /* other options are left, right, etc */ Prevent links from being underlined. text-decoration: none; borders and shadows around boxes: border:1px solid gray; /* specifies width, style, & color of all 4 borders: top, bottom, left, & right */ border-bottom:1px solid gray; /* to specify just one border: top, bottom, left, or right */ border-bottom-style: none; /* e.g., if you want borders on three sides but not on the bottom (top, left or right) */ box-shadow: 0px 0px 15px yellow; /* gives a 3D effect to your divs */ rounded borders: border-radius: 8px; /* W3C standard, all 4 corners rounded with given radius. */ border-top-left-radius: 8px; /* you can also specify a particular corner using top/bottom, left/right. */ Margins (space outside the box) and padding (space inside the box): margin: 5px; /* creates 5 pixels of space all around outside of box */ margin:auto; /* makes the margin the same on left and right, centers the box */ margin-right: 1px; /* you can use top, bottom, left, or right to specify margin for a particular edge */ padding: 3px; /* creates 3 pixels of space all around the inside of box */ padding-bottom: 5px; /* you can use top, bottom, left, or right to specify a particular edge */
Width of
Page 4 Sally Kyvernitis, Temple University 6. Learn About CSS Selectors
In our internal style sheet (i.e., the code between ) there can be any number of CSS rules. To be clear with terminology, the picture below shows a CSS Rule which has a selector and multiple declarations (each declaration specifying a property and a value).
Different Types of Selectors: You can specify any html tag or tags and define their style like the example below which would make all headers h1, h2, and/or h3 have a Times New Roman font. h1, h2, h3 { font-family: Georgia, "Times New Roman", Times, serif; } body {background-color:black;}
You can make up a class name and apply it to as many html elements as you want to. In the example below, all html elements that have class=”tab” will have a 2px solid green border. .tab {border:2px solid green; }
You can make up an id name and apply it to just one html element (an id is supposed to be unique in the document). In this example, the one html element that has id=”footer” will have a purple background. #footer { background-color:purple; }
There are a few useful “pseudo-classes” in CSS. They are called “pseudo-classes” because the selectors depend on user actions like clicking and hovering. The “link” and “visited” pseudo-classes are applied to a link before and after the link is visited (respectively). The “hover” pseudo-class applies to an html element only when the mouse is hovering over it. a:link {color: white;} /* link text color before visiting */ a:visited {color: green;} /* link text color after visiting */ tab:hover {background-color: yellow;} /* kicks in only when user hovers over html element */
You can have a compound selector which applies to something which is in something else. In the example below the selector applies to links, but only those that are inside an HTML element with class=”tab”. .tab a:link {color: white;} /* link text color before visiting any link in a tab */
7. Copy/Paste and Study the Starter Code (HTML and CSS)
If you forgot to back up your index page from the previous lab, do that now (copy index.php to lab1.php). Next, copy and paste the code (on the next page) into your home file (index.php). Remember that you always use the project from the previous week -- do not start a new project each week.
Carefully study the HTML and the CSS in the sample code on the next page.
Page 5 Sally Kyvernitis, Temple University
Your content goes here!
Page 6 Sally Kyvernitis, Temple University 8. Learn About Selecting Colors
You do not want your site to look like it was created from a box of 8 crayons, but how do you select professional looking, realistic colors? Read on… A RGB hexadecimal color codes is a six digit number where each digit ranges from 0..F (0..9 then A..F). The first two digits say how much Red, the next two are for Green, then the last two are for Blue. Here are some color numbers so you can get used to it: #FF0000 - Red #0000FF - Blue #000000 - Black, the absence of color #FFFFFF - White (all colors maxed out) Wherever all 6 digits are the same (e.g. #333333, #AAAAAA), it is some shade of Gray.
You’ll need a little help to work with colors (unless you already know of some other way). ColorZilla icon 1. From within Firefox, google “ColorZilla Firefox AddOn”, then do the install (quick/easy/free). Note the ColorZilla icon that’s now embedded in your Firefox window (upper right of screen). 2. Visit this page to blend colors: http://www.w3schools.com/tags/ref_colormixer.asp
To find professional looking colors, start by selecting an image first, one that is relevant and has colors you like for your page design. Put this image in your page (even if you don’t intend to keep it there). When you render your page, click on the ColorZilla eyedropper icon and move your mouse around the image, ColorZilla shows you the RGB code where the mouse is. You can copy/paste this number right into your CSS code. I recommend that you select two colors (from the image) and use as your color scheme. This is a good start, but to get even more professional looking, learn how to blend colors (by visiting the color mixer page mentioned above). To make a color lighter, blend it with white. To make a color darker, blend it with black. You can blend between the two colors you selected for you color scheme. To make the color less saturated (more gray), decrease the difference between the R, the G, and the B values. To make it more saturated (stronger color), increase the differences between the R G and B. you two
Page 7 Sally Kyvernitis, Temple University 9. Lab Requirements for Basic CSS Lab (week one)
LAYOUT: 1. Your work in this lab will be mostly CSS coding. Keep the HTML pretty much as it was in the sample code, i.e., leave the divs as they are nested, leave the names of the classes and ids, as they were. CONTENT: 1. Your web site title shall appear in the title area of your page and also in the
Escape to the sunny island of Cyprus! Your vacation can be relaxing... or exciting... Find your perfect vacation by selecting from our wide range of Cyprus packages, all designed to satisfy even the most demanding vacationer.