Welcome back to our CSS tutorial! A week has passed and I’m back to bring you more knowledge, as promised. Although we’re nearing the end of our CSS First Aid kit, no need to despair – after this series is over, there will be a more advanced one so that you can become even more skilled and dare I say even feared amongst your competitors.

Anyhow, now that we’ve established you’re cool and it’s a good thing to constantly expand your experience with CSS, let’s take a look at the basic sum of Classification properties – by the way, yes, Classification properties are the topic of the 5th part of our tutorial.

If you haven’t studied the previous four articles of this series, here are the links:


<style type="text/css">
h1 {text-align:center; color:#ccc;}
p {color:red; text-decoation:underline;}
<p>This is a test code</p>

So now, without much further ado, let’s begin.



css classification properties

What properties will we talk about you ask?

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style




Possible Values

  • block
  • inline
  • list-item
  • none

What we basically have here is a property that defines whether there will be a line break before / after the element (block) or not (inline). If the answer is yes, another question is whether it will show some sort of graphic sign (we all know how lists look like, no matter if ordered or unordered).

A word of warning though, if you force a browser to show something the way you want instead of natural HTML recommendations, it can cause troubles. Thoroughly test the result in case you’d like to use this property.


h2 {display: block;}




Possible Values

  • normal
  • pre
  • nowrap

If you’re tired of looking for multiple spaces or, on the other hand, you want to treat them in a special way, you have found the property you’ve been looking for. “Normal” will collapse multiple spaces into one, “Pre” will prevent that and “nowrap” will forbid the tag.

Now that I think of it, the only possible use of the “Pre” value would be during a training of some magazine editors…


body {white-space: normal;}

List Style Type



Possible Values

  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none

Voila, you haven’t thought that it is hard to alter the symbol your website is using in lists, have you? However, it is important to know that this property is only secondary and takes place only when List Image is not set. Of course, that doesn’t stop you from using different signs to make your website stand out of the crowd.


.pros {list-style-type: square;}
.cons {list-style-type: circle;}

List Style Image



Possible Values:

  • URL ()
  • none

The fact is general symbols are somewhat limited, even if we take advantage of the previous property. But – the good news is that nothing stands in the way of using this property and inserting an image of your own, be it a crown, a monkey or your girlfriend’s picture.


.ul {list-style-image: url (http://randomwebsite.com/gallery/SheIsHotIsntShe.png);}

List Style Position



Possible Values

  • inside
  • outside

Lists are usually alligned in a way where each line begins at the same place under each other. With this property, we can choose to include the list image in this procedure, so that the first letter in the first line of the list would be moved to the right a bit.

You do not need to set the “outside” value, it is the default one.


.authors {list-style-position: inside}

List Style



Possible Values

  • list-style-type
  • list-style-position
  • URL ()

And finally, Classification also has a Big-Daddy-like summarizing property that allows you to sum up everything you want to adjust on your lists in one single property.


.ul-pros {list-style: decimal inside;}
.ul-cons {list-style: url (http://asdf.com/gallery/ListImage.gif); }


Alas, only one part of our journey lies ahead. On the bright side, I have hopefully created a bunch of qualified people who either already have solid basics upon which they can build or may utilize this knowledge to make a little side money – like I do.

Well, not much to say really, only that I am looking forward to meet you again the next week during the Grand Finale – Color and Background properties. Of course, I will be more than happy to engage with you in comments, should you have anything to add.

Thank you for reading!

Pin It