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?
     
    Last edited by a moderator: Nov 1, 2018
    EditFast, Nov 1, 2018 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #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:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #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,497
    Likes Received:
    376
    Best Answers:
    29
    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.
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    1) Stop using px metric fonts, and in the process telling users with accessibility needs to go f*** themselves.

    2) Stop throwing classes at everything, there is rarely a legitimate need for a H3 to have a class. Cascade off the parent!

    3) Oh, Bootcrap... Well there's your problem... Do yourself a favor, and go find a stick to scrape that off with before tracking it all over your website's carpets. The ONLY thing it is teaching you is how NOT to build a website.

    I mean, static scripting across the entire markup, JavaScript for NOTHING, nothing remotely even resembling semantics or separation of presentation from content, gibberish use of numbered headings, incomplete broken forms, use of scripting in a non graceful degrading manner, specificity hell (the part that's biting you in terms of styling that H3... that shouldn't be a H3), invalid nesting orders (such as the /fail/ of putting an H3 inside a P. Which is it, a heading or a paragraph, it's not both!)

    My advice: Kick bootcrap to the curb, back away from the "JS for NOTHING", and come back at this fresh when you have a proper understanding of how to use HTML and CSS. Your choice of technologies is hobbling your learning and filling your head with bad practices. Said bad practices likely resulting in telling large swaths of potential users to go suck an egg.
     
    deathshadow, Dec 6, 2018 IP
    sarahk likes this.