CSS

CSS Lesson 5: Create a CSS Todo List

In this knowledge bit, we are going to learn about selectors and going to create basics CSS Todo List. We will also discuss three main basic selectors Element, ID, and Class.

Css Todo List

Css Selectors

In this section, we are going to discuss three basic selectors

  • Element
  • ID
  • Class

If we want to select element with specified attributes then we will use [attribute] selector

Here is an example of selects all <h1> elements with a target attribute:

 

h1[target] {

Background-color: blue;

}

 

Now we are going to create an HTML file with the name “to do list.html” once we have that then we add HTML skeleton.

Code

 


<body>

<h1>TO-Do List</h1>

<ul>

<li><input type="checkbox">Get Groceries</li>

<li><input type="checkbox">Pay Electric bill</li>

<li><input type="checkbox">Print inventory sheets</li>

<li><input type="checkbox">Visit Aunt</li>

</ul>

</body>

     

Output

Here we have our TO-DO List and you can see here we have a little checkbox next to every element of our TO-DO List

 

Css Todo List Example

 

Now make a style sheet and name it “todolist.css” and link it to the To-do list HTML page.

Now let’s check whether if our CSS stylesheet integrate correctly into our HTML page or not. We will check by changing the background color.

CSS Code

 


body{

background-color: lightgreen;

}

CSS element Selector

So the Selector element select all the corresponding element all instances like <body>, <div>, <p> and match that, so here we will do it with <li> and set their border element

CSS Code

 

li{

border-width: 1px;

border-style: solid;

border-color: green;

}     

Output

 

Css Todo List Code

CSS element “ID”

 

So the next thing that we might want to do is single out one <li> or one <h1> or one instance of something. CSS match the id of HTML element with the value of its attributes like if we want to change the color of any particular <li> we need to assign a unique id to that <li> element and then define the property of that element in CSS.

#id_value { style properties }

To make it understand this element. Let’s give an ID to <li>

HTML Code

 


<body>

<h1>TO-Do List</h1>

<ul>

<li><input type="checkbox">Get Groceries</li>

<li><input type="checkbox">Pay Electric bill</li>

<li><input type="checkbox">Print inventory sheets</li>

<li id="designn"><input type="checkbox">Visit Aunt</li>

</ul>

</body>
       

CSS Code

 


li{

border-width: 1px;

border-style: solid;

border-color: green;

}

#designn{

color: yellow;

background-color: rgb(66, 134, 244);

}
       

Output

 

Create a Todo List with CSS

 

Here we have the output, you can see the last element of our to-do list is with the different color. The background is turned to blue and the text turns to yellow.

 

 

So ID’s are great to single out individual elements but sometimes we want to have multiple elements that look similar. So what if I want to style half of <li> element one way and another half of them another way, so to achieve that we use class.

CSS element “CLASS”

So the way that a class works it’s just like an ID, except it’s called a class and we can apply it to any number of elements on a page. So as you can see here we are applying a class called the ‘geeksclass’ to the first element and the third element of our TO-DO list and then we refer to it in our CSS with a dot ‘.’ Instead of HASH ‘#’. It is almost the same as compared to CSS ID element.

.class_name { Style properties }

Text Decorator:

The text-decoration is a way to add a line through, by using this property we can specify the decoration added to the text. We can add an underline, wavy underline, line-through, and overline there are the bunch of other option too, and we are going to use line-through here in this example.

HTML Code

 

<body>

<h1>TO-Do List</h1>

<ul>

<li class="geeksclass"><input type="checkbox">Get Groceries</li>

<li class="geeksclass"><input type="checkbox">Pay Electric bill</li>

<li><input type="checkbox">Print inventory sheets</li>

<li id="designn"><input type="checkbox">Visit Aunt</li>

</ul>

</body>

CSS Code

 

li{

border-width: 1px;

border-style: solid;

border-color: green;

}

#designn{

color: yellow;

background-color: rgb(66, 134, 244);

}

.geeksclass{

text-decoration: line-through;

}
       

Output

So you can see in this example we have only created one class ‘geeksclass’ and apply that class to two <li> element, so we use this class property to apply the single style to multiple tags.

 

 

In this knowledge bit, we have learned about selectors and created a basics CSS Todo List. We have also discussed three main basic selectors Element, ID, and Class. Now in the next knowledge bit, We are going to Introduce Chrome Inspector.

 

You can look out for other knowledge bits from here

Click to comment

Most Popular

To Top