Question

I’m working on a chat application called Candy, based on jQuery/Strophe/mustache. Now I want to modify the CSS-file, but the problem is: How can I do that? I have no HTML-code to see how the CSS-tags are used.

/**
 * Chat CSS
 *
 * @author Michael <[e-mail]>
 * @author Patrick <[e-mail]>
 * @copyright 2011 Amiado Group AG, All rights reserved.
 */
html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#candy {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #ccc;
    color: #333;
    overflow: hidden;
}

a {
    color: #333;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#chat-tabs {
    list-style: none;
    margin: 0 200px 0 0;
    padding: 0;
    overflow: auto;
    overflow-y: hidden;
}



#chat-tabs li {
    margin: 0;
    float: left;
    position: relative;
    border-right: 1px solid #aaa;
    white-space: nowrap;
}

#chat-tabs li a {
    background-color: #ddd;
    padding: 6px 50px 4px 10px;
    display: inline-block;
    color: #666;
    height: 20px;
}

#chat-tabs li.active a {
    background-color: white;
    color: black;
}

#chat-tabs li a.transition {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 0px;
    height: 0px;
    background: url(img/tab-transitions.png) repeat-y left;
}

#chat-tabs li a.close {
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    height: auto;
    padding: 5px;
    margin: 1px 5px 0 2px;
    color: #999;
}

#chat-tabs li.active a.transition {
    color: gray;
    background: url(img/tab-transitions.png) repeat-y -50px;
}

#chat-tabs li a.close:hover, #chat-tabs li.active a.close:hover {
    color: black;
}

#chat-tabs li .unread {
    color: white;
    background-color: #9b1414;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 10px;
    position: absolute;
    top: 6px;
    right: 22px;
    border-radius: 3px;
}

#chat-tabs li.offline a.label {
    text-decoration: line-through;
}

#chat-toolbar {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 11px;
    color: #666;
    width: 200px;
    height: 24px;
    padding-top: 7px;
    border-top: 1px solid #aaa;
    background-color: #d9d9d9;
    display: none;
}

#chat-toolbar li {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    float: left;
    display: inline-block;
    cursor: pointer;
    background-position: top left;
    background-repeat: no-repeat;
}

#chat-toolbar #emoticons-icon {
    background-image: url(img/action/emoticons.png);
}

#chat-toolbar .context {
    background-image: url(img/action/settings.png);
    display: none;
}

.role-moderator #chat-toolbar .context, .affiliation-owner #chat-toolbar .context {
    display: inline-block;
}

#chat-sound-control {
    background-image: url(img/action/sound-off.png);
}

#chat-sound-control.checked {
    background-image: url(img/action/sound-on.png);
}

#chat-autoscroll-control {
    background-image: url(img/action/autoscroll-off.png);
}

#chat-autoscroll-control.checked {
    background-image: url(img/action/autoscroll-on.png);
}

#chat-statusmessage-control {
    background: url(img/action/statusmessage-off.png);
}

#chat-statusmessage-control.checked {
    background: url(img/action/statusmessage-on.png);
}

#chat-toolbar .usercount {
    background-image: url(img/action/usercount.png);
    cursor: default;
    padding-left: 20px;
    width: auto;
    margin-right: 5px;
    float: right;
}

.usercount span {
    display: inline-block;
    padding: 1px 3px;
    background-color: #ccc;
    font-weight: bold;
    border-radius: 3px;
}

.room-pane {
    display: none;
}

.roster-pane {
    position: absolute;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    margin: 30px 0 32px 0;
}

.roster-pane .user {
    cursor: pointer;
    padding: 4px 7px;
    font-size: 12px;
    margin: 0 4px 2px 4px;
    opacity: 0;
    display: none;
    color: #666;
    clear: both;
    height: 15px;
    background-color: #ddd;
}

.roster-pane .user:hover {
    background-color: #eee;
}

.roster-pane .user.status-ignored {
    cursor: default;
}

.roster-pane .user.me {
    font-weight: bold;
    cursor: default;
}

.roster-pane .user.me:hover {
    background-color: #ddd;
}

.roster-pane .label {
    float: left;
    width: 110px;
    overflow: hidden;
    white-space: nowrap;
}

.roster-pane li {
    width: 16px;
    height: 16px;
    float: right;
    display: block;
    margin-left: 3px;
    background-repeat: no-repeat;
    background-position: center;
}

.roster-pane li.role {
    cursor: default;
    display: none;
}

.roster-pane li.role-moderator {
    background-image: url(img/roster/role-moderator.png);
    display: block;
}

.roster-pane li.affiliation-owner {
    background-image: url(img/roster/affiliation-owner.png);
    display: block;
}

.roster-pane li.ignore {
    background-image: url(img/roster/ignore.png);
    display: none;
}

.roster-pane .status-ignored li.ignore {
    display: block;
}

.roster-pane .me li.context {
    display: none;
}

.roster-pane li.context {
    background-image: url(img/action/menu.png);
    cursor: pointer;
}

.roster-pane li.context:hover {
    background-color: #ccc;
    border-radius: 4px;
}

.message-pane-wrapper {
    clear: both;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: auto;
    margin: 30px 200px 32px 0;
    background-color: white;
    font-size: 13px;
}

.message-pane {
    margin: 0;
    padding: 5px 10px 2px 10px;
}

.message-pane dt {
    width: 55px;
    float: left;
    color: #888;
    font-size: 10px;
    text-align: right;
    padding-top: 4px;
}

.message-pane dd {
    overflow: auto;
    padding: 2px 0 1px 130px;
    margin: 0 0 2px 0;
    white-space: -o-pre-wrap; /* Opera */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.message-pane dd .label {
    font-weight: bold;
    white-space: nowrap;
    display: block;
    margin-left: -125px;
    width: 120px;
    float: left;
    overflow: hidden;
}

.message-pane .subject {
    color: #a00;
    font-weight: bold;
}

.message-pane .adminmessage {
    color: #a00;
    font-weight: bold;
}

.message-pane .infomessage {
    color: #888;
    font-style: italic;
    padding-left: 5px;
}

.message-pane .emoticon {
    vertical-align: text-bottom;
    height: 15px;
    width: 15px;
}

.message-form-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    margin-right: 200px;
    border-top: 1px solid #ccc;
    background-color: #f2f2f2;
    height: 31px;
}

.message-form {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-right: 320px;
    padding: 0;
}

.message-form input {
    border: 0 none;
    padding: 5px 10px;
    font-size: 14px;
    width: 100%;
    display: block;
    outline-width: 0;
    background-color: #f2f2f2;
}

.message-form input.submit {
    cursor: pointer;
    background-color: #ccc;
    color: #666;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 3px 203px 3px 3px;
    padding: 5px 7px;
    width: auto;
    font-size: 12px;
    line-height: 12px;
    height: 25px;
    font-weight: bold;
    border-radius: 10px;
}

#tooltip {
    position: absolute;
    z-index: 10;
    display: none;
    margin: 18px -18px 2px -2px;
    color: white;
    font-size: 11px;
    padding: 5px 0;
    background: url(img/tooltip-arrows.gif) no-repeat left bottom;
}

#tooltip div {
    background-color: black;
    padding: 2px 5px;
    zoom: 1;
}

#context-menu {
    position: absolute;
    z-index: 10;
    display: none;
    padding: 15px 10px;
    margin: 8px -28px -8px -12px;
    background: url(img/context-arrows.gif) no-repeat left bottom;
}

#context-menu ul {
    background-color: black;
    color: white;
    font-size: 12px;
    padding: 2px;
    zoom: 1;
}

#context-menu li {
    padding: 3px 5px 3px 20px;
    line-height: 12px;
    cursor: pointer;
    margin-bottom: 2px;
    background: 1px no-repeat;
    white-space: nowrap;
}

#context-menu li:hover {
    background-color: #666;
}

#context-menu li:last-child {
    margin-bottom: 0;
}

#context-menu .private {
    background-image: url(img/action/private.png);
}

#context-menu .ignore {
    background-image: url(img/action/ignore.png);
}

#context-menu .unignore {
    background-image: url(img/action/unignore.png);
}

#context-menu .kick {
    background-image: url(img/action/kick.png);
}

#context-menu .ban {
    background-image: url(img/action/ban.png);
}

#context-menu .subject {
    background-image: url(img/action/subject.png);
}

#context-menu .emoticons {
    padding-left: 5px;
    width: 85px;
    white-space: normal;
}

#context-menu .emoticons:hover {
    background-color: transparent;
}

#context-menu .emoticons img {
    cursor: pointer;
    margin: 3px;
    height: 15px;
    width: 15px;
}

#chat-modal {
    background: url(img/modal-bg.png);
    width: 300px;
    padding: 20px 5px;
    color: white;
    font-size: 16px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -155px;
    margin-top: -45px;
    text-align: center;
    display: none;
    z-index: 100;
    border-radius: 5px;
}

#chat-modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background-image: url(img/overlay.png);
}

#chat-modal.modal-login {
    display: block;
    margin-top: -100px;
}

#chat-modal-spinner {
    display: none;
    margin-left: 15px;
}

#chat-modal form {
    margin: 15px 0;
}

#chat-modal label, #chat-modal input, #chat-modal select {
    display: block;
    float: left;
    line-height: 26px;
    font-size: 16px;
    margin: 5px 0;
}

#chat-modal input, #chat-modal select {
    padding: 2px;
    line-height: 16px;
    width: 150px;
}

#chat-modal label {
     text-align: right;
     padding-right: 1em;
     clear: both;
     width: 100px;
}

#chat-modal input.button {
    float: none;
    display: block;
    margin: 5px auto;
    clear: both;
    position: relative;
    top: 10px;
    width: 200px;
}

#chat-modal .close {
    position: absolute;
    right: 0;
    display: none;
    padding: 0 5px;
    margin: -17px 3px 0 0;
    color: white;
    border-radius: 3px;
}

#chat-modal .close:hover {
    background-color: #333;
}

Here’s the HTML-code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chat</title>
    <link rel="shortcut icon" href="../res/img/favicon.png" type="image/gif" />
    <link rel="stylesheet" type="text/css" href="../res/default.css" />


    <script type="text/javascript" src="libs/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="libs/libs.min.js"></script>
    <script type="text/javascript" src="candy.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            Candy.init('https://123.123.123.123/http-bind/', {
                core: { debug: false, autojoin: ['[e-mail]']  },
                view: { resources: '../res/' }
            });

            Candy.Core.connect('[e-mail]','123');
        });
    </script>
</head>
<body>
    <div id="candy"></div>
</body>
</html>

Answer 1

You can’t. Like Kyle commented: Try to get the source code from the browser. Or did you write down all the CSS without testing it?

You can use Adobe Edge Code (is based on Brackets) to get a live preview while editing the CSS File, but you will need a HTML File that can be opened in the browser that makes use of your CSS Code!