Project Study: How to Use Basic

In the last post, I shared my study note about three basic CSS selectors. Even though I wrote an example under each selector, it still may not enough to explain how those selectors make the effect.

Therefore, I am going to explain more detail about how to use those CSS selectors in a simple project.

In this project, I will create a short To Do List and then apply element selector, ID selector and class selector to style the list.

Step One: Create HTML page

As I mentioned before, the first step is always to create HTML page. Without a page, we can’t do any CSS work. It is just like we should have a cake ready before to put cream and fruit on it.

Here is the To Do List HTML part:

It turns out a simple black and white web page.

Step Two: Use Element/ID/Class selectors in the CSS file.

Element Selector: 

Firstly, I want to make the web page background to be grey. Since the whole body of the page will be grey, I will use Element selector: body { background: grey;}. As the result, the web page background turns into grey color.

I also want to add a blue border to each list text, so I write li { border: 2px solid blue;}. To be clear, 2px refers to the border width, solid refers to the border style, and blue refer to the border color.

ID Selector:

Since the ID selector can be only used once per page, I want to make a yellow background to the last list content which is “Finish CSS Study”. This is the most important thing in the day. I definitely don’t want to forget it.

I add the id=”special”inside the<li> tag on the HTML part. By the way, you don’t have to name the id as “special”, you can name anything you want. In the CSS part, I write the ID selector:#special { background: yellow;}. 

Keep in mind, if you use other id name, in the CSS part, you need to write #youridname { property: value;}.

Class Selector:

Since I already finished the first two things, I want to cross out both of them. It is time to use class selector.

Just like what I did in the ID selector, I need to add “class” attribute in the HTML. I set the class value as “completed” since I already completed them.

Then, I go back to the CSS part to write the class selector:.completed { text-decoration: line-through;}. Don’t forget the DOT before the attribute value.

The final page will look like: