Need Help with my CSS sheet

  • If there is somebody out there who is kind enough to edit my CSS sheet, please help me.I am mostly concerned about the unity and fonts. Especially after new items are added such as Category and Page. Please see if there is any errors and flaws that you may be spot and correct. Again thank you very much in advance. Have a Merry Christmas and Happy Holiday.

    a {
    color:#258;
    }

    a img {
    border: none;
    }

    a:visited {
    color:#635D45;
    }

    acronym, abbr {
    border-bottom: 1px dashed #333;
    }

    acronym, abbr, span.caps {
    font-size: 90%;
    letter-spacing: .07em;
    }

    acronym, abbr {
    cursor: help;
    }

    blockquote {
    border-left: 5px solid #ccc;
    margin-left: 1.5em;
    padding-left: 5px;
    background: #FAFAFA;
    }

    cite {
    font-size: 90%;
    font-style: normal;
    }

    h2 {
    border-bottom: 1px solid #CCC;
    font: 95% Arial Rounded MT Bold;
    letter-spacing: 0.2em;
    margin: 15px 0 2px 0;
    padding-bottom: 2px;
    }

    h3 {
    border-bottom: dotted 1px #eee;
    font-family: “Georgia”, “Lucida Grande”, “Lucida Sans Unicode”, “Trebuchet MS”, Trebuchet, Arial, Arial Rounded MT Bold, sans-serif;
    margin-top: 0;
    }

    ol#comments li p {
    font-size: 100%;
    }

    p, li, .feedback {
    font: 80%/125% “Georgia”, “Lucida Grande”, “Lucida Sans Unicode”, “Trebuchet MS”, Trebuchet, Arial, Arial Rounded MT Bold, sans-serif;
    }

    /* classes used by the_meta() */
    ul.post-meta {
    list-style: none;
    }

    ul.post-meta span.post-meta-key {
    font-weight: bold;
    }

    .credit {
    color: #333;
    clear:both;
    font-size: 11px;
    margin: 0px 0 0 0;
    width: 800px;
    text-align: center;
    background: #EFEFEF;
    letter-spacing: 1px;
    }

    .credit div {
    width: 800px;
    padding: 10px 0px 10px 0px;
    }

    .credit a, .credit a:link {
    color: #999;
    }

    .feedback {
    color: #333;
    text-align: left;
    /*background: #FAFAFA;*/
    padding-right: 4px;
    /*border-right:1px dashed #999;
    border-left:1px dashed #999;
    border-bottom:1px solid #999;
    border-bottom:1px solid #999;*/
    padding-bottom: 15px;
    clear: both;
    }

    .meta {
    font-size: .75em;
    }

    .meta li, ul.post-meta li {
    display: inline;
    }

    .meta ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .meta, .meta a {
    color: #808080;
    font-weight: normal;
    letter-spacing: 0;
    }

    .storytitle {
    margin: 0;
    letter-spacing: 0.1em;
    }

    .storytitle a {
    text-decoration: none;
    color: #3D3D3D;
    }

    #date {
    text-align: left;
    font-size: small;
    color: #333;
    }

    #commentform {
    width: 300px;
    }

    #commentform #author, #commentform #email, #commentform #url, #commentform
    textarea {
    background: #fff;
    border: 1px solid #333;
    padding: .2em;
    }

    #commentform textarea {
    width: 90%;
    }

    #commentform input {
    border: 1px solid #aba;
    }

    #commentlist li ul {
    border-left: 1px solid #ddd;
    font-size: 110%;
    list-style-type: none;
    }

    /* Structure */
    body {
    background: #505050 url(images/bg.gif);
    color: #000;
    font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Trebuchet MS”, Trebuchet, Arial, Arial Rounded MT Bold, sans-serif;
    padding: 0;
    font-size: 14px;

    }

    #page {
    padding: 0px;
    margin: 0 auto 0 auto;
    width:800px;
    }

    #sheet {
    background:#FFF;
    padding-top:4px;
    }

    #content {
    padding-left: 20px;
    padding-right: 22px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #fff;
    margin: 5px 160px 0 170px;
    font-size: 1.2em;
    width: 400px;
    border-left: 1px dashed #999;
    border-right: 1px dashed #999; /*border: 2px solid #999;*/
    }

    #header {
    background:#FFF url(images/header.jpg) no-repeat center top;
    letter-spacing: 0.2em;
    width: 800px;
    margin-top:10px;
    margin-bottom: 10px;
    color: #999;
    padding: 0px;

    }

    #header a {
    color: #B54141;
    font: normal 120% Arial Rounded MT Bold;
    margin-left: 10px;
    text-decoration: none;
    text-align: center;
    color: #333;
    border-top: 2px solid #CCC;
    }

    #header div {
    padding: 15px 10px 15px 15px;
    }

    #header p {
    font-size: 11px;
    padding: 0px;
    }

    #menu {
    background: #FFF;
    padding-right: 10px;
    padding-left: 10px;
    width: 160px;
    float: right;
    }

    #menu-sub {
    padding-left: 2px;
    padding-bottom:10px;
    }

    #menu form {
    margin: 0 0 0 10px;
    width: 100px;
    }

    #menu p {
    font: large Arial Rounded MT Bold;
    margin-top: 0;
    padding: 0;
    padding-left: 2px;
    color: #333;
    width: 160px;
    }

    #menu input#s {
    width: 80%;
    background: #FFF;
    border: 1px solid #CCC;
    color: Black;
    padding: 0.2em;
    }

    #menu ul {
    color: #000066;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding-left: 3px;
    padding-right: 3px;

    }

    #menu ul li {
    font: large Arial Rounded MT Bold;
    margin-top: 10px;
    padding-bottom: 2px;

    }

    #menu ul ul {
    font-variant: normal;
    font-weight: normal;
    line-height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    #menu ul ul li {
    font: normal normal 12px/140% Arial Rounded MT Bold;
    margin-top: 0;
    padding: 0;
    padding-left: 2px;
    background: none;
    }

    #menu ul ul li a {
    color: #000;
    text-decoration: none;
    }

    #menu ul ul li a:hover {
    border-bottom: 1px solid #809080;

    }
    #menu ul ul ul.children {
    font-size: 142%;
    padding-left: 4px;
    }

    #menu img {
    margin: auto;
    }

    /* Left – menu */
    #left-menu {
    background:#fff;
    padding: 2px 0px 0px 4px;
    width:140px;
    float:left;
    margin-left:4px;
    }

    #left-menu-sub {
    padding-left: 10px;
    padding-bottom:10px;
    }

    #left-menu form {
    margin: 0 0 0 14px;
    width: 180px;
    }

    #left-menu p {
    font: normal normal 12px/115% Arial Rounded MT Bold;
    letter-spacing: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 12px;
    color: #333;
    width: 200px;
    }

    #left-menu input#s {
    width: 80%;
    background: #eee;
    border: 1px solid #aba;
    color: #000;
    padding: 0.2em;
    }

    #left-menu ul {
    color: #000066;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding-left: 3px;

    }

    #left-menu ul li {
    font: 110% Arial Rounded MT Bold;
    letter-spacing: 0.1em;
    margin-top: 10px;
    padding-bottom: 2px;

    }

    #left-menu ul ul {
    font-variant: normal;
    font-weight: normal;
    line-height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    #left-menu ul ul li {
    border: 0;
    font: normal normal 12px/115% Arial Rounded MT Bold;
    letter-spacing: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 12px;
    background: none;
    }

    #left-menu ul ul li a {
    color: #000;
    text-decoration: none;
    }

    #left-menu ul ul li a:hover {
    border-bottom: 1px solid #809080;
    }

    #left-menu ul ul ul.children {
    font-size: 142%;
    padding-left: 4px;
    }

    #left-menu img {
    margin: auto;
    }

    #wp-calendar {
    border: 1px solid #ddd;
    empty-cells: show;
    font-size: 14px;
    margin: 0;
    width: 90%;
    }

    #wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }

    #wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }

    #wp-calendar a {
    display: block;
    text-decoration: none;
    }

    #wp-calendar a:hover {
    background: #e0e6e0;
    color: #333;
    }

    #wp-calendar caption {
    color: #999;
    font-size: 16px;
    text-align: right;
    }

    #wp-calendar td {
    color: #ccc;
    font: normal normal 12px Arial Rounded MT Bold;
    padding: 2px 0;
    text-align: center;
    }

    #wp-calendar td.pad:hover {
    background: #fff;
    }

    #wp-calendar td:hover, #wp-calendar #today {
    background: #eee;
    color: #bbb;
    }

    #wp-calendar th {
    font-style: normal;
    text-transform: capitalize;
    }

Viewing 5 replies - 1 through 5 (of 5 total)

  • First of all, use a CSS validator, e.g.

    https://jigsaw.w3.org/css-validator/validator-uri.html

    I have had a cursory look at the code and it seems fine. Expecting somebody to ‘proofread’ the entire thing is a bit optimistic. It is beyond the scope of this forum too. Validators do much of the work autonomously.

    Merry Christmas and good luck with WordPress!

    Thread Starter soyola

    (@soyola)

    I understand. Can you please tell me what would happen if I add new Page or Category to my blog. It seems to me that fonts look different. That was my main question

    1. Don’t post long code here, please!
    It is difficult to read and nobody really bothers to take a look at it. You can use https://pastebin.com or similar services – and post back with the URI.
    For posting small code snippets, please read carefully the instructions here below the text input area: the “backticks” usually are located on top-left of your keyboard, where ~ [tilde] is.
    2. For stylesheet just give us a link and we have the tools to take a look at it.
    3. “Theoretical” questions are mainly useless. Add a Category or a Page and see what happens.

    a {
    color:#258;
    }

    There should be a space between the declaration and the attribute:

    a {
    color: #258;
    }

    h2 {
    [...]
    font: 95% Arial Rounded MT Bold;
    [...]
    }

    Font names with spaces should be set off with double quotes:

    h2 {
    [...]
    font: 95% "Arial Rounded MT Bold";
    [...]
    }

    #menu ul {
    color: #000066;
    [...]
    }

    You can condense this to just #006.

    Also, take schestowitz’ advice: use a validator.

    Thread Starter soyola

    (@soyola)

    Thank you very much. You have been very helpful. I will approach to this forum more careful next time and avoid posting long codes like this

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need Help with my CSS sheet’ is closed to new replies.