Why are there three font titles in CSS codes for Headings?

  • I’ve seen two examples of this.

    This one is in a post from two years ago on this forum for customizing a heading, and it lists three fonts, not just one:

    body h1{
    font-family: Raleway, Helvetica, Arial, sans-serif!important;
    font-size: 32px!important;
    color: red!important;
    }

    This is a CSS for altering blockquotes but it, also, has three fonts in it:
    blockquote {
    max-width: 550px;
    text-align: center;
    margin: 20px;
    padding: 20px;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 20px;
    color: #428bca;
    }

    I don’t understand why there are three fonts for heading 1.

    Maybe for the quote, one is for the style of the quote at the top, one is for the body and one is for the citation line….but I’m confused.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    If Railway, use it. If not, use Helvetica. If not available, then Arial. Finally, fall through to the default san-serif. The fonts are tried in the order specified.

    Thread Starter The Utterance Project

    (@theutteranceproject)

    Perfect, thanks that helps a TON.

    But if I know the font is installed, then I can just write that one font, right?

    Second question, if I want to add CSS to the blockquote but I want the body of the text to be different from the citation/author line, is there a way to indicate that?

    Hey, theutteranceproject, this link should address your first question:
    https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/

    If you can be sure that your font is web safe then you can just specify one font: https://www.w3schools.com/cssref/css_websafe_fonts.asp

    Within a blockquote, there are two elements: a p element as well as a cite element so there will be two selectors that you have for CSS:

    
blockquote p {}

blockquote cite {}
    Thread Starter The Utterance Project

    (@theutteranceproject)

    Ian….

    Thank you so much. Wow.

    Ok.

    So if I can impose on your knowledge and your time for just one further question.

    I’m dealing with a really complicated situation here, and I really want an elegant solution.

    The website I manage has blockquotes in both English and Arabic.

    If I understand you right, this code:

    `blockquote p {}

    blockquote cite {}

    Is to be entered site-wide in this box:

    https://prnt.sc/w6wjif

    As I have two languages, a RightToLeft and a LeftToRight language, setting the blockquote site-wide will leave me with the same problem I currently have.

    What I am wondering is this:

    Is it possible to create two customized blockquote styles WITHIN the CSS for the individual blockquote block I have opened using this CSS box:

    https://prnt.sc/w6wl7r

    And in it, specific the following:

    -Right to left or Left to Right Text alignment
    -Position and size of the open quote icon (Top Left for English Top Right for Arabic)
    -Color of the open quote icon
    -Font of the open quote icon
    -Font family, font size, font weight for blockquote p
    -Font family, font size, font weight for blockquote p
    -Border size and weight for top border and removing bottom border for English reusable block
    -Same border size and weight for bottom border and removing top border for Arabic reusable block

    This is a mockup post where I show what the blockquotes look like on WordPress by default right now, and how I want to customize them to look in reusable custom CSS blockqote blocks for English and for Arabic (the mockups were made with a graphic design program so they are PNG’s)

    Is what I want to do even possible?

    Sorry to ask such a long question. It’s very hard to work with web design in both LTR and RTL languages and I am not a programmer, which sucks, because I really need to be one to accomplish what I need to.

    -Font family, font size, font weight for blockquote cite
    -Line spacing for blockquote p
    -Line spacing for blockquote cite
    -Distance from text of the top separator
    -Distance from text of the bottom blockquote separator
    -Weight and color of the top and bottom separators
    -Removing bottom separator for English blockquote
    -Removing top separator for Arabic blockquote

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Why are there three font titles in CSS codes for Headings?’ is closed to new replies.