HTML List: Attributes
An ordered list is a list of related items, all presented with numerical or alphanumerical order markers. Upper and lowercase roman numerals can also be used as the item marker.The example in the last lesson is a very simple and plain ordered list.
But, did you know that by using HTML tag attributes you can customize your list? You can make your list easier for your followers to read your website blog, reviews, and material.
Adding Style Using HTML Coding
Here's another example of the Healthy Snacks list, I gave it some style and class to give it a better taste, I mean look.
Example
<!DOCTYPE html>
<html>
<head>
<title>Create Ordered List Using HTML Codes</title>
<style>
body{background-color: black}
h2, h1 {color: darkcyan}
p {color: white;}
</style>
</head>
<body>
<h1>Create Ordered List Using HTML Codes</h1>
<p>This is a list of my favorite healthy fruit snacks. I created it to show you what you can do with a list and how easy it is to create your own website using HTML.</p>
<h2>My Favorite Fruits</h2>
<ol>
<li style="color:#0df00d;" rel="color:#0df00d;">Apples</li>
<li style="color:yellow;">Bananas</li>
<li style="color:orange">Oranges</li>
<li style="color:pink;">Strawberries</li>
<li style="color:rgba(245, 88, 4, 0.92);">Peaches</li>
</ol>
</body>
</html>
It Makes A Difference
I've created an unordered list of the changes i've made to the ordered list. It makes a difference to add CSS and HTML style to the list.
- Added a HTML CSS style attribute to the li tags and changed each item color.
- Inline CSS Style commands are great for performing an action on a single HTML element, on your page.
- Created a CSS style command code to control the the display of the following; paragraphs, heading 1 and heading 2, and the page background color.
- Internal CSS Style commands are great for performing a laid out action on a single web page. This style is added in the head elements.
I used a color finder to get the exact color; I combined the color code with the HTML CSS code, what do you think?
In the next lesson, you'll learn how to manipulate HTML and CSS coding for better user experience results.
If you have any questions about creating ordered list using html and css, please use the dussicion group or send me an PM here at Wealthy Affiliate.
Up Next - HTML List: - What Is A Web Designer?
Reply
