8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Advice on cleaning up css code

by Letsurf
7 replies
  • WEB DESIGN
    • |
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>
#advice #cleaning #code #css
  • Profile picture of the author Brandon Tanner
    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
    Signature

    {{ DiscussionBoard.errors[8292710].message }}
    • Profile picture of the author Letsurf
      Originally Posted by Brandon Tanner View Post

      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
      Very well explained, thanks for the info that's exactly what I was struggling with =)
      {{ DiscussionBoard.errors[8292765].message }}
      • Profile picture of the author Letsurf
        Got the class part figured out but can't for the life of me figure out how to center text. Here's what I have and not working:

        Code:
        <span class="bigred" style="text-align: center;">text here...</span>
        {{ DiscussionBoard.errors[8293490].message }}
        • Profile picture of the author Letsurf
          Here is what I have in the css file:

          Code:
          .bigred {
	color: #990000;
	font-family: Impact;
	font-size: 36px;
	line-height: 1.6;
	text-decoration: none;
        text-align: center;
}
          Here is what I have in the page code:

          Code:
          <span class="bigred">text here...</span>
          The text is red but won't center on the page. Am I doing something wrong?
          {{ DiscussionBoard.errors[8293517].message }}
  • Profile picture of the author Andrew H
    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.
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[8293642].message }}
    • Profile picture of the author Letsurf
      Originally Posted by Andrew H View Post

      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.
      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?
      {{ DiscussionBoard.errors[8293673].message }}
  • Profile picture of the author Andrew H
    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>
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[8293703].message }}

Trending Topics