CSS can be used in two different ways. There are codes entered into the HEADER of your document or you can enter CSS “inline” by injecting it into an HTML element. My codes typically are used by the HEADER.

I will try to give my codes to you as freestanding – you just simply copy/paste them into your HEADER of your document. If you would like more information on how to utilize CSS, check out this source. It’s one of my favorite places to reference!

You can add your own cute cursor like this:

All you need to do is add this code to your HEADER

<style type="text/css">
* {
cursor: url(https://angelicas.site/images/grafx/cursors/arrow1-purple.png),auto !important;
}

a:hover{
cursor: url(https://angelicas.site/images/grafx/cursors/arrow2-purple.png),auto !important;
}
</style>

You can change the URLs inside the parenthasis to your own URL! Create your own little cursor image, or you can use mine from the graphics section

You can add decorate your own scrollbars (doesn’t work in all browsers~) I have created a few different versions so you can base yours from mine!

Gradient Scrollbar

All you need to do is add this code to your HEADER

<style type="text/css">
body{
  background: white;
}
::-webkit-scrollbar {
    width: 18px;
    background: white;
}
::-webkit-scrollbar-button {
    height: 0px;
}
::-webkit-scrollbar-track {
    border: 0px;
}
::-webkit-scrollbar-thumb {
      	background: linear-gradient(red, yellow);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:hover {
    background: gray;
}
</style>

The colors to change in this are the white which should match the background of your page; then red and yellow are the gradients in this example.

Mini Scrollbar

Add this to your HEADER

<style type="text/css">
body{
  background: LightGoldenRodYellow;
}
::-webkit-scrollbar {
    width: 8px;
    background: LightGoldenRodYellow;
}
::-webkit-scrollbar-button {
    height: 0px;
}
::-webkit-scrollbar-track {
    border: 0px;
}
::-webkit-scrollbar-thumb {
    background: saddlebrown;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:hover {
    background: rebeccapurple;
}
</style>

The colors to change in this are LightGoldenRodYellow to match your background. Then saddlebrown and rebeccapurple are the scrollbar colors when you see it/mouseover it

Background Image Scrollbar

Add this to your HEADER

<style type="text/css">
body{
  background: LavenderBlush;
}
::-webkit-scrollbar {
    width: 18px;
    background: LavenderBlush;
}
::-webkit-scrollbar-button {
    height: 0px;
}
::-webkit-scrollbar-track {
    border: 0px;
}
::-webkit-scrollbar-thumb {
    background: url('https://angelicas.site/images/grafx/bgs/chevron-2.png');
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:hover {
    background: url('https://angelicas.site/images/grafx/glitters/girly-tangerine.gif');
}
</style>

The elements to change in this are LavenderBlush to match your background of your page
https://angelicas.site/images/grafx/bgs/chevron-2.png is the image that displays on your scrollbar
https://angelicas.site/images/grafx/glitters/girly-tangerine.gif is the image that displays when you mouseover or grab the scrollbar
Just upload/paste your image URLs in place of those 😁

Cartoony Scrollbar

Add this to your HEADER

<style type="text/css">
body{
  background: Tomato;
}
::-webkit-scrollbar {
    width: 28px;
    background: Tomato;
}
::-webkit-scrollbar-button {
    height: 0px;
}
::-webkit-scrollbar-track {
    border: 0px;
}
::-webkit-scrollbar-thumb {
    background: RoyalBlue;
  border: 3px solid Black;
    border-radius: 12px 25px 12px 25px;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-button:hover {
    background: Yellow;
}
</style>

The colors to change in this are Tomato to match your page’s background color. Then RoyalBlue and Yellow are the scrollbar.

You can add a rainbow effect to your text like this:

To do this, you add the class=”rainbow” to your elements. In my example, I add the class to the span element like this:

<p>
  <span class="rainbow">This is an example of rainbow text &hearts;</span>
</p>

Then, I add my styling to my CSS like this:

<style type="text/css">
.rainbow {
  background: linear-gradient(to right, red, yellow, green, blue, purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>