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 "#" and then the name of the ID, and that will select the one element that matches that ID name.
For example: #special {color: red;} will only make that text in the selected paragraph with ID red color. The rest of paragraph text color will not change.
Class Selector:
Class selector selects all elements with a given 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.
For example: If we want highlight some text in different paragraphs, I will add "Class" attribute inside the <p> element.
HTML:
<p class="highlight"> Hello</p>
<p> World</p>
<p class="highlight"> Good</p>
<p> Night</p>
CSS:
.highlight { background: yellow;}
The outcome:
As you see, only "Hello" and "Good" paragraphs are highlighted because they are in the same class selector.
In the next post, I am going to show an simple example to explain how those three basic CSS selectors work.
Comments
Post a Comment