How to Use Three CSS Design Elements

---

What Goes On Whenever You Utilize Inline, Internal and External CSS Together?

A Fun Little CSS Lesson for Beginners

It's a good thing you asked!

You can have some fun with the different CSS styles if used correctly . This is where the term “cascading” comes to the scene. Let's point out that you have an External Style Sheet that sets the style for the entire website design giving it a unique look and feel. On one page particularly you include some fresh components plus some inline css which is different from what you have specified within your external style sheet.

Everything will “cascade” or fall into place. It will initially employ any inline code, then it will look for the internal code within your pages head after which it's going to use any external style sheet listed. If you have used inline code to alter the color and font of a single particular paragraph, the other sentences and other components will still be based on the external style sheet. They play collectively very well, as they say.

Inline Style Sheets

To work with inline styles, you employ the, .... (drum roll please).... style tag, also known as the style attribute. Did you guess correctly? You can answer yes, Nobody is ever going to know except you.

If you have ever had a look in your html or source code, you should have observed these little creatures there because this is where they love to call home. For the objective of our training, we've grabbed one of those evasive style tags and placed it on the page right beneath here so you could get a better look at it in the daytime.

<p style=

Now there, this does not look so frightening does it? Sort of ordinary really. The issue is at the moment, it doesn't know what to do, so it is just sitting there with patience waiting for further instruction. Web page design language and CSS tend to be very obedient and follow instructions very well so long as the directions can be found in a precise voice that they can comprehend.

Why don't we enjoy yourself giving it something to perform.

<p style="color:red; font-family:verdana; margin-left:20px">

Here is the text for the page that is impacted

</p>

Therefore, what we now have done is taken the existing <p> (paragraph) tag and added a style which will affect everything until we close the paragraph using the </p> tag.

From the example given above, in the event you haven't guessed already, we used the style tag to modify the color to red, used the verdana font and applied a left margin of 20px. If we would've used sans serif font rather than verdana, we could have inserted that within single quotes like 'sans serif'. Whenever you choose two words inline, you have to enclose in single quotes.

Look more closely at the illustration above to see why it works.

We applied the style= followed by a few instructions. The primary section of the instruction is called the property while the 2nd part is called the value

property:value

The main property we wished to designate was the color and the first value was red. You separate the property and value using the colon => :

color:red

If you use more than one property and value, separate those with the semicolon => ;

color:red; font-family:verdana

or

color:red; font-family:'sans serif'

Keep in mind, two words have to be enclosed in single quotes when using them inline. Easy enough, don't you think? I can see you nodding your head with excitement. Explain more, I can hear you announcing.

Yes, we will cover more about CSS inline, external and internal later but, did you know you can get an e-book covering this and other lessons at NO CHARGE? All you have to do is go to download the CSS style lessons listed here. Enjoy and I hope this tutorial brightened your perspective in web design.

What Is CSS Design?