Every browser shows a web page slightly different from the next. If browsers were all the same, we might only ever use just one. But that also means that web designers have to try and make sure their pages are as browser-friendly as possible. For example, your text may show up in one font on Google Chrome, but another font on Mozilla Firefox. This lesson is designed to teach you how to work with font and prepare your page to be browser-friendly.

Below are some helpful tips and resources that you can use during and after this lesson is over.

CSS Style Tips to Remember

• Not all browsers read fonts the same, so it’s good to have multiple font-families (separated by commas) just in case the first font you chose isn’t available to that browser.
• When you have a font-family with multiple words (like “Times New Roman”), you must surround it with quotes.
• Fonts can be divided into family names (like times, courier, arial) and generic families (like serif or cursive).
• When setting the font-size for a specific element, it is better to use percentages instead of px or em so that the size will be contained within the parent element.
• When setting the font-weight, “bold” is a common value, but you can scale the boldness using multiples of 100 all the way to 900 (such as bold:300;).
• In CSS, Element Selectors are the simplest selectors because they actually select an HTML element and style all of them the same (such as h1 { } or p { }).
• In CSS, ID Selectors only add style to an id attribute within a specific HTML element and they begin with a hashtag (such as #box1 { } or #area3 { }). For example, in CSS, you might see something like #box1 and in the HTML you would see some element with an id=”box1″ attribute.
• Class Selectors only style a class attribute within a specific HTML element and when written in CSS, they begin with a period. For example, in CSS, you might see something like .topline and in the HTML you would see some element with a class=”topline” attribute.
• An ID Selector (#something) should only be used on one element in a single page.
• A Class Selector (.something) can be used on multiple elements in single page.

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called CSS Fundamentals. Inside of this course, watch the following lessons (you will need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many sections you complete and how many questions you answer correctly after each section.

7. font-family
8. font-size
9. font-style
10. font-weight
11. font-variant

Assignment #2 (2 Points): Design Project

During the SoloLearn videos, you learned about different properties that you can use with font (font-family, font-size, font-style, font-weight, and font-variant). During today’s design, you will learn how to work with all of these font properties, but you will also study the various types of selectors that are used in CSS coding. Here is an example of what you will be designing. Follow the directions below to complete the design project.

• STEP 1: Go into your CSS subfolder and create a new folder called 6-2_colormatters like this.
• STEP 2: Inside of your new 6-2_colormatters folder, create three HTML documents (red.html, green.html, and blue.html) and one CSS document (style.css).
• STEP 3: Open your red.html document and type this source code. Be sure to add appropriate sites and paragraphs where the code requires. You’ll have to do a little bit of Google searching.
• STEP 4: Open your green.html document, then copy/paste your code from red.html and change these circled values from “red” to “green” since this is a page based on a different primary color.
• STEP 5: Open your blue.html document and repeat the last step, changing any color name from “red” or “green” to “blue,” since this is a page based on a different primary color.
• STEP 6: Now open your style.css document and type this code. Be sure to get the appropriate images and colors as needed by the code.
• STEP 7: Check to make sure that your pages work correctly in Firefox or Chrome.
• STEP 8: Notice in your style.css file that there are several font-related properties. Look through the Web-Friendly Fonts and make some changes to the font-family, then change some of the other font properties.
• STEP 9: Study/Examine the following Selectors and make sure you know how/why they work:
  • ELEMENT SELECTORS:
    These are the most common style selectors as found in your CSS and your HTML.
  • ID SELECTORS:
    These are the selectors most used in section elements (header, article, footer, etc) as found in your CSS and your HTML. Notice that in CSS, every ID selector begins with a hashtag (#).
  • CLASS SELECTORS:
    These are the selectors most used in standard elements (h1, p, a, etc) as found in your CSS and your HTML. Notice that in CSS, every Class Selector begins with a period (.).

Assignment #3 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link. Remember that since you built a three page website, you do not need to provide a link to all three pages. All you need to provide is a link to the first page, which already links to the other pages. Also, remember that the links will have to point into the folder you made.

Assignment #4 (1 Point): Review and Quiz
Look over the 6.2 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 6.2, and take it. This is a way for you to show the teacher that you have finished this lesson.

If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 6.3. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.