1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Changing h3 tag with CSS

Discussion in 'CSS' started by EditFast, Nov 1, 2018.

  1. #1
    I want to make the h3 tag without a big space before and after. I had it working with the following inline css:
    <h3 style="margin-bottom: 0; margin-top: 0; line-height: 35px;">Manuscript Editing Services</h3>
    Code (markup):
    But of course I want to add it to the external css file but when I do it doesn't work. I added the following to the css file:
    .hmpg-h3 {
    margin-bottom: 0;
    margin-top: 0;
    line-height: 35px;
    }
    Code (markup):
    the html that goes with it is here:
    <h3 class="hmpg-h3">Manuscript Editing Services</h3>
    I have uploaded the new css file. Emptied my cache and tested it but it is not working. If I "View Source" the HTML includes the new css so it is able to access the new css file fine. What simple thing am I missing?
    SEMrush
     
    Last edited by a moderator: Nov 1, 2018
    EditFast, Nov 1, 2018 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    24,481
    Likes Received:
    3,294
    Best Answers:
    94
    Trophy Points:
    615
    #2
    If you do an inspect can you see if there is another css class that is overriding your class.

    For instance you might have in your header to add custom.css and default.css. Because default.css comes second it will override anything in custom.css if there's a match. Or custom.css might be really long and you've got

    .hmpg-h3 {
    margin-bottom: 0;
    margin-top: 0;
    line-height: 35px;
    }
    h3{
    margin-bottom: 20px;
    }
    Code (markup):
    and then the plain h3 will override the class. Switch the order around and the problem goes away.
     
    sarahk, Nov 1, 2018 IP
  3. EditFast

    EditFast Member

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Thank you for your help, Sarahk. I tried moving my new entry in the css file to the end, which is what I think you mean by "Switch the order around" but it does not make a difference. I searched through the existing CSS file and found dozens of "h3" entries. I put the new one, after the last entry with the h3 in it. Is that what you meant?

    ```
    h1, h2, h3, h4, p, span, a, div {
        font-family: 'Open Sans', sans-serif;
    }
    .ev-sec-1 h3{
        font-size: 24px;
        line-height: 48px;
        color: #7b7979;
        text-align: center;
    }
    .ev-sec-2 h3{
        color: #006400;
        font-size: 16px;
        margin: 15px 0px 20px;
        font-weight: bold;
    }
    .ev-sec-6-1-1 h3 {
        color: #0a6a0a;
        font-size: 20px;
        font-weight: bold;
        padding: 10px 0px 10px 5px;
    }
    .ev-sec-6-1-1 h3 small {
        font-size: 12px;
        color: #333333;
        font-weight: normal;
        margin-left:10px;
    }
    .ev-sec-7 h3:nth-child(4) b {
        color: #ff5d28;
        margin-right: 5px;
    }
    .ev-sec-7 h3:nth-child(4){
        color: #333333;
        margin: 15px 0px;
        font-weight:600;
        font-size: 16px;
    }
    .ev-sec-7 h3:nth-child(7) b {
        color: #ff5d28;
        margin-right: 5px;
    }
    .ev-sec-7 h3:nth-child(7){
        color: #333333;
        margin: 15px 0px;
        font-weight:600;
        font-size: 16px;
        margin-top: 30px;
    }
    .artical-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 18px;
        font-weight: bold;
    }
    .confirmation-sec-1 h3 {
        color:#333333;
        font-size:22px;
        margin-top:10px;
    }
    .policies-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 18px;
        font-weight: bold;
    }
    .step2-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 18px;
        font-weight: bold;
    }
    .register-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .step4-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 18px;
        font-weight: bold;
    }
    .step5-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 18px;
        font-weight: bold;
    }
    .step3-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .my-profile-1-2 h3 {
        font-weight: bold;
     }
    .my-profile-2-2 h3 {
        margin: 0px;
        color: #ff5d28;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    .my-profile-6 h3 {   
        font-size: 16px;
        font-weight: bold;
        color: #006400;
        margin-top:0px;
    }
    .my-profile-6-3 h3 {   
        font-size: 14px;
        font-weight: bold;
        color: #006400;
        margin-top:10px;
    }
    .my-profile-7 h3 {
        font-size: 14px;
        font-weight: bold;
        color: #006400;
        margin-top:25px;
        margin-left:15px;
    }
    .search-4 h3 {
        margin: 0px;
        color: #ff5d28;
        font-size: 16px;
        font-weight: bold;
        border-bottom: 2px solid #7d7b7b;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    .search-5 h3 {
        margin: 0px;
        color: #ff5d28;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 5px;
        margin-bottom: 5px;
        text-align: left;
    }
    .ev-sec-7 h3 {
        text-align:center;
        font-size:16px;
        font-weight:bold;
        color:#000;
        line-height:22px;
    }
    .ev-sec-7-1 h3{
        text-align:left;
        font-size:16px;
        font-weight:bold;
        color:#807f7d;
        line-height:22px;
    }
    .ev-sec-7 h3 b {
        color: #ff5d28;
    }
    .ev-sec-7-m h3{
        text-align:left;
    }
    .confirmation-sec-1 h3 {
        color: #333333;
        font-size: 18px;
        margin-top: 10px;
        line-height: 25px;
    }
    .step5-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 15px;
        font-weight: bold;
    }
    .step4-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 13px;
        font-weight: bold;
    }
    .step3-sec-1 h3 {
        text-align: center;
        color: #006400;
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .my-profile-1-2 h3 {
        font-weight: bold;
        margin: 0px;
        font-size: 16px;
    }
    .my-profile-1-2 h3{
        margin: 0px;
        margin-bottom: 10px;
    }
    .service_provider-sec-3  h3{
        color: #ff5d28;
        font-size: 18px;
        font-weight: bold;
        margin:10px 0px;
    }
    .service-provider-skill-sec-1  h3{
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        margin:10px 0px 20px;
    }
    .my-profile-1-2 h3 {
        font-weight: bold;
        margin: 0px;
        font-size: 28px;
    }
    Code (markup):
    ```

    The page I am working on is here: https://new.editfast.com/index.html

    There are just three css files being used:
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">`
    <link href="css/custome.css" rel="stylesheet">
    Code (markup):
     
    Last edited by a moderator: Nov 2, 2018
    EditFast, Nov 1, 2018 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    24,481
    Likes Received:
    3,294
    Best Answers:
    94
    Trophy Points:
    615
    #4
    OK, you need to learn how to use the developer tools in your browser



    I can see that the class is being applied and then overridden by .ev-sec-1

    upload_2018-11-2_23-26-34.png

    You shouldn't even need that class .hmpg-h3 when you can have

    .ev-sec-1 .ev-sec-2 index2-sec-1 h3

    which will only apply the class when all those conditions are met

    even then you have a list so I'm not sure why you are using <h3> instead of <ul><li> which the search engines will read more easily and is easier to layout.
     
    sarahk, Nov 2, 2018 IP
  5. EditFast

    EditFast Member

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    I am not sure what that means: ".ev-sec-1 .ev-sec-2 index2-sec-1 h3" but these items are all headings of other pages so I want to use the h3 tag. I figured out how to fix it by changing the entry name to this: "h3.hmpg-h3" I am not sure why it works but it does.
     
    EditFast, Nov 2, 2018 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,417
    Likes Received:
    351
    Best Answers:
    27
    Trophy Points:
    335
    #6
    I answered this here. You may need a different selector grouping, but as Sarah says, you're being overridden.

    Oh, it's annoying that you posted and haven't checked back, and cross-posted almost immediately.

    gary
     
    kk5st, Nov 2, 2018 IP
    sarahk likes this.