Gradient Margin Like This Website

Discussion in 'Web Design' started by etangins, May 7, 2013.

to remove all ads.
  1. Frank

    Frank New Member

    Messages:
    117
    etangins,

    Be honest. Your question just concerns an ordinary homework assignment, doesn't it?
     
  2. etangins

    etangins Member

    Messages:
    81
    My question is simply so that I can get a better understanding of website design. I saw a gradient that I liked. Now I see that there might be a better way to create that gradient than with a giant image, and since I know how the example website works specifically where they applied there gradient, I want to know how to recreate that gradient with your code on the website. I merely want to know this for future references so I can improve and be a better designer. Please answer my question.
     
  3. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    Then we are not uderstanding what or maybe WHY you are asking.

    Cascading Styles 101: (The Cliff Notes version)

    CSS code goes in a stylesheet.

    HTML code goes in the HTML document.

    And you make the style rules apply to an element using the tag name for a rule that applies to all those elements.

    eg:
    Code:
    div { 
       border: 1px solid red;
    }
    will give all divs a red border

    Or by a class name for applying the same rule to many different arbitrary elements
    eg:
    HTML:
    <style type="text/css">
    .red-border {
    border: red solid 1px;
    }
    </style>
    
    <div class="red-border">This element has a red border</div>
    
    <p class="red-border">So has this one</p>
    

    OR by an ID where the rule applies to only ONE element in the document.


    HTML:
    <style type="text/css">
    #red-border {
    border: red solid 1px;
    }
    </style>
    
    <div id="red-border">Only THIS element has a red border</div>
    
     

Share This Page