Intro to CSS: Lists
CSS can be used to customize lists. This includes ordered and unordered lists. Below is an example HTML List.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.
<h2>My Favorite Fruits:</h2>
<ol>
<li>Mango</li>
<li>Kiwi</li>
<li>Strawberry</li>
<li>Plum</li>
</ol>If you are not familar with the HTML code above, check out the less on Lists
You can create your own class of <ul> or <ol> elements. List-style-type describes the bullet points, or numbering, you want for the list.
Here are options for list-style-type:
<ul>
✶ disc - Default for ul elements
✶ circle
✶ none - no bullet points
✶ square
<ol> (Common Choices)
✶ decimal - Numbers
✶ lower-alpha - Lowercase letters
✶ lower-roman - Roman lowercase numbers
✶ upper-alpha - Uppercase Letters
✶ upper-roman - Roman uppercase numbers
<ol> (More Choices)
✶ armenian - Armenian numbers
✶ cjk-ideographic - Ideographic numbers
✶ decimal-leading-zero - Numbers with zeros in front (ie 06)
✶ georgian - Georgian numbers
✶ hebrew - Hebrew numbers
✶ hiragana - Japanese Hiragana
✶ hiragana-iroha - Hiragana iroha
✶ katakana - Japanes Katakana
✶ katakana-iroha - Katakana iroha
✶ lower-greek - Greek lowercase letters
✶ lower-latin - Latin lowercase letters
✶ upper-alpha - Uppercase Letters
✶ upper-greek - Greek uppercase letters
✶ upper-latin - Latin uppercase letters
ol.fruit {
list-style-type: hiragana;
}
➼ ol.fruit - This is a class of ordered list elements
➼ list-style-type - This class uses Japanese Hiragana Numbering
<h2>My Favorite Fruits:</h2>
<ol class = 'fruit'>
<li>Mango</li>
<li>Kiwi</li>
<li>Strawberry</li>
<li>Plum</li>
</ol>
You can use your own custom bullet points by using list-style-image.
ul.tvShows {
list-style-image: url('bullet.jpg');
}
➼ ul.tvShows - This is a class of unordered list elements.
➼ list-style-image - The image bullet.jpg will be used as bullet points.
<h2>Best 21st Century Sci-fi Shows:</h2>
<ul class = 'tvShows'>
<li>Battlestar Galactica</li>
<li>Doctor Who</li>
<li>FireFly</li>
<li>Lost</li>
<li>Fringe</li>
</ul>
This describes if the bullet points should go inside or outside the content area. It can have the value of inside or outside. Let's add list-style-position to our tvShows class.
ul.tvShows {
list-style-image: url('bullet.jpg');
list-style-position: inside;
}
➼ ul.tvShows - This is a class of unordered list elements.
➼ list-style-image - The image bullet.jpg will be used as bullet points.
➼ list-style-position - The bullets will be inside the list content area.j
<h2>Best 21st Century Sci-fi Shows:</h2>
<ul class = 'tvShows'>
<li>Battlestar Galactica</li>
<li>Doctor Who</li>
<li>FireFly</li>
<li>Lost</li>
<li>Fringe</li>
</ul>
Now, let's add some background-color and text styling to our tvShows class.
ul.tvShows {
list-style-image: url('bullet.jpg');
list-style-position: inside;
background-color: pink;
font-family: helvetica, sans-serif;
font-size: 20px;
}
➼ ul.tvShows - This is a class of unordered list elements.
➼ list-style-image - The image bullet.jpg will be used as bullet points.
➼ list-style-position - The bullets will be inside the list content area.
➼ background-color - Its pink!
➼ font-family - Helvetica is the first chice, but if the browser can't
display it, something sans-serif will display.
➼ font-size - It's 20px;
<h2>Best 21st Century Sci-fi Shows:</h2>
<ul class = 'tvShows'>
<li>Battlestar Galactica</li>
<li>Doctor Who</li>
<li>FireFly</li>
<li>Lost</li>
<li>Fringe</li>
</ul>
Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.