Skip to main content

Forums » Art & Creativity » The CSS Bible

I've found a ton of useful free resources for beginners, dabblers and even pros, so I figured I'd compile them all here so that we can all benefit from them and help the template library grow!




little_buck_by_foxtribe-d99o89t.giflittle_doe_by_foxtribe-d99o8cl.gif
◆ THE CSS BIBLE ◆
the goods!



i_love_everything_you_do_by_t_e_r_r_i_f_i_e_d-dao9fux.png CSS Generators
CSS3 Maker
CSS Cheat Sheet
CSS KF Animator
CSS Beautifier
Codepen
w3schools
stackoverflow
Clippy
CSS Text Generator
loading.io
cssportal
Iconfinder
patternify
awwwards behancedribbble
animista
Paletton

















includes filters, transform tools and a library of CSS snippets.
easy to use CSS generator for animation and transitions.
super useful information.
a keyframe animator generator.
a tool that cleans up and formats css.
really cool CSS resources submitted by moki!
coding community + resource hub submitted by ohm!
coding community + resource hub submitted by ohm!
CSS shape generator
Includes font style, size etc.
creates custom loading icons and gives code!
live demo, generators etc!
icon resource. some are free some aren't!
creates patterns
inspiration
CSS animations generator submitted by revolversnackalot!
omg!! super cool colour mapper submitted by light!!





little_buck_by_foxtribe-d99o89t.giflittle_doe_by_foxtribe-d99o8cl.gif
◆ FREE HD STOCK IMAGES ◆
maybe it's maybelline...



i_love_everything_you_do_by_t_e_r_r_i_f_i_e_d-dao9fux.png Pexels
Stocksnap
Gratisography
Negative Space
New Old Stock
IM Free





Pomkeki's Freebies



potion_leaf_by_littlegrimoire-d9ru5l2.gif



Cheat Sheet
HTML/CSS CHEAT SHEET wrote:
TO CENTER STUFF:

HTML:
<CENTER> </CENTER>

CSS:
TEXT-ALIGN: CENTER;

TO BOLD TEXT:

HTML:
<B> </B>
<STRONG> </STRONG>

CSS:
FONT-WEIGHT: BOLD;

(IF YOU'RE FONT COMES IN DIFFERENT WEIGHT YOU CAN USE THAT INSTEAD:
FONT-WEIGHT: 700;)

TO ITALIC TEXT:

HTML:
<I> </I>

CSS:
FONT-STYLE: ITALIC;

TO UNDERLINE TEXT:

HTML:
<U> </U>

CSS:
TEXT-DECORATION: UNDERLINE;

TO PUT A LINE THROUGH TEXT:

HTML:
<STRIKE> </STRIKE>

CSS:
TEXT-DECORATION: LINE-THROUGH;

SHOW FONT-SIZE AS BIGGER:

HTML:
<BIG> </BIG>

CSS:
FONT-SIZE: LARGER;

CHANGE FONT:

HTML:
<FONT COLOR="#FF0000"> </FONT>
<FONT FACE="ARIAL"> </FONT>

CSS:
FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF;
COLOR: #FF000;




credit to: foxtribe, littlegrimoire from DA for post prettification ( pagedolls )

UPDATE -
I've edited the basic CSS template so you can see which section you're altering.
Each section has a corresponding colour - ( though some are the same, this should make life much easier when coding. )
Quote:
body {
background-color: red;
}

#toolbar {
background-color: pink;
}

#sitecontainer {
background-color: blue;
}
#headerholder {
background-color: red;
}

#charheader {
background-color: cyan;
}

.portraitcontainer {
background-color: grey;
}

#characterName {
background-color: black;
}
#playedBy {
background-color: yellow;
}

ul#pagetabs{
background-color: orange;
}

#rightheaderside {
background-color: green;
}

div#charcontent {
background-color: white;
}

li.widget {
background-color: green;
}

a {
color: yellow;
}

a:hover {
color: dark blue;
}

#footer {
background-color: pink;
}
http://codepen.io/

Loooooooots of really cool CSS resources on here - though some of them do involve JS or HTML so you just have to keep an eye out when browsing.
Silas Topic Starter

Moki wrote:
http://codepen.io/

Loooooooots of really cool CSS resources on here - though some of them do involve JS or HTML so you just have to keep an eye out when browsing.

Thank you Moki!!!!! <3

I added it to the list :) If you find anymore let me know and I'll update <3 <3
Ohm

These are awesome, Fiebs! TYSM for sharing!

Stackoverflow and w3school are also good places if you hit a wall with coding.
Silas Topic Starter

Ohm wrote:
These are awesome, Fiebs! TYSM for sharing!

Stackoverflow and w3school are also good places if you hit a wall with coding.

Thank you friend!! I'm glad these are helpful!!
I've added your suggestions ty ever so much. ❤
Silas Topic Starter

Updated!!
Silas Topic Starter

Updated! :)
I have to share the best color map ever:

http://paletton.com !!!!
Hello.

I am new and would like to learn CSS so I can custimize my characters and the like. I have never used CSS before, though I am currently learning it. However, i find difficulty in applying it here. I looked at the 'page layout' that was available and :(

it looks like latin to me.

I know the very basics: How to change text color. Backgrounds. Just learned Internal, external and inline style sheet css. How to do image backgrounds.

I know I have a LOT to learn. My questions is...could someone with knowledge and patience with CSS walk me through it. I find the ability to bounce things off a living person while applying said knowledge helps me a lot more then merely reading it and trying to connect the dots. So to speak.

Thank You.
Silas Topic Starter

Scantly_Pleasant wrote:
Hello.

I am new and would like to learn CSS so I can custimize my characters and the like. I have never used CSS before, though I am currently learning it. However, i find difficulty in applying it here. I looked at the 'page layout' that was available and :(

it looks like latin to me.

I know the very basics: How to change text color. Backgrounds. Just learned Internal, external and inline style sheet css. How to do image backgrounds.

I know I have a LOT to learn. My questions is...could someone with knowledge and patience with CSS walk me through it. I find the ability to bounce things off a living person while applying said knowledge helps me a lot more then merely reading it and trying to connect the dots. So to speak.

Thank You.

I will be happy to help you as much as I can. Please feel free to PM me. ☺️
Silas Topic Starter

light wrote:
I have to share the best color map ever:

http://paletton.com !!!!

OMG I LOVE
Silas Topic Starter

Update!

You are on: Forums » Art & Creativity » The CSS Bible

Moderators: Mina, Keke, Cass, Auberon, Claine, Ilmarinen, Ben, Darth_Angelus