Learning to Code: Day 11 — Applied Visual Design Part 1

Creating Visual Balance using the Text-Align Property

Adjust the Background-Colour Property of Text

p {

text-align: center;

background-colour: rgba(45, 45, 45, 0.1);

padding: 10px;


Change the Font Size in a Header vs. The Paragraph Tag

Adding a Box Shadow to a Card-like Element

  • offset-x : how far the shadow is pushed horizontally rom the element
  • offset-y : how fat to push the shadow vertically from the element
  • blur-radius : how sharp the shadow is (optional)
  • spread-radius : how far the shadow spreads from the element (optional)
  • and color.
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
Image from Hacker Noon



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store