Advice on cleaning up css code

by 7 replies
8
I have a sales page with a lot of different styles. The problem is that every time I want to increase font size or make something bold I've been adding on-page code to accomplish this. I know there's a simpler way to add some code in the css and then reference it like <h6>... The problem is this page is completely different styles than the main pages so I can't use h1-h6. Can I just name it something like bigredtxt in the css file and then reference it like <bigredtxt>?

Here's an example of how messy it is:

Code:
<p style="text-align: center;"><span style="font-size: 22px;"><span style="font-family: verdana, geneva;"><strong>When I had my first 10 … </strong></span><span style="font-family: verdana, geneva;"><strong>I knew <span style="text-decoration: underline; background-color: #ffff00;">I had discovered the secrets</span><span style="background-color: #ffff00;"> to being <span style="text-decoration: underline;">successful at blah blah.</span></span></strong></span></span></p>
<p>Something else I discovered along the way is…</p>
<p style="text-align: center;"><span style="font-size: 20px;"><strong>The key to success at blah blah and pretty much anything relies on three major factors:</strong></span></p>
<p>1. <span style="background-color: #ffff00;"><strong>Knowledge-</strong></span> You must gain an in depth understanding of the subject</p>
<p>2. <span style="background-color: #ffff00;"><strong>Action-</strong></span> You have to take action with what you’ve learned</p>
<p>3. <span style="background-color: #ffff00;"><strong>Persistence-</strong></span> You have to work hard at it and constantly strive to get better</p>
<p>Anyone who enjoys blah blah for more than a few weeks can definitely take action and be persistent. If you’re willing to go out and work over and over again just to find stuff then you have potential to be great.</p>
#website design #advice #cleaning #code #css
  • First of all, you should put all of your CSS in a separate file, instead of putting it inline with your HTML code. Read this...

    CSS Tutorial - External

    Any style that you want to use on more than one HTML element should be assigned to a class. For example, you could create a class named "bigredtext" in your CSS file...

    .bigredtext {
    color: red;
    font-size: 48px;
    }

    Then you would simply reference that class in your HTML code...

    <span class="bigredtext">This text will be big and red!</span>

    Also, you can give multiple styles to an element. For example, if you had also created a style named "bold", then the following HTML would be perfectly valid...

    <span class="bigredtext bold">This text will be bold, big and red!</span>

    And you can assign classes to pretty much any HTML element (div, h1, p, etc.)

    So styles from a "class" can be used on as many different HTML elements as you want. Conversely, any styles that are only going to be used on a single element should be assigned to an ID instead of a class, like...

    #somediv {
    background-color: blue;
    }

    To reference an ID style in your HTML code...

    <div id="somediv">This div will have a blue background!</div>

    That's the jist of it. This is a good tutorial on CSS basics...

    CSS Tutorial - Introduction
    • [ 1 ] Thanks
    • [1] reply
    • Very well explained, thanks for the info that's exactly what I was struggling with =)
      • [1] reply
  • Span is an inline-element so it can't be centered... unless you add this:

    Code:
    display: block;
    However, you should probably just use a <p> or <div> tag for this.
    • [1] reply
    • It's on a sales page so I have several large red text that need centered. Are you saying to use inline on each one? or should I style in the css?
  • Post a link and I can take a look. However I think this is what you want to do:

    use paragraph tags instead of span tags.

    Code:
    Change this:
<span class="bigred">text here...</span>
to this:
<p class="bigred">text here...</p>
Join the discussion

Next Topics on Trending Feed

  • 8

    Advice on cleaning up css code

    I have a sales page with a lot of different styles. The problem is that every time I want to increase font size or make something bold I've been adding on-page code to accomplish this. I know there's a simpler way to add some code in the css and then reference it like <h6>... The problem is this page is completely different styles than the main pages so I can't use h1-h6. Can I just name it something like bigredtxt in the css file and then reference it like <bigredtxt>? Here's an example of how messy it is: