HTML AND CSS EXAMPLES

Examples of HTML and CSS markup, and various other useful sitebuilding information

HTML Ordered List CSS Styling Examples

The code examples below present various custom styled HTML lists, gathered by exploring the web for CSS directive sets that produce creative HTML list styles. With a few additional modifications, each of the examples below could be further customized, for example, using different: colors, background colors, transformation effects, or varying text sizes. The different styles below are created simply by adding a CSS class to the list element, which then attaches a set of CSS directives that create the styling. During creation of these examples, the Drupal Asset Injection Module was used to store the CSS within Drupal for easy access and updating while working on the lists' styles.

Here is an HTML ordered list with large numbers at left:

Aptent eleifend vulputate, in nunc. Lobortis fermentum est fusce cursus dictumst commodo, feugiat. Enim laoreet taciti integer habitasse sed proin. Dui metus magna.
Maecenas habitant phasellus nunc. Sollicitudin ac curabitur hac pellentesque maecenas pretium proin ullamcorper ullamcorper. Sociis platea dis vehicula pede sapien ultricies.
Integer. Ante turpis, euismod velit a lacinia pede sapien rhoncus at dictum est sed imperdiet proin nulla, netus penatibus aptent at.
Pellentesque ultrices massa feugiat eget mauris class elementum aliquet, ultricies nisi consectetuer maecenas praesent inceptos mauris fames posuere.
Id taciti auctor nibh primis phasellus eleifend magna leo scelerisque condimentum, quis, donec. Mollis sit neque fermentum.

Here are the CSS directives that produce the styles above

ol.list-ordered-numbers-large 
{
    list-style-type: none;
    
    margin: 0;
    margin-left: 3em;
    padding: 0;
     
    counter-reset: li-counter;
}
ol.list-ordered-numbers-large > li
{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
    border-left: 2px solid #CCCCCC;
}
ol.list-ordered-numbers-large > li:before
{
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;
     
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;
 
    content: counter(li-counter);
    counter-increment: li-counter;
}

Here is an HTML ordered list with large titled numbers at left and gray backgrounds. It is possible to move the number from in front to behind the item text by adjusting the z-index: -99; property value, or removing the z-index property altogether, which moves the number to the front:

Aptent eleifend vulputate, in nunc. Lobortis fermentum est fusce cursus dictumst commodo, feugiat. Enim laoreet taciti integer habitasse sed proin. Dui metus magna.
Maecenas habitant phasellus nunc. Sollicitudin ac curabitur hac pellentesque maecenas pretium proin ullamcorper ullamcorper. Sociis platea dis vehicula pede sapien ultricies.
Integer. Ante turpis, euismod velit a lacinia pede sapien rhoncus at dictum est sed imperdiet proin nulla, netus penatibus aptent at.
Pellentesque ultrices massa feugiat eget mauris class elementum aliquet, ultricies nisi consectetuer maecenas praesent inceptos mauris fames posuere.
Id taciti auctor nibh primis phasellus eleifend magna leo scelerisque condimentum, quis, donec. Mollis sit neque fermentum.

ol.list-ordered-numbers-tilted  
{
    list-style-type: none;
     
    margin: 0;
    margin-left: 3em;
    padding: 0;
     
    counter-reset: li-counter;
}
ol.list-ordered-numbers-tilted > li
{
    position: relative;
    margin-bottom: 20px;
    padding: 1em;
    border-left: 2px solid #CCCCCC;
    background-color: #f5f5f5;
}
ol.list-ordered-numbers-tilted > li:before 
{
    position: absolute;
    top: 0;
    left: -0.95em;
    width: 1em;
 
    font-size: 4em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #464646;
     
    transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    z-index: -99;
    overflow: hidden;
     
    content: counter(li-counter);
    counter-increment: li-counter;
}

Here is an HTML ordered list with large numbers in circle at the left:

Aptent eleifend vulputate, in nunc. Lobortis fermentum est fusce cursus dictumst commodo, feugiat. Enim laoreet taciti integer habitasse sed proin. Dui metus magna.
Maecenas habitant phasellus nunc. Sollicitudin ac curabitur hac pellentesque maecenas pretium proin ullamcorper ullamcorper. Sociis platea dis vehicula pede sapien ultricies.
Integer. Ante turpis, euismod velit a lacinia pede sapien rhoncus at dictum est sed imperdiet proin nulla, netus penatibus aptent at.
Pellentesque ultrices massa feugiat eget mauris class elementum aliquet, ultricies nisi consectetuer maecenas praesent inceptos mauris fames posuere.
Id taciti auctor nibh primis phasellus eleifend magna leo scelerisque condimentum, quis, donec. Mollis sit neque fermentum.

ol.list-ordered-numbers-in-circles  
{
    list-style-type: none;
     
    margin: 0;
    margin-left: 4em;
    padding: 0;
     
    counter-reset: li-counter;
}
ol.list-ordered-numbers-in-circles > li
{
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
}
ol.list-ordered-numbers-in-circles > li:before
{
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;
     
    font-size: 2.5em;
    line-height: 1.2;
    text-align: center;
    color: #f5f5f5;
 
    border: 3px solid #c5c5c5;
    border-radius: 50%;
    background-color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}

Here is an HTML ordered list with large numbers in boxes at the left with gray backgrounds:

Aptent eleifend vulputate, in nunc. Lobortis fermentum est fusce cursus dictumst commodo, feugiat. Enim laoreet taciti integer habitasse sed proin. Dui metus magna.
Maecenas habitant phasellus nunc. Sollicitudin ac curabitur hac pellentesque maecenas pretium proin ullamcorper ullamcorper. Sociis platea dis vehicula pede sapien ultricies.
Integer. Ante turpis, euismod velit a lacinia pede sapien rhoncus at dictum est sed imperdiet proin nulla, netus penatibus aptent at.
Pellentesque ultrices massa feugiat eget mauris class elementum aliquet, ultricies nisi consectetuer maecenas praesent inceptos mauris fames posuere.
Id taciti auctor nibh primis phasellus eleifend magna leo scelerisque condimentum, quis, donec. Mollis sit neque fermentum.

ol.list-ordered-numbers-in-boxes
{
    list-style-type: none;
     
    margin: 0;
    margin-left: 3em;
    padding: 0;
     
    counter-reset: li-counter;
}

ol.list-ordered-numbers-in-boxes > li
{
    position: relative;
    margin-bottom: 15px;
    padding: 1em;
     
    background-color: #d5d5d5;
}

ol.list-ordered-numbers-in-boxes > li:before
{
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.94em;
    height: 0.94em;
     
    font-size: 3em;
    line-height: 0.94;
    text-align: center;
    color: #f5f5f5;
 
    background-color: #828282;
    content: counter(li-counter);
    counter-increment: li-counter;
}

Here is an HTML ordered list with large numbers in tilted boxes at the left with gray backgrounds:

Aptent eleifend vulputate, in nunc. Lobortis fermentum est fusce cursus dictumst commodo, feugiat. Enim laoreet taciti integer habitasse sed proin. Dui metus magna.
Maecenas habitant phasellus nunc. Sollicitudin ac curabitur hac pellentesque maecenas pretium proin ullamcorper ullamcorper. Sociis platea dis vehicula pede sapien ultricies.
Integer. Ante turpis, euismod velit a lacinia pede sapien rhoncus at dictum est sed imperdiet proin nulla, netus penatibus aptent at.
Pellentesque ultrices massa feugiat eget mauris class elementum aliquet, ultricies nisi consectetuer maecenas praesent inceptos mauris fames posuere.
Id taciti auctor nibh primis phasellus eleifend magna leo scelerisque condimentum, quis, donec. Mollis sit neque fermentum.

ol.list-ordered-numbers-in-tilted-boxes
{
    list-style-type: none;
     
    margin: 0;
    margin-left: 1em;
    padding: 0;
     
    counter-reset: li-counter;
}

ol.list-ordered-numbers-in-tilted-boxes > li
{
    position: relative;
    margin-bottom: 1.5em;
    padding: 1.5em;
    background-color: #eaeaea;
}

ol.list-ordered-numbers-in-tilted-boxes > li:before
{
    position: absolute;
    top: -0.3em;
    left: -0.5em;
    width: 1.8em;
    height: 1.2em;
     
    font-size: 2em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: #464646;
    background-color: #d0d0d0;
     
    transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);

    z-index: 99;
    overflow: hidden;
     
    content: counter(li-counter);
    counter-increment: li-counter;
}

Here is an HTML ordered list with numbers in solid circles and items with colored backgrounds:

.list-ordered-numbers-in-circle-solid
{
  list-style-type: none;
	counter-reset: li;
	margin:0 auto;
}

.list-ordered-numbers-in-circle-solid ol
{
	list-style: none;
	font-size: 15px;
	font-family: 'Raleway', sans-serif;
	padding: 0;
	margin-bottom: 4em;
}

.list-ordered-numbers-in-circle-solid ol ol
{
	margin: 0 0 0 2em;
}

.list-ordered-numbers-in-circle-solid a
{
	position: relative;
	display: block;
	padding: .4em .4em .4em 2em;
	margin: .5em 0;
	background: #3CAB94;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: 0.5em;
	transition: all .2s ease-in-out;
}

.list-ordered-numbers-in-circle-solid a:hover
{
	background: #87E0CD;
	text-decoration:none;
	transform: scale(1.05);
}

.list-ordered-numbers-in-circle-solid a:before
{
	counter-increment: li;
	content: counter(li);
	position: absolute;
	left: -1.7em;
	top: 50%;
	margin-top: -1.3em;
	background: #3CAB94;
	width: 3em;
	line-height: 2em;
	border: .3em solid #fff;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 3em;
	-webkit-border-radius: 3em;
	border-radius: 3em;
	color:#FFF;
}

websitework.space

This website, websitework.space, presents and contains technical, practical, and philosophical, notes about webdev and site building, primarily about site building with the Drupal content management system/framework/environment. This also contains assessments of Drupal core and contributed components, as well as additional related information, analysis, and perspectives.