Wednesday, January 2, 2019

This page will focus on CSS Class and CSS ID within the IQgo page.

This page focuses on the differences between Completed work,
and lists without the finishing touch.


.................... Let's start by showing a standard sequence.
.................... It's using the basic features found on IQGO.





Example 2
IT makes a huge difference when a tiny CSS ID code is removed.
We're removing
<div id="container5">
and
<div class="container6">








Example 3
We're making a very minor change. But, it transforms the entire backdrop.






Example 4
We can change this to any color.
We'll choose a tacky green to emphasize the point






Example 5
In this case; I've removed the inner layer altogether.
It still looks okay. Just less elaborate.

And, of course, this Grayish color can be changed as well.





Example 6
Although we prefer to only alter the inner field,
We'll change the outer field for demonstrative purposes only.
So, the inner field (DIV CLASS) remains;
The outer field (DIV ID) will become yellow.






Example 7
Ultimately; we prefer to make minor changes.
choose a milder inner field color. we'll call it "container-blueboy".
Plus, let's narrow the width.






Example 8
This example is identical to the original choice.
Also, we chose to name both ID and CLASS 'container5' and 'container6' prospectively.
Perhaps, we should've lengthened the names to "outer-container", and "inner-container".







Example 9
finally:
we can also alter the width, border-radius, border color and size, and other aspects.
(Note: I chose the names #finalexample-ID and .finalexample-CLASS.








If you remove the containers;
it makes a huge difference on the finished product.







That's why I prefer the ID and CLASS containers for versatility;
and cosmetic flexibility for any future changes.





------------------------------------------------



In theory, we could widen the entire field, or, narrow the boxes & rows.
(We usually create a narrow container in order to accommodate mobile devices & smaller screens.)
but, the entire field can become large, if desired.






------------------------------------------------

No comments:

Newer Post Older Post Home