Simply add the CDN link to your project and start building.
Enjoy intuitive class names inspired by Bootstrap and Tailwind.
Access a library of pre-made CSS classes to enhance your designs.
New colors, fonts, classes and features added every week.
<link href="https://odin.fr.to/odin.min.css" rel="stylesheet">Follow us on X.com to get the latest updates and to see how easy it is to use the classes.
#color
#color-bg
#color-bg-hover
#color-border
#color-txt
#color-txt-hover
Replace #color with the actual color name, like red, blue, black, etc..
font-size-20
font-space
txt-center
light-blue-bg
display-flex
margin-r-10
border-#number
border-dash-#number
border-rad-#number
font-size-#number
gap-#number
grid-col-#number
h-#number
line-h-#number
margin-#number
max-w-#number
pad-#number
pad-r-#number
transition-#number
w-#number
Replace #number with a real number, like 1, 5, 10, 25, etc..
b replace BOTTOM
bg replace BACKGROUND
col replace COLUMN
h replace HEIGHT
l replace LEFT
pad replace PADDING
pc replace percent (%)
r replace RIGHT
rad replace RADIUS
t replace of TOP
txt replace TEXT
w replace WIDTH
For some exception like wide #number%, you will use w-100-pc or wide-50-pc, etc..
OdinCSS makes CSS styling accessible for everyone.
The idea is to make CSS easier for you!
No installation required - just start using it!
Stay focused on your HTML without distractions.
Copy and paste the CSS link to get started.
Add keywords to your HTML classes, and you're all set!
It is really easy to change the fonts to your website.
Example : If you write <p class="font-lobster">My text<p> you will get this result ... My text
Here are some of the most popular website colors and example on how you can apply them:
For border color (blue-border or red-border or anyOdinCSScolor-border), background (green-bg or azure-bg and so on), for hover effect for background color (yellow-bg-hover, charcoal-bg-hover or any of the other colors), for hover effect for text color (white-txt-hover, black-txt-hover, etc...), and for text (green-txt, navy-txt).
Example : If you write <p class="green-txt blue-txt-hover">My text<p> you will get this result ... My text
Azure
Beige
Black
Black Gray
Blue
Bronze
Brown
Brass
Burgundy
Champagne
Charcoal
Chrome
Coral
Copper
Crimson
Cyan
Dark Blue
Dark Gray
Dark Green
Dark Red
Forest
Gold
Gray
Green
Indigo
Ivory
Khaki
Lavender
Light Blue
Light Gray
Light Green
Light Red
Maroon
Magenta
Mint
Navy
Orange
Orchid
Opal
Peach
Pear
Pink
Platinum
Purple
Red
Rust
Salmon
Silver
Slate Gray
Steel
Teal
Titanium
White
Yellow
It is really easy to add gradient to a DIV or to a P.
Example : Add a class with the gradient name <div class="grad-peachy">My text</div>