How do I style this code with css and html? Blogger

Question

The code below is for list blogger posts within a bookmark, if the post has the specific marker it will be shown in this list I wish I could change the appearance of how everything is displayed and change where the post image would be and where the title would be, change background color, add edges, shadows change font etc... (i know how to change the appearance with css, but I don’t know how to integrate the code below with css and html) At the moment the code shows the title and the right of the title the image.

<div>
  <ul id="postList12"></ul>
</div>
<script type="text/javascript">
  var startIndex = 1;
  var maxResults = 150;
  var allResults = [];
  function sendQuery12()
  {
    var scpt = document.createElement("script");
    scpt.src = "/feeds/posts/summary/-/Series?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
    document.body.appendChild(scpt);
  }
  function printArrayResults(root)
  { 
    //Sort Alphebetically
    allResults.sort(function(a, b){
      var a_string = a.children[0].textContent ;
      var b_string = b.children[0].textContent ;
      if(a_string < b_string) return -1;
      if(a_string > b_string) return 1;
      return 0;
    })
    var elmt = document.getElementById("postList12");
    for (index = 0; index < allResults.length; index++) {
      elmt.appendChild(allResults[index]);
    }
  }
  function processPostList12(root)
  {   
    var elmt = document.getElementById("postList12");
    if (!elmt)
      return;
    var feed = root.feed;
    if (feed.entry.length > 0)
    {
      for (var i = 0; i < feed.entry.length; i++)
      {
        var entry = feed.entry[i];
        var title = entry.title.$t;
        var date = entry.published.$t;

        if( entry.media$thumbnail != undefined ){
          var imageThumb = entry.media$thumbnail.url ;
        } else {
          var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
        }

        for (var j = 0; j < entry.link.length; j++)
        {
          if (entry.link[j].rel == "alternate")
          {
            var url = entry.link[j].href;
            if (url && url.length > 0 && title && title.length > 0)
            {
              var liE = document.createElement("li");
              var a1E = document.createElement("a");
              var postImage = document.createElement("img");

              a1E.href = url;
              a1E.textContent = title;
              postImage.src = imageThumb;

              liE.appendChild(a1E);
              liE.appendChild(postImage);

              //elmt.appendChild(liE);
              allResults.push(liE);

            }
            break;
          }
        }
      }
      if (feed.entry.length >= maxResults)
      {
        startIndex += maxResults;
        sendQuery12();
      } else {
        printArrayResults();
      }
    }
  }
  sendQuery12();
</script>

Answer 1

You can use CSS. Example:

#postList12 { /*Lista*/
  background: #000; /* Cor de fundo */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* Fonte */
}

#postList12 li a { /*Link*/
  color: #fff; /* Cor do texto */
}

#postList12 li a:hover { /*Link quando poe o mouse em cima*/
  color: #ccc; /* Cor do texto */
}

<div>
  <ul id="postList12">
    <li><a href='#'>Post 1</a></li>
    <li><a href='#'>Post 2</a></li>
    <li><a href='#'>Post 3</a></li>
    <li><a href='#'>Post 4</a></li>
  </ul>
</div>