AtoZ: CSS

After viewing AtoZ CSS I am slightly overwhelmed with just how much CSS can do and how much there is to learn. It was very refreshing to learn how CSS is essentially decorating boxes on a page. It is easy to overthink these processes sometimes and thus I am writing on my top awe inspiring coding moments between the series.


The Box model really helped showcase the different elements a box has in an html page. Also, how to properly edit each element to get your desired layout. These elements are:

  • Height
  • Margin
  • Padding
  • Border
  • Width

My second moment of awe-inspiring coding magic was learning about the Float and Clear properties. These properties allow you to inter-mingle text and boxes on a page with precise harmony and layout. Couple this with some background-shadow effect and you could have yourself a masterpiece.


Last but not least…ANIMATION!! Animations have a variety of capabilities, you can animate at certain times to add to the user experience. Frameworks are what must be defined in order to configure specific animations.


I also learned how to use an id selector and why it is not always smart to use them. 1. They are single use and secondly, the introduce specificity issues. Hence we have the class selector. The class selector gives you the option of re-using the selector for multiple blocks. Breaking things down into classes increases structure and organization.

Specificity is what styles get applied and when. The ID is a more powerful selector than a class, who would've thought! We also learned about specificity values and how to assign a number to each ID. The higher the number, the more specific the location. However, it is best practice to keep the specificity as low as possible.


Nth-child selects child elements if is matches an element’s algebraic equation. You can use this attribute to select a specific piece of data in a row or table. You can also create patterns within your list by using (n+5) as well as other variations of “n”. Here are some examples:

:nth-child(2n+1) = Find every second element, move down by 1.

:nth-child(3n-5) = Find every third element, move up by 5.

Nth-lastchild starts at the last element and move up from the bottom of the list. Remember: Nth-child only matches based on index of child elements and doesn't take element type into account.

Show your support

Clapping shows how much you appreciated Sam Pellegrene’s story.