CSS Boxes and Positioning

Posted by t3mp3st19 on August 8, 2017

I have been less excited about learning CSS than Ruby. It was fun solving problems in Ruby, and difficult to shift gears for the HTML and CSS portion of the curriculum. However, I do enjoy design and hope that I can be more proficient in CSS.

CSS boxes are a primary building block for web pages, but I had challenges in understanding specificity and when to use a class or an ID. I enjoyed playing with the developer tools to move and style elements without committing them to my code. Developer tools are fantastic.

It took time to understand how to implement design ideas due to constraints from the assignments. However, I was able to consider future design implications as they pertain to CSS, and how to use classes to style elements. Classes can be used to consistently style multiple elements whereas IDs are for a single element and must be unique.

On the Zetsy assignment, CSS transitions made the design stand out. It was exciting to tweak the colors and gradients to get a new look for the mouse hover events.

When working on the ZHW Shoes assignment, positioning the columns to display correctly took a lot more work than anticipated. I discovered a new way to use CSS positioning called nth-of-type(). I was reading a lot of articles online to try to get everything to work for the assignment, and stumbled on this CSS selector. It is important to know nth-of-type() CSS positioning does not work in older browsers. Also, for nth-of-type() positioning, the array starts at 1, not 0.

Here’s some information about this selector: https://css-tricks.com/almanac/selectors/n/nth-of-type/. The following has a Try it Yourself button that allows you to play with the CSS styles: https://www.w3schools.com/cssref/sel_nth-of-type.asp. I hope you have fun learning CSS!