Make Index external CSS

Discussion in 'HTML and CSS' started by falcon, Mar 25, 2019.

  1. falcon

    falcon

    Joined:
    Nov 5, 2018
    Messages:
    2
    Likes Received:
    0
    How can I make this "Bible Index" (shown below) external CSS. It is shown on the top of each page now, but it would be
    a large memory saving if it was External CSS

    [code}
    <link rel="STYLESHEET" type="text/css" href="default.css">
    <style type="text/css">
    .lftcol { float:left;width:14%;margin-bottom:5px; }
    </style>
    </head>
    <body background="../Images/creamswirl.gif">
    <dl>
    <font size="+3"><b><center>
    <a href="../index.htm">Index: King James Version #2</a></center><br>
    Old Testament</b></font><br>
    <!-- left column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>&nbsp;1 <a href="01_001.htm">Genesis</a></b></dt>
    <dt>&nbsp;<b>&nbsp;2 <a href="02_001.htm">Exodus</a></b></dt>
    <dt>&nbsp;<b>&nbsp;3 <a href="03_001.htm">Leviticus</a></b></dt>
    <dt>&nbsp;<b>&nbsp;4 <a href="04_001.htm">Numbers</a></b></dt>
    <dt>&nbsp;<b>&nbsp;5 <a href="05_001.htm">Deuteronomy</a></b></dt>
    <dt>&nbsp;<b>&nbsp;6 <a href="06_001.htm">Joshua</a></b></dt></dl>
    <!-- left middle column -->
    <dl class="lftcol">
    <dt>&nbsp;&nbsp;&nbsp;<b>7 <a href="07_001.htm">Judges</a></b></dt>
    <dt>&nbsp;&nbsp;&nbsp;<b>8 <a href="08_001.htm">Ruth</a></b></dt>
    <dt>&nbsp;&nbsp;&nbsp;<b>9 <a href="09_001.htm">1 Samuel</a></b></dt>
    <dt>&nbsp;<b>10 <a href="10_001.htm">2 Samuel</a></b></dt>
    <dt>&nbsp;<b>11 <a href="11_001.htm">1 Kings</a></b></dt>
    <dt> &nbsp;<b>12 <a href="12_001.htm">2 Kings</a></b></dt></dl>
    <!-- left left middle column -->
    <dl class="lftcol">
    <dt>&nbsp;<b>13 <a href="13_001.htm">1 Chronicles</a></b></dt>
    <dt>&nbsp;<b>14 <a href="14_001.htm">2 Chronicles</a></b></dt>
    <dt>&nbsp;<b>15 <a href="15_001.htm">Ezra</a></b></dt>
    <dt>&nbsp;<b>16 <a href="16_001.htm">Nehemiah</a></b></dt>
    <dt>&nbsp;<b>17 <a href="17_001.htm">Esther</a></b></dt>
    <dt>&nbsp;<b>18 <a href="18_001.htm">Job</a></b></dt></dl>
    <!-- middle column -->
    <dl class="lftcol">
    <dt>&nbsp;<b>19 <a href="19_001.htm">Psalms</a></b></dt>
    <dt>&nbsp;<b>20 <a href="20_001.htm">Proverbs</a></b></dt>
    <dt>&nbsp;<b>21 <a href="21_001.htm">Ecclesiastes</a></b></dt>
    <dt>&nbsp;<b>22 <a href="22_001.htm">Song of Solomon</a></b></dt>
    <dt>&nbsp;<b>23 <a href="23_001.htm">Isaiah</a></b></dt>
    <dt>&nbsp;<b>24 <a href="24_001.htm">Jeremiah</a></b></dt></dl>
    <!-- right right middle column -->
    <dl class="lftcol">
    <dt>&nbsp;<b>25 <a href="25_001.htm">Lamentations</a></b></dt>
    <dt>&nbsp;<b>26 <a href="26_001.htm">Ezekiel</a></b></dt>
    <dt>&nbsp;<b>27 <a href="27_001.htm">Daniel</a></b></dt>
    <dt>&nbsp;<b>28 <a href="28_001.htm">Hosea</a></b></dt>
    <dt>&nbsp;<b>29 <a href="29_001.htm">Joel</a></b></dt>
    <dt>&nbsp;<b>30 <a href="30_001.htm">Amos</a></b></dt></dl>
    <!-- right middle column -->
    <dl class="lftcol">
    <dt>&nbsp;<b>31&nbsp;<a href="31_001.htm">Obadiah</a></b></dt>
    <dt>&nbsp;<b>32 <a href="32_001.htm">Jonah</a></b></dt>
    <dt>&nbsp;<b>33 <a href="33_001.htm">Micah</a></b></dt>
    <dt>&nbsp;<b>34 <a href="34_001.htm">Nahum</a></b></dt>
    <dt>&nbsp;<b>35 <a href="35_001.htm">Habakkuk</a></b></dt>
    <dt>&nbsp;<b>36 <a href="36_001.htm">Zephaniah</a></b></dt></dl>
    <!-- right column -->
    <dl class="lftcol">
    <dt>&nbsp;<b>37 <a href="37_001.htm">Haggai</a></b></dt>
    <dt>&nbsp;<b>38 <a href="38_001.htm">Zechariah</a></b></dt>
    <dt>&nbsp;<b>39 <a href="39_001.htm">Malachi</a></b></dt>
    <dt>&nbsp;</dt>
    <dt>&nbsp;</dt>
    <dt>&nbsp;</dt>
    </dl>

    <font size="+3"><b>New Testament</b></font><br>
    <!-- left column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>40 <a href="40_001.htm#anchor2018">Matthew</a></b></dt>
    <dt>&nbsp;<b>41 <a href="41_001.htm#anchor2467">Mark</a></b></dt>
    <dt>&nbsp;<b>42 <a href="42_001.htm#anchor1747">Luke</a></b></dt>
    <dt>&nbsp;<b>43 <a href="43_001.htm">John</a></dt></dl>
    <!-- left column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>44 <a href="44_001.htm#anchor12070">Acts</a></b></dt>
    <dt>&nbsp;<b>45 <a href="45_001.htm#anchor22960">Romans</a></b></dt>
    <dt>&nbsp;<b>46 <a href="46_001.htm#anchor27708">1 Corinthians</a></b></dt>
    <dt>&nbsp;<b>47 <a href="47_001.htm#anchor34475">2 Corinthians</a></b></dt></dl>
    <!-- left column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>48 <a href="48_001.htm#anchor6826">Galatians</a></b></dt>
    <dt>&nbsp;<b>49 <a href="49_001.htm#anchor30234">Ephesians</a></b></dt>
    <dt>&nbsp;<b>50 <a href="50_001.htm#anchor22516">Philippians</a></b></dt>
    <dt> &nbsp;<b>51 <a href="51_001.htm#anchor28733">Colossians</a></b></dt></dl>
    <!-- left column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>52 <a href="52_001.htm#anchor38758">1 Thessalonians</a></b></dt>
    <dt>&nbsp;<b>53 <a href="53_001.htm#anchor44844">2 Thessalonians</a></b></dt>
    <dt>&nbsp;<b>54 <a href="54_001.htm#anchor51196">1 Timothy</a></b></dt>
    <dt>&nbsp;<b>55 <a href="55_001.htm#anchor56816">2 Timothy</a></b></dt></dl>
    <!-- left column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>56 <a href="56_001.htm#anchor64699">Titus</a></b></dt>
    <dt>&nbsp;<b>57 <a href="57_001.htm#anchor71053">Philemon</a></b></dt>
    <dt>&nbsp;<b>58 <a href="58_001.htm#anchor77238">Hebrews</a></b></dt>
    <dt>&nbsp;<b>59 <a href="59_001.htm#anchor83135">James</a></b></dt></dl>
    <!-- left column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>60 <a href="60_001.htm#anchor88748">1 Peter</a></b></dt>
    <dt>&nbsp;<b>61 <a href="61_001.htm#anchor94160">2 Peter</a></b></dt>
    <dt>&nbsp;<b>62 <a href="62_001.htm#anchor100293">1 John</a></b></dt>
    <dt>&nbsp;<b>63 <a href="63_001.htm#anchor106472">2 John</a></b></dt></dl>
    <!-- right column -->
    <dl class="lftcol"><font size="+2">
    <dt>&nbsp;<b>64 <a href="64_001.htm#anchor111551">3 John</a></b></dt>
    <dt>&nbsp;<b>65 <a href="65_001.htm#anchor116676">Jude</a></b></dt>
    <dt>&nbsp;<b>66 <a href="66_001.htm#anchor121990">Revelation</a></b></dt>
    <dt>&nbsp;</dt><br></dl></b>
    [/code]
     
    falcon, Mar 25, 2019
    #1
    1. Advertisements

  2. falcon

    deathshadow

    Joined:
    May 26, 2019
    Messages:
    2
    Likes Received:
    0
    Could you better define what you're asking? I mean, you have classes so... or are you referring to the numbers?

    Really your HTML is gibberish and horrifically out of date. This is 2019, not 1998... there's no such thing as a <font> tag, <center> tag, size attribute, etc, etc, etc. Those stopped being something that should be used in HTML two decades ago.

    Likewise you have DL with a bunch of DT (terms) without DD (definitions) which is not even CLOSE to DL's job. It's borken into multiple lists in a case where semantically and grammatically you have only ONE list... and an ordered list at that.

    Then there's the use of FONT where even if it still existed your code is invalid (font is phrase level, it can't be a direct child of DL), bold around things that are not proper names and/or legal entities, center+b+font doing H1's job...

    For example:

    Code (Text):

    <dl>
    <font size="+3"><b><center>
    <a href="../index.htm">Index: King James Version #2</a></center><br>
    Old Testament</b></font><br>
    Even 20 years ago that's invalid gibberish. You have a HEADING describing the content. As the first heading on the page and/or the heading that should be THE heading (singular) of all pages on a site, that's H1's job. But even when it was still valid, DL only has TWO tags that are valid direct children -- DT and DD. Whilst it's acceptable to have multiple DD per DT, it's utter nonsense to have DT without DD.

    So... first step? Let's drag that HTML kicking and screaming into THIS century ... preferably before the century is out.

    Code (Text):

    <!--
        HTML 5 validation will complain about projection and TV, ignore that
        noise, there's still plenty of kiosks and devices that need them.
     
        This is 2019, you don't have to say type="" on LINK when rel="stylesheet"
        or on SCRIPT tags.
     
        Also call the stylesheet something USEFUL, like "screen" because it's the
        screen media stylesheet. "style.css" or "default.css" are painfully vague
        once you get into the idea that stylesheets are SUPPOSED to have media
        targets such as screen, print, speech, tty, braille, etc, etc.
     
        Any time -- pretty much since CSS was introduced -- you see a LINK tag
        where the rel="stylesheet" and there's no media="" on it -- or someone
        is setting media="all" -- you're looking at ignorance, incompetence,
        or outright ineptitude!
    -->
    <link
        rel="stylesheet"
        href="screen.css"
        media="screen,projection,tv"
    >
    </head><body>
    <!--
        You want to set a background, do it in the stylesheet! 99% of the time you
        see style="" and 100% of the time you see <style> somebody is doing it
        ALL WRONG!
    -->

    <!--
        H1 is THE heading (singular) that everything on EVERY page is a
        subsection of. Numbered headings do NOT mean fonts in different weights
        and sizes, they mean the start of sections and subsections!

        If you need to "../" in your HTML, there's probably something wrong with your
        directory structure.
    -->
    <h1><a href="/">Index: King James Version #2</a></h1>

    <!-- H2 marks the start of a major subsection of the page -->
    <h2>Old Testament</h2>
    <!--
        The chapters are a list in numerical order, there's a tag for that, let's
        go ahead and actually use it!
    -->
    <ol id="oldTestament" class="chapters">
        <li><a href="01_001.htm">Genesis</a></li>
        <li><a href="02_001.htm">Exodus</a></li>
        <li><a href="03_001.htm">Leviticus</a></li>
        <li><a href="04_001.htm">Numbers</a></li>
        <li><a href="05_001.htm">Deuteronomy</a></li>
        <li><a href="06_001.htm">Joshua</a></li>
        <li><a href="07_001.htm">Judges</a></li>
        <li><a href="08_001.htm">Ruth</a></li>
        <li><a href="09_001.htm">1 Samuel</a></li>
        <li><a href="10_001.htm">2 Samuel</a></li>
        <li><a href="11_001.htm">1 Kings</a></li>
        <li><a href="12_001.htm">2 Kings</a></li>
        <li><a href="13_001.htm">1 Chronicles</a></li>
        <li><a href="14_001.htm">2 Chronicles</a></li>
        <li><a href="15_001.htm">Ezra</a></li>
        <li><a href="16_001.htm">Nehemiah</a></li>
        <li><a href="17_001.htm">Esther</a></li>
        <li><a href="18_001.htm">Job</a></li>
        <li><a href="19_001.htm">Psalms</a></li>
        <li><a href="20_001.htm">Proverbs</a></li>
        <li><a href="21_001.htm">Ecclesiastes</a></li>
        <li><a href="22_001.htm">Song of Solomon</a></li>
        <li><a href="23_001.htm">Isaiah</a></li>
        <li><a href="25_001.htm">Lamentations</a></li>
        <li><a href="26_001.htm">Ezekiel</a></li>
        <li><a href="27_001.htm">Daniel</a></li>
        <li><a href="28_001.htm">Hosea</a></li>
        <li><a href="29_001.htm">Joel</a></li>
        <li><a href="30_001.htm">Amos</a></li>
        <li><a href="31_001.htm">Obadiah</a></li>
        <li><a href="32_001.htm">Jonah</a></li>
        <li><a href="33_001.htm">Micah</a></li>
        <li><a href="34_001.htm">Nahum</a></li>
        <li><a href="35_001.htm">Habakkuk</a></li>
        <li><a href="36_001.htm">Zephaniah</a></li>
        <li><a href="37_001.htm">Haggai</a></li>
        <li><a href="38_001.htm">Zechariah</a></li>
        <li><a href="39_001.htm">Malachi</a></li>
    </ol>

    <!-- H2 marks the start of a major subsection of the page -->
    <h2>New Testament</h2>
    <!--
        TECHNICALLY the "start" attribute on OL no longer exists, which is one
        of the FEW things removed in HTML 4 Strict two decades ago I heartily
        disagree with. The count are semantic indicators, so I violate the
        current "specification" out of practicality on this ONE thing. Even
        though as I keep saying it's 2019 not 1998.
    -->
    <ol id="newTestament" class="chapters" start="40">
        <li><a href="40_001.htm#anchor2018">Matthew</a></li>
        <li><a href="41_001.htm#anchor2467">Mark</a></li>
        <li><a href="42_001.htm#anchor1747">Luke</a></li>
        <li><a href="43_001.htm">John</a></li>
        <li><a href="44_001.htm#anchor12070">Acts</a></li>
        <li><a href="45_001.htm#anchor22960">Romans</a></li>
        <li><a href="46_001.htm#anchor27708">1 Corinthians</a></li>
        <li><a href="47_001.htm#anchor34475">2 Corinthians</a></li>
        <li><a href="48_001.htm#anchor6826">Galatians</a></li>
        <li><a href="49_001.htm#anchor30234">Ephesians</a></li>
        <li><a href="50_001.htm#anchor22516">Philippians</a></li>
        <li><a href="51_001.htm#anchor28733">Colossians</a></li>
        <li><a href="52_001.htm#anchor38758">1 Thessalonians</a></li>
        <li><a href="53_001.htm#anchor44844">2 Thessalonians</a></li>
        <li><a href="54_001.htm#anchor51196">1 Timothy</a></li>
        <li><a href="55_001.htm#anchor56816">2 Timothy</a></li>
        <li><a href="56_001.htm#anchor64699">Titus</a></li>
        <li><a href="57_001.htm#anchor71053">Philemon</a></li>
        <li><a href="58_001.htm#anchor77238">Hebrews</a></li>
        <li><a href="59_001.htm#anchor83135">James</a></li>
        <li><a href="60_001.htm#anchor88748">1 Peter</a></li>
        <li><a href="61_001.htm#anchor94160">2 Peter</a></li>
        <li><a href="62_001.htm#anchor100293">1 John</a></li>
        <li><a href="63_001.htm#anchor106472">2 John</a></li>
        <li><a href="64_001.htm#anchor111551">3 John</a></li>
        <li><a href="65_001.htm#anchor116676">Jude</a></li>
        <li><a href="66_001.htm#anchor121990">Revelation</a></li>
    </ol>

     
    I overcommented to explain the choices.

    EVERYTHING else you're trying to do goes into the external stylesheet. To make those lists into columns?

    Code (Text):
    .chapters {
        columns:6;
    }
    Columns is a relatively new CSS 3 feature, but it is extremely well supported. Pretty much anything newer than IE9 supports it, and at this point if someone still using IE9/earlier gets one single column instead of multiples, OH FREAKING WELL! We can't keep bending over backwards for people who refuse to upgrade past 2008. The page will still be USABLE, it just won't have columns. Close Enough!

    I would suggest figuring out at what width (in EM) the page breaks or doesn't fit, and using media queries to change the number of columns as appropriate. To that end, all your font-sizes should also be declared in EM in the CSS, not PX so that it meets accessibility minimums.

    That roughly what you're asking? The OL automatically provides the numbers, if you dislike the inclusion of the period after the number, we can change that with CSS though I forget the exact syntax right this minute... but again, ANYTHING else you're doing there belongs in the stylesheet.

    The thing to remember is that HTML is for saying what things are structurally and grammatically. As such tags like FONT and CENTER, the use of tables for layout, and so forth is flat out wrong and NEVER should have been added to HTML 3.2 or kept in HTML 4 Transitional. (transitional literally meaning in transition from 1997 to 1998 development practices!). it's why saying things like class="text-center box-shadow col-s-4 col-m-6" is mentally enfeebled trash. (sorry bootcrap fans... no, not sorry!)

    It's called "semantic markup" -- using HTML to say what things are, then using external CSS to say how things should be presented for each different type of media (screen, print, speech, braille). "semantic markup" being little more than a sick euphemism we use so as not to offend those who've failed to pull their cranium out of 1997's rectum, and still just vomit up HTML 3.2 style methodology whilst slopping a 4 Tranny or 5 lip-service DOCTYPE at the top.

    Fun test of my first post here; let's see if this is another echo-chamber of the brainwashed where DARING to badmouth bootstrap and a few harsh -- but helpful -- words are auto-ban worthy.
     
    Last edited: May 26, 2019
    deathshadow, May 26, 2019
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.