Learn Bootcamp From Zero

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

In the previous post, I show the general rule of CSS which is selector { property: value;}. Selector can be element tags such as <p>, <body>, <h1>, etc.  For different style purpose, we may need to use different types of selectors in the CSS part. The course instructor introduces three basic CSS selectors which are used in most time. I would love to share my study note here. Element Selector: Element selector will select all instances of a given element. It's basically the type of attacks as you specify div or paragraph or body and then it will select all. For example: p{ color: blue;} will make all paragraph texts in blue color. ID Selector: ID selector selects an element with a given ID. And Only One Per Page! The first step is to add that hook which is called an ID as an element attribute in HTML. For example: <p id="special" > text </p> Then in the CSS part, we refer to the later by writing "#" a...