tsu.co CSS inspect

You can you the browser's inspector to get the information you need or you can also use JavaScript to get the CSS information recusivelly giving  an element to use as root.

Here's an example of how to take all CSS rules from a given element (using jQuery):
http://jsfiddle.net/3gbLxgjL/

can you please post the styles?

Don't be so lazy... I'm trying to help you so if you have any doubts about how to use the solution I gave you, please ask. But I won't do your work for you, I already showed you the way. Now it's up to you!

I understood nothing of your suggested method.

You can use the function getStyles passing a jQuery object as parameter to return a json with all the styles from the object you passed as parameter. Like this:

    var element = $("div.c");
    var styles = getStyles(element);

Select allOpen in new window

Here's an improved example (if you click the button an alert is shown with the CSS from the element defined inside the click's callback):

http://jsfiddle.net/Lepkoski/249y6toq/1/

I copied this part in HTML in jsfiddle then how to get CSS (Sorry this is advanced for me)
<div id="sign-in" class="" style="display: block;">
              <h2> Welcome Back </h2>


              <form accept-charset="UTF-8" action="https://www.tsu.co/users/sign_in" class="simple_form new_user" id="new_user" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="sBGgI5v8GlK/88adLNnugzB7LoQO4ZG6VbYvweisdwo="></div>
                <input autofocus="autofocus" class="form-input" id="user_login" label="false" name="user[login]" placeholder="Email or Username" type="text">
                <div class="input password optional user_password"><input class="password optional" id="user_password" name="user[password]" placeholder="Password" type="password"></div>
                <div class="input boolean optional user_remember_me"><input name="user[remember_me]" type="hidden" value="0"><input class="boolean optional" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"><label class="boolean optional" for="user_remember_me">Remember me</label></div>
                <input class="btn button" id="sign-in-form-submit" name="commit" type="submit" value="Sign In">
</form>
              <div id="helper_links">
  <a href="/users/password/new">Forgot your password?</a>

  <a href="/users/confirmation/new">Didn't receive confirmation instructions?</a>

</div>
            </div>

can you walk me through how to inspect the elements I asked for, so I can learn from it. Because the example you gave me, there is html, js and CSS, I don't know how did you get CSS and javascript in there, did you paste or what's the method.

Let's do the example through inspecting tsu.co

any other Experts please?

@Rafael, so you signed up Today and you and you try to be expert in a second with your vague solution?

I challenge you now, post me the solution without showing me how to.

element.style {
    display: block;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
#sign-in, #sign-up, #reset-password, #resend-confirmation {
    display: none;
    margin: 0 -175px 0 0;
    position: absolute;
    right: 50%;
    text-align: center;
    top: 20vh;
    width: 350px;
}
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body, a {
    color: #ffffff;
    font-family: "Montserrat",serif;
    font-weight: 400;
    background-color:black;
}
html {
    font-family: sans-serif;
}
#sign-in, #sign-up, #reset-password, #resend-confirmation {
    display: none;
    margin: 0 -175px 0 0;
    position: absolute;
    right: 50%;
    text-align: center;
    top: 20vh;
    width: 350px;
}
@media (max-width: 768px) {
#sign-in, #sign-up, #reset-password, #resend-confirmation {
    top: 100px;
}
}
#sign-in h2, #sign-up h2, #reset-password h2, #resend-confirmation h2 {
    color: #ffffff;
    font-family: "Montserrat",serif;
    font-size: 24px;
    font-weight: 700;
    margin: 30px;
    text-align: center;
}
#sign-in input[type="email"], #sign-in input[type="password"], #sign-in input[type="text"], #sign-up input[type="email"], #sign-up input[type="password"], #sign-up input[type="text"], #reset-password input[type="email"], #reset-password input[type="password"], #reset-password input[type="text"], #resend-confirmation input[type="email"], #resend-confirmation input[type="password"], #resend-confirmation input[type="text"] {
    border: 1px solid rgba(250, 250, 250, 0.8);
    border-radius: 3px;
    color: #78787a;
    font-size: 14px;
    margin: 8px 30px;
    padding: 12px 10px;
    width: 260px;
}
#sign-in input[type="email"]:focus, #sign-in input[type="password"]:focus, #sign-in input[type="text"]:focus, #sign-up input[type="email"]:focus, #sign-up input[type="password"]:focus, #sign-up input[type="text"]:focus, #reset-password input[type="email"]:focus, #reset-password input[type="password"]:focus, #reset-password input[type="text"]:focus, #resend-confirmation input[type="email"]:focus, #resend-confirmation input[type="password"]:focus, #resend-confirmation input[type="text"]:focus {
    outline: medium none;
}
#sign-in input[type="button"], #sign-up input[type="button"], #reset-password input[type="button"], #resend-confirmation input[type="button"] {
    background-color: #f7f7f6;
    border: 1px solid #cacaca;
    border-radius: 3px;
    margin-top: 10px;
    padding: 8px 10px;
    width: 80%;
}
#sign-in span.error, #sign-up span.error, #reset-password span.error, #resend-confirmation span.error {
    display: block;
}
#sign-in #user_remember_me label, #sign-in #helper_links, #sign-up #user_remember_me label, #sign-up #helper_links, #reset-password #user_remember_me label, #reset-password #helper_links, #resend-confirmation #user_remember_me label, #resend-confirmation #helper_links {
    font-family: "Montserrat",serif;
    font-size: 14px;
    font-weight: 400;
}
#sign-in #user_remember_me, #sign-up #user_remember_me, #reset-password #user_remember_me, #resend-confirmation #user_remember_me {
    margin: 2%;
}
#sign-in #user_remember_me label, #sign-up #user_remember_me label, #reset-password #user_remember_me label, #resend-confirmation #user_remember_me label {
    font-size: 14px;
    margin-left: 2%;
}
#sign-in .user_remember_me, #sign-up .user_remember_me, #reset-password .user_remember_me, #resend-confirmation .user_remember_me {
    font-size: 14px;
    margin-left: 49px;
    padding: 10px 0 18px;
    text-align: left;
}
#sign-in #helper_links, #sign-up #helper_links, #reset-password #helper_links, #resend-confirmation #helper_links {
    font-size: 14px;
    margin-left: 50px;
    padding: 20px 0;
    text-align: left;
}
#sign-in #helper_links a, #sign-up #helper_links a, #reset-password #helper_links a, #resend-confirmation #helper_links a {
    display: block;
    font-weight: bold;
    padding: 4px 0;
    text-decoration: none;
}
#sign-in #flash_alert, #sign-up #flash_alert, #reset-password #flash_alert, #resend-confirmation #flash_alert {
    text-align: center;
}
#sign-in.open, #sign-up.open, #reset-password.open, #resend-confirmation.open {
    display: block;
}
#sign-up::before {
    right: 52px;
}
#sign-up h2 {
    margin-bottom: 20px;
}
#sign-up .button {
    display: inline-block;
    margin-top: 20px;
    padding: 14px;
    text-decoration: none;
    width: 260px;
}
#sign-up .description {
    font-size: 18px;
    margin: 0 auto;
    padding: 10px;
    width: 250px;
}
#sign-up .description.error {
    color: #bd5e55;
}
#sign-up #username-wrapper {
    background: none repeat scroll 0 0 white;
    border-radius: 3px;
    height: 50px;
    margin: 10px auto 0;
    padding: 14px 0;
    width: 260px;
}
#sign-up #username-wrapper::before {
    color: #bebebe;
    content: "tsu.co/";
    display: inline-block;
    font-size: 20px;
    margin-left: 3%;
}
#sign-up #username-wrapper input[type="text"] {
    border: medium none;
    color: #232323;
    font-size: 20px;
    margin: 0 0 0 5px;
    padding: 0;
    width: 165px;
}
#sign-up #username-wrapper input[type="text"]:focus {
    outline: medium none;
}
#sign-up .login-link-wrapper {
    font-size: 14px;
    font-weight: bold;
    padding: 20px 10px 25px;
    text-align: center;
}
#sign-up .login-link-wrapper a {
    color: #3be0c0;
    font-size: 14px;
}
#reset-password, #resend-confirmation {
    display: block;
}
*, *::before, *::after {
    box-sizing: border-box;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
.button {
    display: inline-block;
    font-family: "Montserrat",serif;
    font-size: 20px;
    font-weight: 700;
    height: 50px;
    width: 260px;
}
.button, a.button {
    background-color: #3be0c0;
    border: 0 none;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin: 0;
    padding: 0 4px;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
}
input {
    line-height: normal;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}

Select allOpen in new window

any adjustments

.button, a.button {
margin-left:45px;
}

Select allOpen in new window

is this correct

sometimes i see things repeated and i get confused

do you have any idea when you click on login you get this form?

on their website the href link is # there must be something like jquery?

Any element can have a number of event handlers which are script functions.
On this page the "join / login" link has an "OnClick" event handler which shows the form when you click on the element.
If you inspect the element (like I described earlier) and then click on the "Event Listeners" tab (on the right) you will see the list of handlers. You can click on the location link and get the function code.
Often the script is compacted and/or obfuscated. You can make the inspector to show you the script in more-less readable form pressing the "{ }" (pretty print) button.
To understand meaning of a third-party obfuscated script could be a very complex task, I doubt I could help you to get know what the script on this page exactly does.