Here are some quick CSS codes you can copy and paste and alter to your needs. Just click on the problem you’re having, and the code will appear along with any notes to help.
It’s important to note that the selectors in these lists will affect all of those elements on your blog. If you change the color of your link, it will affect ALL of your links, if you change the border of an image, it will change ALL of your images. If you need to address more specific elements, and not all of them, you should learn how to use your browser’s “Inspect” tool. (CSS introduction coming to this site soon.)
If you’re using WordPress, you can add CSS code very easily without any risk of breaking your site. Just click on “Appearance” then “Customize” in your dashboard. Towards the bottom, you’ll see an option for “Additional CSS.” Click on that and paste the code there. You will be able to see the changes as you make them, so you can play all day without visitors seeing. When everything looks perfect, click “Save and Publish.” This is also a great place to play with the code and learn all the fun things it can do.
If you’re using Blogger, click on “Theme” then “Customize.” Click on the last option in the top left “Advanced,” then scroll to the bottom of the center list and click on “Add CSS.” You can also play risk-free with your CSS here, no body else will see it until you click “Apply to blog.”
If you’re using SquareSpace, click on “Design” then “Custom CSS.”
Typography
Change blog font size
body {font-size: 14px;}adjust to desired pixel size
Change blog font color
body {color: #696969;}change the hex code to whatever you’d like, or even a color name like those at 147 Colors
Change spacing between letters
body {letter-spacing: 1px;}adjust the pixel size as you wish, you can do fractions too like .5px
Make links italic
a {font-style: italic;}if your links are already italic, and you want them regular, replace “italic” with “none”
Remove underline from links
a {text-decoration: none;}or add one by replacing “none” with “underline”
Make links bold
a {font-weight: bold;}
Change links to all caps
a {text-transform: uppercase;}you can also use “lowercase” or “capitalize”
Change color when you hover over a link
a:hover {color: silver;}you can use a color name or hex code like #ffc0cb
Images
Add rounded borders to images
img {border: 5px;}adjust the pixel size for more or less rounding
Add borders to images
img {border: 1px solid #000;}
Add white space between the border and image
img {padding: 5px;}
Add shadows behind images
img {box-shadow: 1px 1px 2px silver;}what the numbers represent: right bottom blur color
in english: the first number is how far right the shadow will be, the second is how far down, the third is how “soft” or blurry the shadow will be (leave the third off altogether if you want a crisp shadow), and the last is the color the shadow will be, you can use color names or hex codes like #ffb2a8 here.
Buttons
Change background color of buttons
button {background-color: #000000;}using #000000 will change it to black, you can use any hex code you would like, or use “transparent” instead of a hex code
Change text color in buttons
button {color: #ffffff;}this hex code will change the color to white, use whatever code you’d like
Add a border to buttons
button {border: 1px solid #000;}the 1px is how thick the border is, solid means it’s a solid line, and #000 means it’s black. change those to whatever you’d like!
Make buttons full width
button {width: 100%;}100% refers to the size of the content area, so if you had a button in your sidebar, it would be as wide as the whole sidebar
Make a button only as wide as the text
button {width: auto;}
Make a button bigger (add space around the text)
button {padding: 10px;}or you could add more padding to the sides than the top by using this:button {padding: 10px 16px;}the first number is how much space to add to the top and bottom, the second number is how much space to add to the left and right
Lists (numbered & bullet)
Add space between list number and text
ol li {padding-left: 10px;}adjust pixel number as needed
Make lists bold
li {font-weight: bold;}note that this could effect MANY things in your theme like your menus and sidebar elements, just watch for that before you save your code
Change bullet to circle
ul li {list-style-type: circle;}you could also try square
Change bullet to other shape
ul li {list-style-type: none;} ul li::before {content: '\1f495';}the first code tells it not to use a bullet, the second code tells it to use a double-heart emoji. to find the symbol or emoji you want to use, go to this website, find your symbol and copy the numbers and letters that follows “U+” replace the “1f495” with your own code. Make sure to leave the \ or it won’t work.
Replace the bullet with an image
ul li {list-style-image: url('YOURIMAGEURLHERE');}upload the image you want to use to your website, then view the image, right click on it and select “copy image link.” delete the part of the code that says YOURIMAGEHERE and paste the link in its place.
Pin it to save it for later.