Sunday, January 6, 2019
SELECTOR, PROPERTY AND VALUE IN CASCADING STYLE SHEET|ALL YOU SHOULD KNOW
Hi, I sincerely welcome you again on this platform. Without wasting your time on endless pleasantries, l will, at once dive headlong into today’s lesson. I will be teaching you about selector, property and value and their functions in cascading style sheet. Also, I will talk about the two major type of selectors which is extremely paramount while using CSS. Finally, as usual, there’s no lesson on this website that is quixotic or impractical, hence, it will not be quirk if we consider some practical examples at some point in the lesson. Let’s get started.
Selectors are one of the style rules in CSS that are used to define the part of the page you want to change. In other words, a selector points to or selects the HTML element you want to style. I will illustrate this further when we get to the example. Property, on the other hand, refers to the thing (usually color of text, etc.) you want to change. The last but the least is value. Value refers to the result of the property you want to change in your HTML. Hmmm, Mr. teacher, (it seems I smoked Sapele weed today…). Well, don’t get twisted with my poor, empty and perhaps, confusing conceptual definitions. It may not entirely be poppycock or misnomer. The truth is that some concepts are better illustrated than defined.
To illustrate the above concepts, kindly observe the following
h1{color:red;}
h1 is the selector
color is the property
red is the value.
I hope the above illustration helps to drive home my points. I want you to bear in mind that CSS declarations as seen above usually end with semicolons, and the groups are carefully enveloped with curly braces (or brackets).
Furthermore, you can choose any color name you want as long as it is supported by HTML. Currently, HTML supports about 140 color names or more.
Now let’s move into the types of selector in CSS.
TYPE OF SELECTORS
1. id selectors
An id selector is used to uniquely identify a tag once in a page. Id generally enables you to style an HTML element that has an id attribute, no matter their position in the document structure. You can name your id with the alphabet but never numbers.
Let’s consider an example.
Open your text editor, and strike in the following codes
HTML
div id="feel">
<p>CSS makes me feel like an artist</p>
</div>
<p>CSS is fun.</p>
CSS
#feel {
color: blue;
background-color: gray;
}
SAVE THE CSS AND REFERENCE IT IN THE HTML, IT WILL LOOK LIKE THIS
SAVE THIS AND OPEN IT, THE RESULT WILL APPEAR LIKE THIS
NOTE
<div> means division/separation. It is used to separate or divide HTML page section or paragraph from another.
2. Class selectors
Class selector almost work in the same way as the id selector. The only difference is that class can be used as many times on a page as you wish. Put it more clearly, class selector identifies tags just as id but differs in that you can use a class name on as many tags as you like,and this is not applicable to id. Note that classc name just like id, does not begin with numbers. Also to select an element with specific class, you must use period symbol (.) before the name.
Critically look at the example below.
Write the following codes into your text editor
HTML
<div>
<p class="first">I want this to be our first paragraph.</p>
<p>I want this to be our second paragraph.</p>
</div>
<p class="first"> CSS is fun.</p>
<p>I love coding</p>
CSS
.first{font-size: 400%;
color: white;
background-color: green;
}
Save the css and reference it in HTML document. It will look like this
When you save it and open it, it will appear lik this:
WRAPPING UP
Make sure you do not forget these important key points
1. Numbers are not used when naming either id or class.
2. If you want to select an element with specific id, make sure you use hash tag symbol (#).
3. If you want to select an element with specific class, make sure you use period symbol (.).
In our next lesson, will also be looking at some other crucial aspect of CSS that you must know. Swe you then.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment