Intro

I'm probably getting myself into more trouble than I'd like to be in, but I get these questions a lot! I'm sure I'm not the only CSS coder here on LD who does either, so I'm making this little thread/FAQ to hopefully cut down on the flooding of inboxes... and to help people out a bit of course XD

If you have any suggestions, do let me know! I'm more than happy to add to this.

FAQ

Your den looks so amazing! How do I make mine like it?
It's done with a coding language called CSS(cascading style sheets).

What is CSS? Is it like HTML?
CSS is sort of like HTML, I guess, but really it's what colors, sizes, etc. the HTML. It's sort of like building a house for example. HTML is the building itself, but CSS is what you paint the walls with, add furniture, and so on.

How do I learn CSS?
Well if you're using any sort of HTML in your den, you probably already know a little bit of CSS. If you have a table, for example, and it has style="" in the coding, it's CSS, but it's "in-line CSS". If you want to do fancy stuff like change your background and so on, you need "external CSS".

To learn CSS, I highly recommend self teaching yourself, or maybe taking a class in it if you can find one/are in school. Personally, I failed the only class I took on the subject back in high school, but eventually self taught myself it a little while after joining LioDen.
Here are some great websites for learning!
W3Schools
Codecademy
A "For Dummies" cheat sheet (Got this link from the huge ass book I bought a year ago on CSS, HTML, and JS.)
And I'm pretty sure I'm quoting Tserin here when saying, "Google is your friend."

Is there any easier way to learn it? I don't have the time to teach myself...
Yeah, I hear that one a lot. I don't want to sound harsh in saying this, but if you "don't have the time" then you just don't have the time. Find the time, or commission someone else to make you a layout. There is no easier way to learn except to just get started reading and looking into as much as you can. It took me at least a year to figure out CSS after coming to LD, and to this day I'm still learning and sharpening my skills.

How do I make a drop down box? You know, the ones where you hover over it and it expands?
Look into transitions, that's what you need to do it :) W3Shcools' page on it(how I learned it). Transitions are also how to make links "fade in" and various other things.

Remember to add "class" to your box!
Personally, I just use a simple < div class="box" > to make mine most of the time, but you can name it pretty much anything. In your file you would put div.box to style it.

How do I make something transparent/translucent?
To make something transparent, most of the time I just use this- background:none!important;

For translucent/semi-transparent, use RGBA color codes for the background. RBGA works like this-
EXAMPLE Color- RGBA(0, 0, 0, .50)
Each letter stands for a color, R for red, G for green, and B for blue, which are the colors RGB uses to blend into other colors(probably not how it works exactly, and I was never good at physics, but it has to do with different colors of light). The A stands for Alpha, and that's what controls the opacity. In the example, we have black at .50, or 50% c:

If using it in your pride table, you will need to add this for either of these to work successfully-
tr.right {background:none!important;}

So how do I get the coding to work in my den?
As I said, you need external CSS, which basically means you have a .css file (use a text editor to make it) and you host it on some sort of site.
I've made a full guide on it below ^^

Where do I put the link for the CSS in my den? I can't find the option!
(This is a recent question I've been getting far too often...)
So, with the Caves and Mounds, you can just put a link to a CSS file(that is hosted somewhere!). A lot of people think you can just do the same with dens! Unfortunately, most who assume this, then find there is no place to put the link, and may spend hours driving themselves crazy trying to find it. These poor souls will never find said magical CSS Link option, as in Dens, it doesn't exist. (-Gasps- Oh no!) Well, luckily for them, there is some hope, if they know to use the External CSS method, which is probably one of the first things you'll learn about if you google "CSS". As mentioned above, I have a full guide on it below

What text editors work?
Really any that allow for you to save as a ".css" file work. Below the guide on getting css into your den, there's now a section on choosing a text editor :)

Getting Your CSS Into Your Den

First make sure your file is saved as a .css before continuing!

The "Linking Code"
The linking code, as I call it, it what links your CSS file into your den. Here's the code blank(remove the *s)-
<*link rel="stylesheet" type="text/css" href="LINK HERE" /*>
Now, you're going to need to get your link, which there are a few ways of doing

Using Dropbox

You can download and create an account here

1. Save your file to your Dropbox folder.
2. Right click on it in the folder.
3. Select "Share Link".
4. Now that you have the link, you will need to change it a little bit.
5. Simply change the "www." to "dl.". Here's an example-
BEFORE: https://www.dropbox.com/s/ipqhtl74b3z3t1n/Wave.css
AFTER: https://dl.dropbox.com/s/ipqhtl74b3z3t1n/Wave.css
6. Now paste the new link into the linking code.
7. Copy the final linking code into your den and save.

Using Google Drive

There's actually a whole guide on this here.

Using Codepen.io

This is an easy one for beginners I've found, you don't even need to have your file in a text editor. You type your coding all right in!
With a new update to Codepen, you now need an account, but it's free to join.

1. Go to this link, http://codepen.io/pen/ (Click)
2. You can hit the "X" on both HTML and JS, since all you need is the CSS box.
3. Type your coding into the CSS box.
4. Hit "Save"
5. Click on "Change View".
6. After hitting Change View, it will drop down and give you some options. Choose the .css under Direct links to code.
7. This will take you to a link which you can directly put into the linking code.
8. Copy the final linking code into your den and save.

Choosing Your Text Editor

As long as you can save your file as a ".css" file, there is no wrong text editor. When choosing your text editor program, it's all a matter of what you feel comfortable with ^^ However, here are a few I personally have used, which are free to download!

An online Notepad.
This one I actually didn't even know existed till about 5 minutes before I added this little bit about text editors, but it's simple and works well. Just remember to save your file with .css at the end!

Windows standard Notepad also works as a very simple one.

Notepad ++. My personal favorite, due to themes that let you personalize how the editor looks as far as colors(helps if you read dark on light better or light on dark, since there are several of those you can choose from), and it also lets you have several files open in different tabs. Once you get used to coding with it a bit, it also helps you see mistakes in your code if there are any.

Brackets is by Adobe, and pretty great as well(plus it's for more than just Windows, unlike Notepad ++). Honestly, I haven't used it much, but what I have seen of it, it's also a very nice one like Notepad ++.


If you have any questions about these, or want me to check out another text editor for you, let me know! I'm happy to help.

Got More Questions?

I'm always happy to answer them :D Ask away!

Also check out Tserin's guide on CSS
And Feather's guide as well.

Both are really helpful for those who want a better explanation on CSS, specifically for LD.