Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. How can I combine this CSS code ?

How can I combine this CSS code ?

Scheduled Pinned Locked Moved Web Development
questioncssarchitecture
16 Posts 5 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Mohammad Dayyan
    wrote on last edited by
    #1

    Hi all. Do you know how we can combine this CSS code :

    body {
    background-color: #615a49;
    color: #F4F5EF;
    text-align: center;
    margin: 0 auto;
    min-height: 100%;
    height: 100%;
    line-height: 17px;
    font-family: Tahoma;
    font-size: 12px;
    font-weight: normal;
    }
    .css_class1{
    background-color: #988F81;
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: #F6F5F2;
    border-left-color: #F6F5F2;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #333333;
    border-bottom-color: #333333;
    color: #000000;
    }

    G P 2 Replies Last reply
    0
    • M Mohammad Dayyan

      Hi all. Do you know how we can combine this CSS code :

      body {
      background-color: #615a49;
      color: #F4F5EF;
      text-align: center;
      margin: 0 auto;
      min-height: 100%;
      height: 100%;
      line-height: 17px;
      font-family: Tahoma;
      font-size: 12px;
      font-weight: normal;
      }
      .css_class1{
      background-color: #988F81;
      border-top-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-left-style: solid;
      border-top-color: #F6F5F2;
      border-left-color: #F6F5F2;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-right-style: solid;
      border-bottom-style: solid;
      border-right-color: #333333;
      border-bottom-color: #333333;
      color: #000000;
      }

      G Offline
      G Offline
      Guffa
      wrote on last edited by
      #2

      What do you mean when you say that you want to "combine" the code? Usually you combine something with something else, so what do you want to combine it with?

      Despite everything, the person most likely to be fooling you next is yourself.

      M 1 Reply Last reply
      0
      • M Mohammad Dayyan

        Hi all. Do you know how we can combine this CSS code :

        body {
        background-color: #615a49;
        color: #F4F5EF;
        text-align: center;
        margin: 0 auto;
        min-height: 100%;
        height: 100%;
        line-height: 17px;
        font-family: Tahoma;
        font-size: 12px;
        font-weight: normal;
        }
        .css_class1{
        background-color: #988F81;
        border-top-width: 1px;
        border-left-width: 1px;
        border-top-style: solid;
        border-left-style: solid;
        border-top-color: #F6F5F2;
        border-left-color: #F6F5F2;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-right-style: solid;
        border-bottom-style: solid;
        border-right-color: #333333;
        border-bottom-color: #333333;
        color: #000000;
        }

        P Offline
        P Offline
        Paul Conrad
        wrote on last edited by
        #3

        Be more clear as to what you are trying to achieve.

        "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

        M 1 Reply Last reply
        0
        • P Paul Conrad

          Be more clear as to what you are trying to achieve.

          "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

          M Offline
          M Offline
          Mohammad Dayyan
          wrote on last edited by
          #4

          I'm so sorry for my English. I'm new. I'd like to reduce above css code. For example we can write

          background: #746c5e url('image/body.jpg') repeat-y center;

          instead of

          background-image: url('image/body.jpg');
          background-repeat: repeat-y;
          background-position: center;

          Do you understand what I mean ?

          P 1 Reply Last reply
          0
          • M Mohammad Dayyan

            I'm so sorry for my English. I'm new. I'd like to reduce above css code. For example we can write

            background: #746c5e url('image/body.jpg') repeat-y center;

            instead of

            background-image: url('image/body.jpg');
            background-repeat: repeat-y;
            background-position: center;

            Do you understand what I mean ?

            P Offline
            P Offline
            Paul Conrad
            wrote on last edited by
            #5

            Well, what is wrong with the original?

            background-image: url('image/body.jpg');
            background-repeat: repeat-y;
            background-position: center;

            "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

            M 1 Reply Last reply
            0
            • P Paul Conrad

              Well, what is wrong with the original?

              background-image: url('image/body.jpg');
              background-repeat: repeat-y;
              background-position: center;

              "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

              M Offline
              M Offline
              Mohammad Dayyan
              wrote on last edited by
              #6

              I want to reduce this code like that : Can you ?

              css_class1{
              background-color: #988F81;
              border-top-width: 1px;
              border-left-width: 1px;
              border-top-style: solid;
              border-left-style: solid;
              border-top-color: #F6F5F2;
              border-left-color: #F6F5F2;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-right-style: solid;
              border-bottom-style: solid;
              border-right-color: #333333;
              border-bottom-color: #333333;
              color: #000000;
              }

              J P 2 Replies Last reply
              0
              • M Mohammad Dayyan

                I want to reduce this code like that : Can you ?

                css_class1{
                background-color: #988F81;
                border-top-width: 1px;
                border-left-width: 1px;
                border-top-style: solid;
                border-left-style: solid;
                border-top-color: #F6F5F2;
                border-left-color: #F6F5F2;
                border-right-width: 1px;
                border-bottom-width: 1px;
                border-right-style: solid;
                border-bottom-style: solid;
                border-right-color: #333333;
                border-bottom-color: #333333;
                color: #000000;
                }

                J Offline
                J Offline
                Johnny
                wrote on last edited by
                #7

                W3Schools

                1 Reply Last reply
                0
                • M Mohammad Dayyan

                  I want to reduce this code like that : Can you ?

                  css_class1{
                  background-color: #988F81;
                  border-top-width: 1px;
                  border-left-width: 1px;
                  border-top-style: solid;
                  border-left-style: solid;
                  border-top-color: #F6F5F2;
                  border-left-color: #F6F5F2;
                  border-right-width: 1px;
                  border-bottom-width: 1px;
                  border-right-style: solid;
                  border-bottom-style: solid;
                  border-right-color: #333333;
                  border-bottom-color: #333333;
                  color: #000000;
                  }

                  P Offline
                  P Offline
                  Paul Conrad
                  wrote on last edited by
                  #8

                  Mohammad Dayyan wrote:

                  Can you ?

                  Sure, but can you? No point in me doing it for you (no financial reward for me) when you should be the one learning how to do it ;P

                  "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

                  M 1 Reply Last reply
                  0
                  • P Paul Conrad

                    Mohammad Dayyan wrote:

                    Can you ?

                    Sure, but can you? No point in me doing it for you (no financial reward for me) when you should be the one learning how to do it ;P

                    "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

                    M Offline
                    M Offline
                    Mohammad Dayyan
                    wrote on last edited by
                    #9

                    Hey Paul . Actually I can't. I'm in hurry and if you can Please do it. :-O

                    P 1 Reply Last reply
                    0
                    • M Mohammad Dayyan

                      Hey Paul . Actually I can't. I'm in hurry and if you can Please do it. :-O

                      P Offline
                      P Offline
                      Paul Conrad
                      wrote on last edited by
                      #10

                      Mohammad Dayyan wrote:

                      I'm in hurry

                      Missing the part where that's my problem :|

                      Mohammad Dayyan wrote:

                      Please do it

                      Ummmmm........no ;P

                      "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

                      M 1 Reply Last reply
                      0
                      • P Paul Conrad

                        Mohammad Dayyan wrote:

                        I'm in hurry

                        Missing the part where that's my problem :|

                        Mohammad Dayyan wrote:

                        Please do it

                        Ummmmm........no ;P

                        "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

                        M Offline
                        M Offline
                        Mohammad Dayyan
                        wrote on last edited by
                        #11

                        :laugh: However thanks my friend

                        S 1 Reply Last reply
                        0
                        • G Guffa

                          What do you mean when you say that you want to "combine" the code? Usually you combine something with something else, so what do you want to combine it with?

                          Despite everything, the person most likely to be fooling you next is yourself.

                          M Offline
                          M Offline
                          Mohammad Dayyan
                          wrote on last edited by
                          #12

                          I'm so sorry for my English. I'm new. I'd like to reduce above css code. For example we can write

                          background: #746c5e url('image/body.jpg') repeat-y center;

                          instead of

                          background-image: url('image/body.jpg');
                          background-repeat: repeat-y;
                          background-position: center;

                          Do you understand what I mean ? I want to reduce this code like that :

                          css_class1{
                          background-color: #988F81;
                          border-top-width: 1px;
                          border-left-width: 1px;
                          border-top-style: solid;
                          border-left-style: solid;
                          border-top-color: #F6F5F2;
                          border-left-color: #F6F5F2;
                          border-right-width: 1px;
                          border-bottom-width: 1px;
                          border-right-style: solid;
                          border-bottom-style: solid;
                          border-right-color: #333333;
                          border-bottom-color: #333333;
                          color: #000000;
                          }

                          G 1 Reply Last reply
                          0
                          • M Mohammad Dayyan

                            I'm so sorry for my English. I'm new. I'd like to reduce above css code. For example we can write

                            background: #746c5e url('image/body.jpg') repeat-y center;

                            instead of

                            background-image: url('image/body.jpg');
                            background-repeat: repeat-y;
                            background-position: center;

                            Do you understand what I mean ? I want to reduce this code like that :

                            css_class1{
                            background-color: #988F81;
                            border-top-width: 1px;
                            border-left-width: 1px;
                            border-top-style: solid;
                            border-left-style: solid;
                            border-top-color: #F6F5F2;
                            border-left-color: #F6F5F2;
                            border-right-width: 1px;
                            border-bottom-width: 1px;
                            border-right-style: solid;
                            border-bottom-style: solid;
                            border-right-color: #333333;
                            border-bottom-color: #333333;
                            color: #000000;
                            }

                            G Offline
                            G Offline
                            Guffa
                            wrote on last edited by
                            #13

                            I see. Like this:

                            css_class1{
                            background-color: #988F81;
                            border-top: 1px solid #F6F5F2;
                            border-left: 1px solid #F6F5F2;
                            border-right: 1px solid #333333;
                            border-bottom: 1px solid #333333;
                            color: #000000;
                            }

                            or like this:

                            css_class1{
                            background-color: #988F81;
                            border: 1px solid;
                            border-color: #F6F5F2 #333333 #333333 #F6F5F2;
                            color: #000000;
                            }

                            Despite everything, the person most likely to be fooling you next is yourself.

                            M 1 Reply Last reply
                            0
                            • M Mohammad Dayyan

                              :laugh: However thanks my friend

                              S Offline
                              S Offline
                              stevio
                              wrote on last edited by
                              #14

                              What you need to be doing is looking at the code, and seeing what you're duplicating. Pull out the common elements, and then see what you have left. Try something like: .css_class1{ background-color: #988F81; color: #000000; border: solid 1px #F6F5F2; border-right-color: #333333; border-bottom-color #333333; } There's further improvements that can be made, but that's a start. In fact, since you seem to be trying to get a 3d effect on the edges of the border, you could try replacing it with "border-style: inset", or "border style: outset", which probably won't display identically to your first sample, but is a standard style with shorter markup. eg: .css_class1{ background-color: #988F81; color: #000000; border-style: outset; }

                              M 1 Reply Last reply
                              0
                              • S stevio

                                What you need to be doing is looking at the code, and seeing what you're duplicating. Pull out the common elements, and then see what you have left. Try something like: .css_class1{ background-color: #988F81; color: #000000; border: solid 1px #F6F5F2; border-right-color: #333333; border-bottom-color #333333; } There's further improvements that can be made, but that's a start. In fact, since you seem to be trying to get a 3d effect on the edges of the border, you could try replacing it with "border-style: inset", or "border style: outset", which probably won't display identically to your first sample, but is a standard style with shorter markup. eg: .css_class1{ background-color: #988F81; color: #000000; border-style: outset; }

                                M Offline
                                M Offline
                                Mohammad Dayyan
                                wrote on last edited by
                                #15

                                Than you very much

                                1 Reply Last reply
                                0
                                • G Guffa

                                  I see. Like this:

                                  css_class1{
                                  background-color: #988F81;
                                  border-top: 1px solid #F6F5F2;
                                  border-left: 1px solid #F6F5F2;
                                  border-right: 1px solid #333333;
                                  border-bottom: 1px solid #333333;
                                  color: #000000;
                                  }

                                  or like this:

                                  css_class1{
                                  background-color: #988F81;
                                  border: 1px solid;
                                  border-color: #F6F5F2 #333333 #333333 #F6F5F2;
                                  color: #000000;
                                  }

                                  Despite everything, the person most likely to be fooling you next is yourself.

                                  M Offline
                                  M Offline
                                  Mohammad Dayyan
                                  wrote on last edited by
                                  #16

                                  Thank you Guffa

                                  1 Reply Last reply
                                  0
                                  Reply
                                  • Reply as topic
                                  Log in to reply
                                  • Oldest to Newest
                                  • Newest to Oldest
                                  • Most Votes


                                  • Login

                                  • Don't have an account? Register

                                  • Login or register to search.
                                  • First post
                                    Last post
                                  0
                                  • Categories
                                  • Recent
                                  • Tags
                                  • Popular
                                  • World
                                  • Users
                                  • Groups