Greetings.
We shall be having an introduction to CSS today.
Just as we've said, HTML is a markup language that gives structure to a webpage.
It directs the computer on how to structure a webpage.
HTML was never intended to contain tags for formatting a webpage, but was created to describe a webpage.
But when tags like font, and color attributes were added to HTML 3.2 specification, development of large websites, where font and color were required to be added in every page became a long and expensive process.
To solve this problem, the World Wide Web Consortium (w3C) created CSS (which stands for Cascading style sheets).
CSS removed the style formatting from the HTML page.
It has saved alot of stress, made formatting much easier for developers.
There are three ways of using CSS
*The inline method: Styling in the opening tag of the intended formatting element.
This is though, required in special occasions as it is tedious in formatting a whole website.
*Internal Styling: This is styling in thesame page with your HTML page, but in the head tag.
It is easier than the inline styling as codes are written in the head and it has effect on the selected tags.
But it is not really recommended as it is tedious for a multiple pages website, though it's better for a single webpage.
*External styling/stylesheet: This is the widely recommended way of styling. It is the easiest way of styling. Multiple pages of a webpage can be effected by just a single line of code with a single selector.
CSS selectors: These are CSS properties that enable us to define a rule for HTML elements .
They can be a property of a tag, the value of an Id or class etc.
Example:
(i).
< p>The man is innocent.< /p>
(ii).
< h2 id="yet">The man is innocent< /h2>
(iii).
< h2 class="yet">The man is innocent < /h2>
In the above examples, we have three different examples of selectors.
In the (i), the selector is p.
If p is selected and given a color red, the text " the man is innocent" with appear red.
In the example(ii) the selector is #yet. You might be asking why the #..!!
Yes, the # is there because the attribute is "id", it is selected by the presence of the # sign .
So, if #yet is called and given a font-size of 2em, the text will bear the font-size of 2em.
Likewise in the (iii).
Though, classes as an attribute are called with the presence of a dot.
I.e ".yet"
If .yet is called and given a font-family of Helvetica, the text will bear it.
Selectors are very fundamental in CSS as it eases your work if properly organized.
So, it is nice using you selectors well.