COMP 152 - Lab 6 CSS

lab.css

/* basic structure */
h1, h2, h3, h4 { color: #3366ff; }
h2 { text-indent: .25em; }
h3 { text-indent: 1.5em; }
h2 small {
    font-size: 75%;
    font-weight: normal;
    color: black;
    display: inline;
    margin-left: .5em;
}
p {
    text-indent: 1em;
}
sup {
    font-size: 60%;
}
section {
    border-top: 1px solid black;
    margin-top: 2em;
}
.instructions li {
    margin-bottom: .28em;
}

/* inline styles */
kbd { font-weight: bold; }
.icon {
    background-color: #5d5f60; /* same as Brackets toolbar background */
    border-radius: 3px;
    vertical-align: -30%;
}

/* call-outs */
.note {
    float: right;
    width: 300px;
    margin: 1em;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    background-color: white;
}
.info {
    margin: .5em 3em;
    padding: 20px;
    background-color: #eef;
    border-radius: 5px;
}
figure {
    text-align: center;
    margin: 1em 0;
}
figure > table {
    border-collapse: collapse;
    border: 2px solid black;
    margin: 0 auto;
}
figure td, figure th {
    border: 1px solid #555;
}
figure th {
    background-color: #ccf;
    text-align: center;
    padding: 2px 5px;
}
figure thead > tr:nth-child(2) th {
    background-color: #eef;
    font-weight: normal;
}
figure td {
    padding: 2px 4px;
    text-align: right;
}
figure td:first-child {
    text-align: left;
}

/* code blocks */
pre > code {
    display: block;
    padding: 5px;
    border: 1px solid #aaa;
    background-color: white;
    color: rgb(83, 83, 83);
    font-family: 'SourceCodePro-Medium', monospace;
    font-size: .8em;
    width: 80ch;
    margin: .5em auto;
}
code .tag, code .selector, code .color-keyword {
    color: rgb(68, 111, 189);
}
code .attr, code .literal {
    color: #6d8600;
}
code .attr-val, code .keyword {
    color: #e88501;
}
code .property {
    color: #8757ad;
}


/* assessment table */
.marks {
    border-collapse: collapse;
    border: 2px solid black;
    width: 450px;
    table-layout: fixed;
    margin: 0 2em;
}
.marks td, .marks th {
    border: 1px solid #555;
}
.marks th {
    background-color: #ccf;
    text-align: left;
    padding: 2px 5px;
}
.marks th:nth-child(2), .marks td:last-child {
    width:50px;
    text-align: center;
}
.marks tbody th {
    background-color: #eef;
    text-indent: 1em;
}
.marks td {
    padding: 1px 2px;
}
.marks tr:last-child td:last-child {
    background-color: #ccf;
    font-weight: bold;
}