CSS Reference & Examples

background-color: #FFFFFF;

OR

background-color: rgb(255, 255, 255);

background-color: rgb(0, 0, 0, 0.25);

background-image: url(".png");

border-style: dotted;

Options: dotted, dashed, solid, double, groove, ridge, inset, outset

Style can be mixed, it starts at the top and goes clockwise

border-style: double dashed solid ridge;

border-width: 5px;

OR

border-width: thin/medium/thick

(this can also be mixed)

border-color: rgb(100, 230, 10);

(this can also be mixed)

border-radius: 15px;

margin: 25px 50px; 

25px - top/bottom & 50px - sides

If just margin: 25px then 25px on all sides

display: block; margin-left: auto; margin-right: auto;

centers Download button if you make the button smaller

padding: 25px 50px;

identical behavior as margins

example using padding, margins, and borders

width: 200px;

height: 200px;

text-shadow: 2px 2px red;

                        hor vert color

text-shadow: 2px 2px 5px red;

                        hor vert blur color

background-image: linear-gradient(yellow, green);

background-image: linear-gradient(to right, yellow, green);

background-image: linear-gradient(to top, yellow, green);

background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,1));

background-image: radial-gradient(white, yellow, green);

background-image: radial-gradient(white 20%, yellow 15%, green 45%);

background-image: radial-gradient(circle, white, yellow, green);

box-shadow: 10px 10px;

border-style: solid;

box-shadow: 10px 10px yellow;

border-style: solid;

box-shadow: 10px 10px 15px yellow;

border-style: solid;

height: 200px;

overflow: auto;

this is a lot of text and I don't want it to go further down than 200px so this should make a scroll bar if all goes to plan. Yep, okay, just checked and it made a scroll bar-- good!

height: 200px;

this is a lot of text and I don't want it to go further down than 200px but I forgot to put in overflow: auto so now it's just going to run off the page and look bad, oh no! oh dear, oh my. it just keeps going off the page.

Have questions? Email: angela@myvrspot.com

position: fixed;

bottom: 0;

right: 0;

border-style: double;

border-width: thick;