Creating good web content involves a dedicated eye for the material that is being displayed for the end-user. Knowing how to break that content down into equal parts of readability and comforting design brings you closer to great content. Having access and knowledge of the tools to help you achieve that lands you in the area of amazing content.
Something simple like a counting system may seem like a rather mundane topic to cover when CSS has access to so many “flashier” options. However, in this tutorial, you will learn how to not only use an HTML CSS counter but also how to make it really stand out in your design.
What Exactly Is an HTML Counter?
An HTML counter does much what its namesake states. It provides a method to track incremental changes or uses of content within HTML code. This gives a visual point of reference for the end-user to see the intended flow or hierarchy in the content provided. You could of course use an ordered list for something like that, but you will quickly find inherent limits to what you can do when compared to using CSS to create an HTML counter.
There are some basic concepts of the HTML counter to know before you start trying it out for yourself. They are as follows:
- Counter-Reset: This adds a counter or resets a working counter.
- Counter-Increment: This increases the value of a counter.
- Content: Adds in the specified content.
In the next sections, these will be covered with examples to help break down their intended uses and syntax.
Counter-reset
The “counter-reset” property is what you will use to provide a zero or starting point for your counter. In the example below, you have a bit of HTML code setup to start with.
<!DOCTYPE html> <html> <head> <title>CSS Counters</title> <link rel="stylesheet" href="CSSCounters.css"> </head> <body> <button></button> </body> </html>
Take note of the singular button element that is within the body of the document. As it stands, this will create an HTML page with just a single small button on it. On the sample CSS code below the “counter-reset” is added within the body of the HTML document.
body {
counter-reset: “Name of the HTML counter”;
}The counter-reset property requires a name, (or target), to understand what it is supposed to work with. The name of the HTML counter can be anything you want. In the example below, it has been set to what is called “buttonNumber.”
body {
counter-reset: buttonNumber;
}This sets up the base of the numbering system so the page knows we are starting with a reset or zero value. The next goal is to add three more buttons and also have them automatically increment with a system we create. Soon we will have a proper HTML counter set up.
Counter-increment
This is where you can direct the counters to increase with each element added. In the HTML code, you will notice that three buttons are now present. Also, note there is no content added for these buttons.
<body> <button></button> <button></button> <button></button> </body>
As is, the HTML content will not change much, aside from having three empty buttons on the page. The next process is to start the incrementing code. Moving to the CSS stylesheet, the following code now includes a counter-increment section for the button element.
button::after{ counter-increment: buttonNumber; }
Notice that the value for the counter-increment is set to the “buttonNumber” name used for the counter name before. Another important area to check out is the use of the word “after” placed next to the button selector. The words “before” and “after” can be added to advise the stylesheet on how to insert the applied property values. In this particular example, the use of “after” will place the details after the button property content. Speaking of content, this button element needs some of that next.
HTML Counter Content
This next section of our HTML counter is where you will fill out exactly what you want the counter to show in increment additions. For the example, the numbers are going to identify their numerical increase as they are added.
To make this visually represented on the HTML page, the “content” property will be added to the button selector. In the CSS example below, the content is set to display the text string “I am button number” followed by a space. Take note of the blank space added after the word number.
button::after{ counter-increment: buttonNumber; content: "I am button number " counter(buttonNumber); }
Directly after the quotation close of that string, you will see the counter property added with the value of “buttonNumber” added in between parentheses directly after it.
This section tells the browser that when a button is added into the body, it should contain the text string of “I am button number” followed by the counter value of “buttonNumber.” With this code in place, the following HTML output is displayed.
HTML Counters: Fun in Designs
Just like that, you have walked through the creation of an HTML counter and take note that the code of the actual counter itself was nothing more than six lines. You can take this further by adding some styling to the button as well.
Take the following CSS code below.
button{
size: 30px;
padding: 30px;
border-radius: 40px;
background-image: linear-gradient(blue, orange);
color: white;
text-transform: capitalize;
font-family: sans-serif;
font-weight: bold;
}By adding this separate set of CSS code into the stylesheet, the HTML counter can transform into something much less “vanilla” on the page. Take a look at the resulting output below.
This counter concept can be changed and used for other interesting ideas, as well. Take the example code for the CSS below. You will see that it is set up to number quotes of the character Dwight from the sitcom “The Office.”
body {
counter-reset: dwightSays;
}
p::before {
counter-increment: dwightSays;
content: "Things Dwight from The Office says number " counter(dwightSays) ": ";
color: blue;
}Three paragraph tags are added to the HTML code as well.
<body> <p>"I am better than you have ever been or ever will be."</p> <p>“Through concentration, I can raise and lower my cholesterol at will.”</p> <p>“I am fast. To give you a reference point I am somewhere between a snake and a mongoose…And a panther.”</p> </body>
With the HTML counter set in place, you receive the following HTML output:
The great thing about the HTML counter once it is in place, is that all added content that falls under its rules will automatically get an incrementing number assigned to it. This works on its own even if you are adding or removing content. Consider how great this is when working with chapters or index entries.
There’s So Much More to Learn
CSS as a toolbox is a welcoming set. New users can jump into some pretty amazing design options right away with very little in the way of training. If you have your interest peaked for more topics to devour, then check out options like background gradients, borders, or color choice.
Take your time and have fun with the various options available in CSS. If you ever feel like you are overwhelmed, then take a deep breath and relax. You are not expected to know everything right away, or ever at all.
Something that can help with the learning process is to imagine a simple site for something that you actually care about. Work on a small piece at a time until you feel comfortable with whatever aspect of CSS you are mastering. Remember, Udacity is here to help you out along the way.
_________________________________________________________
Why stop at just web development? The power of programming is empowering people to do even more with their designs. If you are looking to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
