In this assignment you will develop a Cascading Style Sheet (CSS) to control, the look, feel, and layout of some provide HTML content.
You will transform from this:
There are several sources of information so you can do the assignment:
Please install the Web Developer Toolkit for your browser from Chris Pedrick and know how to use it to disable CSS styles.
Here are the tasks for this assignment. You can do all the editing for this assignment in a folder on your computer.
Take this this file and copy/paste the contents into index.htm. You will not change this file.
Take this file and copy/paste the contents into blocks.css in the same folder as the above file.
Edit the blocks.css and add the CSS rules so it the HTML file looks like the above image when you view the index.htm file in your browser.
The four boxes have five pixel borders with different colors and five pixels of margin and padding. It is probably simplest to use fixed positioning to get the boxes to be "sticky" to the corners of the screen even when you resize. Make the boxes width be 25% so the width changes as you resize your browser.
Center the link at the top of the page. Use your developer console / inspect element feature of your browser to visit https://www.brainyquote.com/ and figure out the background color, font, and text color they are using an replicate that exactly for the link in your index.htm.
Your CSS must pass the validator at:
https://jigsaw.w3.org/css-validator
For this assignment you will hand in:
Using inspect element on the https://www.brainyquote.com/.
Looking at https://www.brainyquote.com/ using Chris Pedrick's Web Developer add on to turn off all styles:
Passing the CSS validator:
Provided by:
www.wa4e.com