Skip to main content

Posts

Showing posts with the label element

Project Study: How to Use Basic CSS Selectors to Style A TO DO List?

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: g...

Four Easy Steps To Create A Simple HTML Table

When someone mentions to create a table, the first thing come to my minds is  to use Excel. I love using Excel to make tables because it is very simple to use and has many great functions. But, if I want to create a table on our web page, Excel won't work on that way anymore. Someone may think to create a table on Excel, to save it as image and then to upload on the web page.  Excuse me? Is it the right solution? What if you want to change the data? Upload a new table image again? Of course NO! The best way is to use HTML create a table, so you can always update the data! To create a simple HTML table, it only requires FOUR STEPS : First Step: Brainstorm your table design and content Before you create a table, you need to brainstorm some ideas about your table such as: What is this table about? What is the purpose of creating this table? What kinds of data do you need to collect? How many rows and columns? Do you need any images or hyperlinks? Do...