Learning Goal #6
Students will be able to design a collection of original websites with creative section elements managed through an external, cascading style sheet.
PART 1: Deadlines
Read MoreBelow are your deadlines for Learning Goal #6: Mastering the Box Model with CSS3. If you complete approximately 1.5 lessons per week, you should be able to keep up with the deadlines.
- April 12, 2019:
5 Lessons Complete (6.1 through 6.5) - May 3, 2019:
6 Lessons Complete (6.6 through 6.11) - TO BE DETERMINED (May 2019):
ICT Final Exam (Web Essentials) - May 6, 2019 through May 28, 2019:
LG6 Final Project
REMINDER: In order to earn an A for each lesson, you need to complete each assignment within the lessons. At the end of each lesson, you will take a short quiz on eCampus and confirm that you have done all the assignments. If you only do some of the assignments, you can still do okay, but it is in your best interest to complete them all. Your grade depends on how much you get done within the time you are given.
PART 2: Overview
Read MoreCSS is the best way to manage the look and style of an HTML document. The letters stand for Cascading Style Sheets and they refer to style sheets that cascade (flow down) through several HTML documents. Even though CSS usually has to do with a separate style document, it can also refer to inline styling (where style is written into a specific line with a specific tag) and internal styling (where style is written into the head of an HTML document).
Below are some helpful tips and resources that you can use during and after this lesson is over.
CSS Style Tips to Remember
- Inline Styling means that you type a style directly into a specific tag on a specific line of code.
- Internal or Embedded Styling means that you type all of the style from a single HTML document into the head element of that same document.
- External or Cascade Styling (also known as CSS) means that you create a separate document for all the styling that will be used on multiple web pages.
- With all internal and external styling, there will always be a selector (the element name that you want to style), curly brackets (to enclose any style commands), properties (the thing you want to change), values (the variable that can be changed), colons (separating properties/values), and semicolons (separating a complete declaration of properties/values).
- Internal and External Styling is almost always more readable if you place the declarations (properties/values) on separate lines.
- If you need to leave a comment for yourself in a CSS document, you must use /* to open the comment and */ to close the comment.
- Style inheritance means that a new element will “inherit” whatever style properties were given to the parent elements unless the new element is styled differently.
- To connect a style sheet to an HTML document, the HTML document must have a link in the head element that looks something like this.
PART 3: Assignments
Read MoreAssignment #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.
- What is CSS?
- Inline, Embedded, External CSS
- CSS Rules and Selectors
- CSS Comments
- Style Cascade and Inheritance
- Module 1 Quiz
Assignment #2 (1 Point): Design Project
During Learning Goal #5, you experimented with inline and internal styles. For most of this learning goal, you will be creating multi-page websites while controlling ALL of your style in a separate document called style.css (external CSS). For this lesson, you will be creating a simple three page website with a box of text that changes color on each page. Here is an example of what you will be designing. Follow the directions below to complete a simple color swap website.
- STEP 1: Go into your CSS subfolder (it should be empty) and create a new folder called 6-1_colorswap like this.
- STEP 2: Inside of your 6-1_colorswap folder, use Notepad++ to create and save four files called page1.html, page2.html, page3.html, and style.css like this.
- STEP 3: In your page1.html file, type out this source code, then save your work.
- STEP 4: In your page2.html file, copy/paste the code from page1.html, then change two attributes like this, then save your work.
- STEP 5: In your page3.html file, follow the same instructions from Step 4.
- STEP 6: In your style.css file, type out this style code, then save your work.
- STEP 7: Open page1.html with a browser and answer three questions: (1) Do all the pages link back and forth? (2) Do the buttons stay black for the pages that I’m on? (3) Does the background of the article section change colors on each page?
- STEP 8: Do not ask for a password to 6.2 unless you can answer each of these questions with a YES and you can explain why the pages work the way they do.
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. But here is the new exception. 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.1 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.1, 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.2. 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.