5 Replies Latest reply: Jul 5, 2013 6:03 PM by mytaxsite.co.uk RSS

    What is the best way to change to color of the first word in a paragraph?

    rgrstvr Community Member

      I have a lot of paragraphs where I want the first word to keep the same font, size, type - but I want to change just the color of the lettering.

        • 1. Re: What is the best way to change to color of the first word in a paragraph?
          mytaxsite.co.uk MVP

          Using a span and setting it a class to make your changes.  For example your HTML might be like this:

           

           

          <p><span class="first-word">This</span> is paragraph number one</p>

           

          Then you create a style like this:

           

           

          .first-word {

              color: red;

           

          NOTICE that there is a period before first-word in the style definition.

           

          Hope this gives you a start.

          • 2. Re: What is the best way to change to color of the first word in a paragraph?
            Nancy O. MVP

            With HTML and CSS there are usually many ways to achieve what you want.

             

            I might approach it like this:

             

            CSS:

                 p:first-child em {color:red}

             

             

            HTML:

                 <p><em>First</em> word is emphasized in red.</p>

             

             

            Nancy O.

            • 3. Re: What is the best way to change to color of the first word in a paragraph?
              Herbert2001 Community Member

              p:first-child em {} is overqualifying that selector, I think. First, you do not need the :first-child pseudo element to target that first paragraph, since you already have that <em> tag surrounding that word. What's the point of adding in useless specificity? Second, it overcomplicates and bloats the code.

               

              I also feel <em> is the wrong tag to apply, depending on whether or not you would pronounce that word differently from the rest of the text. The use of em implies that. If it's merely used for styling, a <span> tag would fit better.

               

              So I would go with mytax's code. Simple, and efficient.

               

              Would be handy though if CSS had a :first-word pseudo element :-).

               

              In the meantime while we wait for improvements, if you DO need complete typographic control, try lettering.js (jquery plugin):

              http://letteringjs.com/

               

              Like this:

              <p class="word_split">Don't break my heart.</p>

              <script>
              $(document).ready(function() {
                $(".word_split").lettering('words');
              });
              </script>

               

              And then:

              .word1 {} in your css would target "Don't"

              .word2 {} in your css would target "break"

              • 4. Re: What is the best way to change to color of the first word in a paragraph?
                rgrstvr Community Member

                I am sorry - I am not advanced enough to understand any of these solutions. 

                 

                This is the code at the top of the file -

                 

                <link rel="stylesheet" type="text/css" href="style/style.css" /><style type="text/css">

                          h1 {font-size:200%; font-family: "Comic Sans MS"; color: #66FFFF; text-align:center;}

                          h2 {font-size:100%; font-family: "Comic Sans MS"; color: red;}                     

                          p {font-size:100%; font-family: "Comic Sans MS"; color: #EEEEEE;}

                 

                 

                And this is the code for one of the paragraphs and I want the 4,567,000,000 BC - to be red. 

                 

                <p>4,567,000,000 BC - Name derived from Hades.</p>

                • 5. Re: What is the best way to change to color of the first word in a paragraph?
                  mytaxsite.co.uk MVP

                  I suggest do this:

                   

                  1) Change your 4567000000 BC line to this one:

                   

                  <p><span class="first-word">4,567,000,000 BC</span> - Name derived from Hades.</p>

                   

                  2) Add the following line after p at the top of the page:

                   

                   

                  .first-word {color: red;}

                  Notice the period in the above code.

                   

                  The top of line will now look like this:

                   

                   

                  h1 {font-size:200%; font-family: "Comic Sans MS"; color: #66FFFF; text-align:center;}

                  h2 {font-size:100%; font-family: "Comic Sans MS"; color: red;}                     

                  p {font-size:100%; font-family: "Comic Sans MS"; color: #EEEEEE;}

                  .first-word {color: red;}

                   

                   

                  The other solutions are almost similar to this one but try this one and then come back and ask how to implement other solutions.