Hope you you're doing well!
Do you wish you had a simple stylesheet to use for your websites? Does that stylesheet have to be beautiful, responsive, light, and have many useful elements? Well look no further, because
Easy.css is what you need!
Like the generic name implies, it's a
CSS stylesheet you can easily use in your websites to style things up!
Here's how a snippet of looks it like:
To use ➡️
Make a new
HTML CSS JS repl (or click here).
Light mode or dark mode?
<link href="https://easycss.bookie0.repl.co/light.css" rel="stylesheet" type="text/css">for light mode.
<link href="https://easycss.bookie0.repl.co/dark.css" rel="stylesheet" type="text/css">for dark mode.
Paste it in the
You're all set! :) Start coding!
Here's an example repl that you can fork and test some of the elements:
(Some) Features ✨
<p>tags for paragraphs
<u>for underline, and
- Font family is
- Quoteblock with light background color
- Blue accent color as left border
- Big quote character (“)
- Quote in italic
- Citation in regular, with work in italic
- Default button
- Blue accent color background that becomes darker on hover
- Button gets bigger on click
- Secondary button
- Same as above, but by default doesn't have a blue accent background; only on hover does that background appear
- Larger button
- Same as default button, but everything is just bigger
Keyboard input (
- Light gray background color
- Shadow to make it seem "3D"
- On click, appears to go down (as if the pressed)
- Monospace font
- Table header has blue accent color background
- Each table row has an alternate background color
- On hover, each table row becomes a bit darker
There are of course a lot more elements that you can use (such as shapes, cards, codeblocks, inputs, radio/checkbox buttons, etc.) so be sure to check the demo site for more information! :D
As I said above, the font family used is
'Lato', sans-serif. I chose it because, like the Google Fonts page, says, it has a sleek and modern look. I also love the semi-roundness of the characters; it makes the font feel a bit 'organic' and and comforting, while also keeping it serious and professional. It's a great font for all sorts of websites!
The main accent blue accent color is not exactly blue; it's dodgerblue (I use
#1e90ff). It looks like this:
CSS variables in the
:root pseudo-class (check out
(It's an image so you can see the colors in the small square boxes next to the variable.)
The primary color, used for the background color is white (
#fdfdfd). The secondary color, used for input boxes, quotes, and tables is a light gray (
#f0f0f0). There's also
--secondary-color-hover (a darker shade of light gray,
#ddd) for cases like when you hover on the inpput boxes.
For text colors, the primary color is a very dark brown that looks similar to black (
#1a1110). The secondary text color is gray (
For borders, there is
--border-color which is used for, well, borders. It's sort of a gray color but with the alpha parameter (because I used
rgba in this case) set to
0.1, it's extremely light.
I talked about the accent color above, but there are also similar blue colors on hover and on focus.
You'll also see a variable called
accent-color, without the 2 hyphens (
-) in front. It's a new (I think) property set in the
:root pseudoclass to replace the usual accent color based off of your computer system's accent color. Instead of having the default system's accent color that varies based off on browser/device, I set it to this stylesheet's accent color (the dodgerblue) to make it look more uniform.
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
If there are any issues/bugs/things breaking, please comment them or DM me on Discord @
If you use this stylesheet, please keep in mind that I'd love if you gave credit (like in the footer of your website or something), as I did put some effort into this! :)
Have a fantastic day!!!
In case you didn't read anything above (I hope you did; it takes quite some time to write the whole
To use copy
<link href="https://easycss.bookie0.repl.co/light.css" rel="stylesheet" type="text/css"> for light mode and
<link href="https://easycss.bookie0.repl.co/dark.css" rel="stylesheet" type="text/css"> for dark mode.
Also: I've included a multitude of references to certain things in the demo site. Can you find them all? :)
Check it out on Product Hunt! xD
This is very cool! I, personally, am still going to use regular CSS because of its wide range of customization, but this is a great tool for beginners!
Havent went through it yet
just one question
how hard it is to overwrite certian elements compared to bootstrap
@C3TMLive If you want to overwrite an element's style, just do it in
For example if you have a link with the
<a> tag, and want to change the color, in a
CSS file, just change the properties for that tag. Or you can add an
I don't do bootstrap so I wouldn't know how to compare them.
Lmk if you need more help! :)
Bro, thanks so much for the dark mode. But can you make a file called style.css and keep it in light mode. Cause otherwise we have to update it. Thx m8
Hmm, a viable competitor to Water.css. Just add a dark theme and a bookmarklet and you're golden.