Categories
WordPress WordPress Tutorial

WordPress Quick Trick: Introduction to HTML & CSS for lists

HTML basics about styling that are helpful for styling your posts. It focuses on the introduction to HTML and CSS for lists.

In this tutorial, we are going to see HTML basics about styling that are helpful for styling your posts. It focuses on the introduction to HTML and CSS for lists.

In this tutorial we are going to see :
  • When do you need to learn HTML basics?
  • An intro about lists in HTML
  • List Styles in HTML
  • How to style an element in HTML
  • Inline vs Block elements
• When do you need to learn HTML basics?
  1. Starting to Learn HTML coding as a hobby or a new skill
  2. A Blogger to add more features than those offered by WordPress, Blogger or other blog sites
  3. A marketer to optimize your opt-in page to look just as you like and stand out from the crowd
  4. Update your WebPage which a developer friend gifted it to you some time ago
  5. If You have a n HTML Coding Homework
• HTML & Lists
  • HTML (HyperText Markup Language) as the name denotes, marks each part of the text you want to place on your webpage with a tag that tells the browser how to display this part of the text
  • Tags are symbolic and they include a shorthand of the element name as: p for paragraph
  • Tags are enclosed in < & > and each element of your page as a paragraph, for example, is enclosed in opening and closing tags as: <p> my paragraph </p>. Where <p> is the opening tag and </p> is the closing one
  • There is an opening Tag and a closing tag. Between them lies your text.
  • Both include the same letters except the closing one has “/” as in paragraph tags: <p>Your paragraph</p>
  • For Lists, The opening Tag is <ol> which means it is an ordered or numbered list or <ul> which is unordered or bullet list
  • Each item inside your list will have an opening tag of <li>
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
• List Styling in HTML
  • HTML offers 3 main styling commands for lists
    • list-style-type
    • list-style-position
    • list-style-image
  • list-style-type is used to change the list item marker which is either the bullet or numbers that comes before the list item
  • To the right, you can find the most important list- styling types in action
  • We are going to use the first one and I will leave you at the end a link for the other 2
  • List-style-type:none
    • this is an item of the list without a marker
  • list-style-type: circle
    • list-style-type: disc
      • list-style-type: square
  1. list-style-type: decimal
    1. list-style-type:lower-roman
      1. list-style-type:lower-alpha
        1. list-style-type: decimal-leading-zero
• How HTML styles its elements
  • There are 5 ways HTML style its tags. By styling here we mean color, font, size, position, etc….:
    1. The default one. That is the default setting of your browser, your WordPress theme and so on. You just write or place your elements and HTML will display it with its default style.
      1. e.g the default bullet is: disc •
    2. The professional way where you create a cascaded styling sheet or a .css file where you add the tag ty;e e.g. ul (unordered list) and between curly brackets the style you want. See Example 1 to the right.
      1. This way you will have the default of all your bullet lists as circle
    3. Another more professional way. To add a class in the .css style sheet and you place you styling commands within this class. Then, in HTML within the opening TAG add class=”class_name”.
      1. This can be any name that you remember and denotes its function.
      2. This always you to style differently only this list. Example 2 ->right
      3. Below You can see this code in action.
  • This standard bullet
    1. Item one katakana_numbering
      1. Indented Item one with circle
Yoga 2 Life coach Certification

Example 1: style.css file will look as below

ul {
   list-style-type:circle;
}

Example 2: style.css file with a class will look as below

ul {
   list-style-type:square;
}/* all ul will have as default square bullet*/

.my_katakana_numbering{
    list-style-type:katakana;
}
.my_circle_bullet{
    list-style-type:circle;
}

Example 2: main.html file with a class will look as below

<ul>
  <li>This is a standard bullet
    <ol class="my_katakana_numbering">
       <li>Item one katakana_numbering
          <ul class="my_circle_bullet">
            <li>Indented Item one with circle</li>
         </ul>
      </li>
    </ol>
   </li>
</ul>
  • The last 2 ways HTML style its tags is what they call less professional which is adding the style commands within the HTML file and inline within the tags themselves. Again, by styling here we mean color, font, size, position, etc….:
    1. Inline styling is when you add the style you want inside the opening tag. This is useful in some Blog sites including your own WordPress installation to tweak your post to stand out
      1. e.g Changing the color and background color of your list as Example 3 to the right
    2. The internal styling way where you create a Style element inside your html file This is enclosed between Style opening and closing tags and between them you write css commands or styling commands as if you are working on the separate style.css file.
      1. It is recommended to place it inside the Head section of your html file but in the body it also works. Example 4->

Example 3: Inline style commands within tags in HTML files

<ul style="color:red; background-color:lightblue;"><li>Item in a list with red color and blue backround styles</li></ul>
  • Item in a list with red color and blue background styles

Example 4: Using Style tag <style> …css…</style> in html file

  <style>
      body {background-color: lightgreen;}
      h1   {color: blue;}
      p    {color: red;}
  </style>
• One more Trick from HTML Basics, Inline vs Block elements
  • The paragraph <p>, list <ol> or <ul> and others are called elements of HTML. They are the components that build-up your webpage
  • Those components are divided into 2 main categories Block & Inline elements
    • Block Elements by default start on a new line and takes up the full width available
    • Inline Elements by default does not start on a new line and only takes up as much width as necessary.
    • Inline Elements are contained in Block Elements and serve a great help in styling pieces of the block element
    • For a list of block and inline elements, click here
  • In the example to the right, we shall see a demo of styling one line in a list

Example 5: Use Inline element as <span></span> to style one line of our list

<ol>
   <li>Item 1</li>
   <li><span class="my_blue_color my_grey_background">Item 2</span></li>
   <li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
Below is a Youtube video explaining the process
To know details about the other 2 styling options you can follow the below links.

To learn more about WordPress Posts Styling and using HTML and CSS in this click here and register to receive updates
Free Coaching Class

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.