/    Sign up×
Community /Pin to ProfileBookmark

Using type attribute for List element in CSS

If I want to have roman numerals or alphabets (upper or lower case) , I can do that using “type” attribute in an element as shows in code below.

This type attribute is deprecated for CSS. So if I want to display roman numerals or alphabets or want to start numbers as 7, 8, 9…. instead of 1, 2, 3 using CSS, how can I do that ?

[code]<html>
<head>
<title>
Assignment 5 – Lists
</title>
</head>
<body>
<h3>Assignment 5 – Lists</h3></br></br>
<h4><font color=”red”>Ordered List of Star Wars Movies</font></h4>
<ol>
<li>The Phantom Menace</li>
<li>Attach of the clones</li>
<li>Revenge of the Sith</li>
<li>A New Hope</li>
<li>Empire Strikes Back</li>
<li>Return of Jedi</li>
</ol>
<h4><font color=”blue”>Unordered List of Harry Potter Movies</font></h4>
<ul>
<li>Philosopher’s Stone</li>
<li>Chamber of Secrets</li>
<li>Prisoner of Azkaban</li>
<li>Goblet of Fire</li>
<li>Order of the Phoenix</li>
<li>Half-Blood Prince</li>
<li>Deathly Hallows – Part 1</li>
<li>Deathly Hallows – Part 2</li>
</ul>
<h4><font color=”yellow”>Unordered List of Anthony Hopkins Movies with lower case alphabetical order</font></h4>
<ol>
<li type=a>Silence of lamb</li>
<li type=a>Hannibal</li>
<li type=a>Red Dragon</li>
</ol>
<h4><font color=”green”>Ordered List of Lord of the Rings Movies with lower Roman Letters</font></h4>
<ol>
<li type=i>The Fellowship of the Ring </li>
<li type=i>Two Towers </li>
<li type=i>Return of the King</li>
</ol>
<h4><font color=”orange”>Ordered List of historic movies with upper Roman Letters</font></h4>
<ol>
<li type=I>kingdom of heaven</li>
<li type=I>Robin hood</li>
<li type=I>Benhur</li>
<li type=I>Gladiator</li>
<li type=I>Attilla</li>
<li type=I>Mongol</li>
</ol>
</body>

</html>[/code]

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@auntniniFeb 07.2012 — Try searching for CSS ways to style lists -- for eample

http://www.w3schools.com/cssref/pr_list-style-type.asp

http://coding.smashingmagazine.com/2009/12/11/styling-html-lists-with-css-techniques-and-resources/

http://webdesign.about.com/od/styleproperties/p/blspliststylety.htm

http://www.noupe.com/css/css-styled-lists-20-demos-tutorials-and-best-of.html

You do NOT want to be using deprecated <FONT> tags. Take some time to learn about CSS (Caascading Stylesheeet)s

<i>
</i>&lt;style type="text/css"&gt;
body,td,th {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 1em;
color: black;
}

ol li { list-style-type:upper-alpha;
font-family:Arial, Helvetica, sans-serif;
font-size:medium; text-align:left; }

ol ol li { list-style-type: lower-roman; }
&lt;/style&gt;

&lt;ol&gt;
&lt;li&gt;first Alpha&lt;/li&gt;
&lt;li&gt; two
&lt;ol&gt;
&lt;li&gt;second nested&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;
×

Success!

Help @jigneshjsoni spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...