Explore the "cascade"

Read at this link to review the meaning of external, internal and inline style.

The way in which the different sections of style code all affect the final web page is like a waterfall (a cascade).

How do all the style rules come together to style a page? What happens when there are conflicting instructions?

Assignment Due Date: Friday, 2/2/24

First page (just external style):

Choose a topic and some text and images for a quick little web page.

Use the existing "index.html" file in the repl.it project.

Make a nice-looking page that includes, among other things, text-containing elements (p, h2, h3, etc.).

Before linking to an image, you need to bring the image into the repl.it project. In repl.it, to the right of the word "Files," is an icon that looks like 3 dots. Use it to upload a file. Or you can "drag-and-drop" into the "Files" section.

Please use new code for this assignment.

Put all of your style rules into the external style sheet (style.css).

Include all of the following (at least):

Second page (external_internal.html):

I have created a second html file for you in the repl.it project ("external_internal.html").

Repl.it's "Run" button always runs the file named "index.html."

So for you to view the second page the way a user would, you have to use a link from the "index.html" page to get there.

I already created a link from the first file to the second and back again, to show/remind you how that works.

The contents of the "external_internal.html" file should initially be a copy of the first page. So, just copy-paste it. Don't forget to change the title. It should continue linking to the same external style sheet.

Don't change the external SS.

Using internal style, intentionally set up at least three conflicts. For example, you could style the background color DodgerBlue, even though it might already have been styled aqua in the external style sheet. This is so you can see for yourself how the style rules "cascade". In other words, which style is applied when 2 or more rules are giving different style directions?

Third page (all_three.html):

Create a third html file in the repl.it project (Use the "Add files" button to the right of the word "Files."). Name the new file "all_three.html". It should initially be a copy of the second page. Don't forget to change the title. It should continue linking to the same external style sheet.

Don't change the external SS.

The third sheet will start off identical to the second. Then add inline style to change two the same three style rules, yet again. So, for example, instead of DodgerBlue or aqua, you could make the background plum. See how the page looks.

When finished you should have 3 html pages all linked to one single css file.

Add additional links so each page links to the other two.

 

explanation video

 

Rubric

Category minus 15 points minus 10 points minus 5 points Full points
External style sheet 4 or 5 of the ten stylings were done. 6 or 7 of the ten stylings were done. 8 or 9 of the ten stylings were done. All ten bulleted stylings mentioned above were done.
Internal and inline style Some internal OR inline style rules were changed. Some internal and inline style rules were changed OR some pages linked. Some internal and inline style rules were changed; some pages linked. 3 conflicts in internal style; two of those changed again with inline style. Links connect each page to the other two.
Code Quality Code doesn't run as expected and shows they did not study or understand the learning resources Code displays somewhat as expected, minimal understanding of learning resources Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well
Creativity Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) Student shows minimal creativity from base requirement (i.e adds a couple things but not much) Student shows some creativity from base requirement (i.e creates some content, text/headings/etc and some nice styling) Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, lots of styling, etc.)