CSS Tips!

I've found the blogs I like the most to be the ones who get right into it – so below are my go-to strategies for adding some pizzazz to your website/project/app.

One key element of an aesthetically pleasing project or app is consistency in design. To have all of your h1 headers show the text in all caps, regardless of how you've written them in your code:

h1 {
text-transform: uppercase; 
}

Another key to nice design is the positioning on your page. There may be some instances where you'll want an element to always be visible on page, regardless of how far down you've scrolled. To anchor a button on a page, use the following code! In this instance, the button will be anchored 30px from the top of the page regardless of how far down you've scrolled.

button {
position: sticky;
top: 30px;
}

Finally – my favorite way to add more personality to a page is by adding images. I've found that they make a really lovely text backdrop (as long as you have your text in another div with a background so your text is accessible and easy to read!).

To set an image as a background for the header div:

.header-background-image {
  background-image: url("https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29uY2VydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 150px;
}

To break down the code above:

• background-repeat allows you to control how many times the image repeats over the page.
• background-position allows you to control where the image is positioned.
• margin allows you to control the margin around the image.

ps - Unsplash is one of my favorite places for stock images - enjoy!