Friday, January 4, 2019

WHAT MY MENTOR FAILED TO TEACH ME ON INTERNAL CASCADING STYLE SHEET

CENTAPRENEUR 12:54 AM CSS , STYLING 1 comment :

Hi, I humbly welcome you again on this platform. I’m undoubted you’re doing well. Today we’ll be having a very crucial discussion, stewed with illustrative examples, on ‘Internal Cascading Style Sheet. Also, I will be unveiling some important secrets on how to embed Internal CSS in an HTML document. One most significant trick my able mentor failed to teach me on Internal CSS was how to code different colours on the same page of a website using internal Styling. The day asked him whether it’s possible to apply different colours to different paragraphs on the same page, he simply threw a peal of wan laughter at me and walked away. How I later learnt it, is beyond my comprehension. But one thing is certain here, I mustn’t fail to teach you how to do it, also with practical examples. We better get started.

INTERNAL CASCADING STYLE SHEET.

Internal CSS as we’ve established in the CSS introductory lesson is the type of styling that is usually used at the top of a web page document. In other words, internal CSS is used inside the <head> tag of a document, and bot in a separate document like the external CSS. Internal Cascading Style Sheet is also called Embedded Styling. Most of the educational websites (such as unn.edu.ng, oau.edu.ng, etc) use internal styling so that users can see everything in one view. You don’t need to switch back and forth between HTML and CSS document. You seem confused? Well, don’t bother, I didn’t intend to confuse you. All you need to take note of at this level is that Internal Cascading Style sheets are defined within the head tag.

More importantly, Internal CSS carry out its styling using <style> tags in the head of a document. In other words, the style format for the document is defined is defined in the <style> </style> tag where you can determine a lot of things such as the colour of the background, text sizes, text colour, alignment, to mention but a few. One of the main advantages of this is that it saves energy, time and space, and also you do not have to define the style of your content line by line as in the case of Inline Cascading Style Sheet.

Hmmm, I must have bored you with lengthy theories. I think we should go into the practical aspect of the subject matter. Get your text editor ready, whether you’re using PC or smartphone it doesn’t matter. Just make sure you have downloaded a good text editor. Key in the following codes below, I will succinctly provide an explanation at the end.

<!DOCTYPE html>

<html>

<head>

<title>Codinglegit</title>

<style>

color: white; background-color: gray;

}

</style>

</head>

<body>

<p>I love codinglegit very much</p>

<p>Thanks to Daniel Unachukwu Foundation for sponsoring this free Tutorial</p>

</body>

</html>

It will look like this in your text editor

Save and open it, the result will look exactly like this

Before I explain, let me teach you what my mentor failed to teach me.

WHAT MY MENTOR FAILED TO TEACH ME ON INTERNAL CASCADING STYLE SHEET

Now I will illustratively show you how to give different paragraphs different colours on the same web page. It was actually what my mentor failed to teach me.

So write the following codes into your text editor. ( Hey, I did not say ‘copy it’. ‘’Lazy civilian’’. Don’t you know that writing it by yourself helps it to stick to your brain).

<!DOCTYPE html>

<html>

<head>

<title>Codinglegit</title>

p1{

color: pink; background-color: black;

}

p2{

color: white; background-color: green;

}

p3{

color: red; background-color: gray;

}

</style>

</head>

<body>

<p1>I love codinglegit very much</p1>

<p2>Thanks to Daniel Unachukwu Foundation for sponsoring this free Tutorial</p2>

<p3>Do not misuse this opportunity</p3>

</body>

</html>

It will look like this on your text editor

The result is as follows after you save and open it

EXPLANATION

a. Curly braces ‘’{}’’: is used to open and as well close CSS codes in document

b. P{: means that all styling within the curly braces will be applied to p element.

c. Gray: is used in CSS instead of the British spelling ‘’Grey’’ in HTML.

d. Color: is also used against British spelling ‘colour’.

e. Other things here such as <!DOCTYPE, <head> etc. have been explained in our previous lessons,

WRAPPING UP

Like seriously, CSS makes me feel like an artist. I decorate funny colours using CSS code at my will. The joy I derive doing this is phenomenal. In no time, you will become an expert in Cascading Style Sheet if you keep practising. See you in our next lesson.