How To Create A Simple To-Do List App Using HTML, CSS, JS, and PHP – Part 2

This is the continuation of a series of tutorials about creating a to-do list web application, if you haven’t checked out the entire tutorial please start from Part 1.

In this part, we are going to add a CSS stylesheet to our webpage to change the appearance of our web application. Stylesheets allow us to change the appearance, position, colour, font and much more of our webpage and the individual elements within a page. We are also going to add checkboxes to each of our list items, which will allow us to tick each item when they’re completed.

Within each list item, we are going to add a checkbox input element. The checkbox input element will allow the user to tick each item when they are completed. Below is an example of one of the list items with a new checkbox element added. Notice how the input element is written before the text of the list item, this will display the checkbox to the left of the text. If we swapped these two lines around the checkbox would come after the text. Add a checkbox to each list item as shown below.

Next, we are going to create a link to a CSS stylesheet to our webpage. Create a new file called ‘style.css’ where ‘.css’ is the extension of the file. Create the file in the same directory as our index file. Now we have to make sure the webpage loads the stylesheet, we do this by adding a self-closing link tag to the head of our HTML document.

The link tag is self-closing as it ends with ‘/>’ and does not require a separate closing tag, not all tags in HTML are self-closing. The relationship, or ‘rel’, of the new linked file is ‘stylesheet’ and the ‘href’ defines where the file is located, as it is in the same directory we can just write the name of the file. You could create a directory inside our to-do list directory called ‘css’ and put the stylesheet in there, but then ‘href’ would have to be changed to reflect this, such as ‘href=”/css/style.css”‘.

These are called relative paths, as the path is relative to the index file and the directory it is contained within. You can also put in an absolute path, which would be the entire path to the file on your hard drive such as “C:/document/todolist/css/style.css”. However, this is not recommended as it exposes the structure of the computers hard drive to potential hackers. You should never link to documents located higher up the directory as the base index file, such as the parent directory of the index file or any directory above that.

Within our CSS file, we are going to first change the background and text colour of our heading element. The heading element is a ‘h1’ tag so we are going to use that within our CSS to apply the style to, this will also change the style of any other ‘h1’ tags on the webpage.

Now if you refresh the page the background colour of heading should be a deep blue and the text colour should be light grey. The colours used are called hexadecimal colours and are explained in more detail in a different post (linked below).

Notice how the tag’s name is written and the styles we wish to apply are contained within curly brackets, ‘{…}’. Each style attribute has two parts, separated by a colon ‘:’. The name of the attribute, such as ‘color’, and then the value of the attribute, such as ‘#EAEAEA’ and then each line must be terminated with a semi-colon ‘;’.

Next, we are going to modify the body of our webpage to make it take up less space within the browser. We do this by applying CSS directly to the body tag in our stylesheet. The ‘margin: auto;’ line centers all of the elements within the body tag on our page.

Next, we are going to change the padding attribute of our heading element, this will change the amount of space between the text and the edge of the element. This is a component of the CSS box model which is explained in more detail in a different post (linked below). We will change the padding attribute to ’10px’ which stands for pixels, meaning there will be a 10 pixel spacing added around the text of our heading. The border-radius attribute affects the corners of our element and makes them more or less rounded dependent on the value we choose, e.g. ‘0px’ is sharp pointing edges and ‘5px’ is a slight curve. Experiment with changing the padding and border-radius attribute values until you’re happy with how they work.

Now we are going to apply styles to all of our list item tags. The styles below are similar to the style attributes we have used in the other styles, the background color, the text color, the width, etc. The margin attribute refers to the spacing outside of the element, the space between it and other elements (the size of the gap between them). The ‘list-style-tye’ refers to what the symbol used on the list items, such as bullet points or numbers. Using the ‘none’ value will remove any symbol, so the list items will no longer be prefixed with a bullet point.

Further Reading

What is CSS?
Basic CSS Attributes
CSS Colours Explained
CSS Box Model Explained

Remember all of the code for this tutorial series can be seen at the following link: https://github.com/acroynon/tutorial-to-do-list-app
and a demo of the to-do list application can be seen at the following link: https://acroynon.github.io/tutorial-to-do-list-app/

Continue to Part 3

Leave a Reply